代码大致的逻辑是:
- 请求后端接口获取数据
- 将获取到的数据转为table
- table格式对应导出的excel表格的格式,下面只是一个简单的例子,更复杂的table格式可以自行去修改
- 进行转码导出
exportExcel() {
//this.loading = true;
this.$message.warning("数据导出中,请耐心等待...");
//请求后端接口,获取数据进行导出
this.$api.exportExcel().then(
({
data
}) => {
var tableData = data.data;
this.getrank(tableData);
var str = '';
str +=
'<tr><th>姓名</th><th>班级</th><th>年龄</th></tr>';
//循环遍历数据,每行加入tr标签,每个单元格加td标签
for (let i = 0; i < tableData.length; i++) {
str += '<tr>';
str += `<td>${ tableData[i].name + '\t'}</td>`;
str += `<td>${ tableData[i].class + '\t'}</td>`;
str += `<td>${ tableData[i].age + '\t'}</td>`;
str += '</tr>';
}
var worksheet = 'Sheet1'; //Worksheet名
var uri = 'data:application/vnd.ms-excel;base64,';
//下载的表格模板数据(固定不用修改)
var 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 + this.base64(template)
var link = document.createElement("a");
link.href = uri + this.base64(template);
link.download = '文件名' + ".xls";
link.style = "visibility:hidden";
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
console.log("导出成功-----");
//this.loading = false;
},
err => {
this.$message.error("导出失败!");
//this.loading = false;
}
);
},
base64(s) {
return window.btoa(unescape(encodeURIComponent(s)))
},