前景:
导出Excel 要求 多级表头? 单元格合并? 行内换行?单元格加样式?
这些都不是问题,看了这篇葵花宝典,那都不是事!
ok 进入正题。
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<p style="font-size: 20px;color: red;">使用table标签方式将json导出xls文件</p>
<button onclick='tableToExcel()'>导出</button>
<script>
function tableToExcel(){
//要导出的json数据
const jsonData = [
{
name:'第1行',
phone:'第1行',
email:'第1行'
},
{
name:'第2行',
phone:'第2行换行<br>第2行换行',
email:'第2行换行<br>第2行换行'
},
{
name:'第3行第3行',
phone:'第3行第3行',
email:'第3行第3行'
},
{
name:'第4行第4行',
phone:'第4行第4行',
email:'第4行第4行'
},
]
//判断表格内样式,根据需求写
const Datastyle =[
{
name:0,
phone:1,
email:0
},
{
name:1,
phone:0,
email:0
},
{
name:1,
phone:0,
email:0
},
{
name:1,
phone:0,
email:1
},
]
//列标题
let str ="<tr><td colspan='3'style='background-color: red;' >合并单元格</td></tr><tr><td>多级表头<br>多级表头<br>多级表头</td><td>表头</td><td>表头</td></tr>"
//循环遍历,每行加入tr标签,每个单元格加td标签
for(let i = 0 ; i < jsonData.length ; i++ ){
str+='<tr>';
for(let item in jsonData[i]){
let cssname = Datastyle[i][item]
let cssstylea = ''
if(cssname == 0){
cssstylea = ''
}else{
cssstylea = "'background-color: #bdd7ee'"
}
//增加\t为了不让表格显示科学计数法或者其他格式
str+="<td style="+cssstylea+">" + jsonData[i][item] + '\t' + "</td>";
}
str+='</tr>';
}
//Worksheet名
let worksheet = '模块名'
let uri = 'data:application/vnd.ms-excel;base64,';
//下载的表格模板数据
let template = `<html xmlns:o="urn:schemas-microsoft-com:office:office"
xmlns:x="urn:schemas-microsoft-com:office:excel"
xmlns="http://www.w3.org/TR/REC-html40">
<head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet>
<x:Name>${worksheet}</x:Name>
<x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet>
</x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]-->
<style>table td {border: 0.5px solid #000;width:180px;height:50px;font-size:15px;line-height: 40px;}</style>
</head><body><table>${str}</table></body></html>`;
//下载模板
//通过创建a标签实现
let link = document.createElement("a");
link.href = uri + window.btoa(unescape(encodeURIComponent(template)))
//对下载的文件命名
link.download = "文件名.xls";
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
</script>
</body>
</html>
下面放一张效果图
对你有帮助 记得收藏 +点赞啊