突发奇想，看能否不调用后台的情况下实现导出数据到Excel表格，网上找了一些大神，还真的有
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p style="font-size: 20px;color: red;">使用table标签方式将json导出xls文件</p>
<button onclick='tableToExcel()'>导出</button>
<script>
function tableToExcel(){
//要导出的json数据
const jsonData = [
{
name:'李白',
phone:'123456',
email:'123@123456.com'
},
{
name:'韩信',
phone:'123456',
email:'123@123456.com'
},
{
name:'虞姬',
phone:'123456',
email:'123@123456.com'
},
{
name:'工本',
phone:'123456',
email:'123@123456.com'
},
]
//列标题
let head = `<tr><td>姓名</td><td>电话</td><td>邮箱</td></tr>`;
let tbody="";//内容
for (let item in jsonData) {
tbody+=
`<tr>
<td>${jsonData[item].name + '\t'}</td>
<td>${jsonData[item].phone + '\t'}</td>
<td>${jsonData[item].email + '\t'}</td>
</tr>`
}
let str = head+tbody;//头部跟身体内容连接
//Worksheet名
let worksheet = 'Sheet1'
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]-->
</head><body><table>${str}</table></body></html>`;
//下载模板
window.location.href = uri + base64(template)
}
//输出base64编码
function base64 (s) { return window.btoa(unescape(encodeURIComponent(s))) }
</script>
</body>
</html>
