1.使用场景：前后端分离，后端生成execl六文件，前端直接调用接口下载excel
/src/api/usr
export function exportExcel(path,params) {
return request({
url: path,
method:'get',
params:params,
responseType: 'arraybuffer'
})
}
//使用的地方
async handleDown () {
this.downLoading = true
try{
const res = await exportExcel('/service/reconciliation/downloadList',this.listQuery)
const blob = new Blob([res],{
type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8'
})
let downloadElement = document.createElement('a')
let href = window.URL.createObjectURL(blob)
downloadElement.href = href
downloadElement.download = '账单明细.xlsx'
document.body.appendChild(downloadElement)
downloadElement.click()
document.body.removeChild(downloadElement)
window.URL.revokeObjectURL(href)
setTimeout(() => {
this.downLoading = false
}, 500)
}catch(err){
this.downLoading = false
}
},
2.execl直接在前端生成，样式可以根据实际内容调整，本质是一个html，转换成execl
优点：样式可以随意切换，在前端直接生成减少网络传输压力
缺点：用word打开的时候会有一个提示，文档格式不匹配，但不影响正常的打开
exportxsl() {
var datanum = this.exceldata.length - 1;
// var startTime = this.timestampToTime(this.exceldata[0].createTime);
// var endTime = this.timestampToTime(this.exceldata[datanum].createTime);
var str =
"<tr style='font-size:15px'><td colspan='6' style='font-size:14px;background-color:#ddd;padding-top:10px;padding-bottom:10px;height:100px'> <strong>提示：</strong> 总数：" +
this.exceldata.length +
"条</td></tr>" +
'<tr>'+
'<td style="border: 0.5pt solid #000;background-color:#ddd;font-size:20px">账号</td>' +
'<td style="border: 0.5pt solid #000;background-color:#ddd;font-size:20px">产品</td>' +
'<td style="border: 0.5pt solid #000;background-color:#ddd;font-size:20px">单价</td>' +
'<td style="border: 0.5pt solid #000;background-color:#ddd;font-size:20px">实际费用</td>' +
'<td style="border: 0.5pt solid #000;background-color:#ddd;font-size:20px">类型</td>' +
'<td style="border: 0.5pt solid #000;background-color:#ddd;font-size:20px">订购时间</td>' +
' </tr>';
var data = this.exceldata; //从接口中获取的数据
for (let i = 0; i < data.length; i++) {
let account = data[i].account ? data[i].account:"--"
str += "<tr>";
str +=
'<td style="border: 0.5pt solid #000;">' + account + "</td>";
str +=
'<td style="border: 0.5pt solid #000;">' +
data[i].productName +
"</td>";
str +=
'<td style="border: 0.5pt solid #000;">' +
data[i].receivable +
"</td>";
str +=
'<td style="border: 0.5pt solid #000;">' +
data[i].receipt +
"</td>";
str +=
'<td style="border: 0.5pt solid #000;">' +
this.typeToChange(data[i].type) +
"</td>";
str +=
'<td style="border: 0.5pt solid #000;">' +
this.timestampToTime(data[i].createTime) +
"</td>";
str += "</tr>";
}
function base64(template) {
return window.btoa(unescape(encodeURIComponent(template)));
}
var filename = "个人账单信息";
//Worksheet名
var worksheet = "个人帐单信息";
// let uri = 'data:text/csv;charset=utf-8,ufeff' + encodeURIComponent(str);
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]--><style type="text/css">table{border: 0.5pt solid #000;background-cpor:#dddborder-collapse: collapse;}table td{border-top:0pt;font-size:16px } </style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></head><body><table>${str}</table></body></html>`;
var a = document.createElement("a");
a.download = filename;
a.href = uri + base64(template);
a.click();
// // 下载模板
// window.location.href = uri + base64(template)
}
3.还有一种使用官方的插件的execl 在前端生成，vue-element-admin 上有 我就不再重复叙述了。