一般类似功能都会放到后端来做，当然作为一项扩展技能，前端开发人员也应该掌握。
今天，给大家介绍前端实现excel表格下载的俩种方式
方式一、
const jsonData = [{order:1,name:'小明',age:12},{order:2,name:'小张',age:20}]
if (!jsonData.length) return
// 表格的列标题 如果出现科学技术法或者其他格式 使用 \t
let title = '序号,名称,年龄\n'
jsonData.map(item => {
let key = {}
key['序号'] = item.order
key['名称'] = item.name
key['年龄'] = item.age
for (let i in key){
title += `${key[i] + '\t'},`
}
title += '\n'
})
// encodeURIComponent 解决中文乱码
let uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(title)
// 创建a标签
let link = document.createElement('a')
link.href = uri
link.download = `${new Date().toLocaleString()}_数据表_${jsonData.length}条.csv`
link.click()
效果图：
虽然实现了我们的需求，但是表格看起来不够美观
方式二、
创建一个dom表格，可以添加样式
<table id="table" style="position: fixed;left: -10000px;">
<tr>
<th>序号</th>
<th>名称</th>
<th style="width:200px">年龄</th>
</tr>
<tr v-for="(item,index) in jsonData">
<td>{{item.order}}</td>
<td>{{item.name}}</td>
<td>{{item.age}}</td>
</tr>
</table>
获取到表格节点，生成dom节点树，生成blob对象
exportExcel() {
let oHtml = document.getElementById('table').outerHTML
let excelHtml = `
<html>
<head>
<meta charset='utf-8' />
<style>
table{
min-width: calc(100vw - 290px);
/*margin-top: 50px;*/
border-collapse: collapse;
border-spacing: 0;
border: 1px #eee solid;
border-radius: 50px;
}
table tr{
height:50px;
border: 1px #eee solid;
white-space: nowrap;
}
table tr th{
border: 1px #eee solid;
background-color: #e1f0fe;
}
table tr td{
border: 1px #eee solid;
white-space: nowrap;
padding: 30px 20px;
text-align: center;
}
</style>
</head>
<body>
${oHtml}
</body>
</html> `;
// 生成blob对象
let excelBlob = new Blob([excelHtml], {type: 'application/vnd.ms-excel'})
// 创建一个a标签
let oA = document.createElement('a');
// 利用URL.createObjectURL()方法为a元素生成blob URL
oA.href = URL.createObjectURL(excelBlob);
// 给文件命名
oA.download = `${new Date().toLocaleString()}_提现数据表_${this.jsonData.length}条.xlsx`;
// 模拟点击
oA.click();
},
效果图：
可以看到我们的表格宽度是200，以及我们添加的背景边框等额外样式，完美实现。