前言
在我们开发项目的过程中，应该都会遇到 excel 导出功能。那么现在我对 excel 导出方法做如下的记录，方便以后查看，并且分享给大家。
一、纯 JS 导出 EXCEL
我们在开发过程中，或多或少会遇到不需要调用接口来导出 EXCEL 的情况，那么可以参照如下代码，实现前端纯 JS 导出 EXCEL。
export function tableToExcel(jsonData, fileName) {
let str = '';
//循环遍历，每行加入tr标签，每个单元格加td标签
for (let i = 0; i < jsonData.length; i++) {
// 数据列标题
if (i === 0) {
str += '<tr>';
for (let item in jsonData[i]) {
//增加\t为了不让表格显示科学计数法或者其他格式
str += `<td>${item + '\t'}</td>`;
}
str += '</tr>';
}
// 数据内容
str += '<tr>';
for (let item in jsonData[i]) {
//增加\t为了不让表格显示科学计数法或者其他格式
str += `<td>${jsonData[i][item] + '\t'}</td>`;
}
str += '</tr>';
}
// 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)
// 通过创建a标签下载（此方法可以自定义文件名）
let a = document.createElement('a');
a.href = uri + base64(template);
a.download = `${fileName}_${new Date().toLocaleString()}.xlsx`;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
}
// 输出base64编码
function base64(s) {
return window.btoa(unescape(encodeURIComponent(s)))
}
二、通过接口导出 EXCEL
当我们的导出数据需要从后端获取时，可以通过如下方式进行导出。
本例使用了 axios 请求服务端数据，如过是其他方式类似，请看如下代码：
exportExcel(url, data, fileName) {
return axios({
url: url,
baseURL: baseApi,
method: 'post',
data: JSON.stringify(data),
responseType: 'blob',
headers: {
'X-Requested-With': 'XMLHttpRequest',
'content-type': 'application/json; charset=utf-8'
}
}).then((res) => {
if (res.status === 200) {
let tempBlob = new Blob([res.data, {type :'application/vnd.ms-excel:charset=utf-8'}]);
let targetUrl = window.URL.createObjectURL(tempBlob);
let a = document.createElement('a');
a.href = targetUrl;
a.download = `${fileName}_${new Date().toLocaleString()}.xlsx`;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
} else {
console.log("请求资源失败")
}
}).catch(e=>console.log(e))
},