客戶要求了導出excel的樣式,去網上找了很多辦法,最終還是覺得這個辦法最靠譜。
原理是office文檔可以導出成html,那自然也可以打開內容是html的文檔。
創建一份html文檔,下載時,後綴以.xls結尾。
以這種方式下載的下載的excel優點是可以隨意設置樣式,其他以json導出的excel表很多都不能設置樣式。
缺點也比較明顯,就是打開時會提示,文件格式與後綴不匹配,是否仍要打開,選擇是即可。
貼上源碼,小編用的vuecli,this指向的變量需要各位看官自行添加。
beginDown(title){
let wh='height:41px;width:139px;line-height:41px;';
let tac="text-align:center;";
let bold="font-weight:bold;";
let sty=' style="'+wh+'"';
let uri = 'data:application/vnd.ms-excel;base64,';
title=title || '快餐部日查詢表';
let mains='',cost=0,count=0;
this.menu.map(val=>{
count=((val.payByCash+val.payByCard+val.payByWx)*100).toFixed(0)/100
mains+=`
<tr>
<td style='${wh+tac}'>${val.name}</td>
<td style='${wh+tac}'>${val.payByCash || 0}</td>
<td style='${wh+tac}'>${val.payByCard || 0}</td>
<td style='${wh+tac}'>${val.payByWx || 0}</td>
<td style='${wh+tac}'>${ count || 0}</td>
</tr>
`
cost+=count
})
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>
<meta charset="utf-8">
</head>
<body>
<table border=1 style="font-family: "宋體";">
<tr>
<td colspan='5' style='${wh+tac+bold}'>${title}</td>
</tr>
<tr>
<td colspan='5' ${sty}>日期:${this.begin} 00:00:00 至 ${this.end} 00:00:00</td>
</tr>
<tr>
<td style='${wh+tac}'>餐別</td>
<td style='${wh+tac}'>現金</td>
<td style='${wh+tac}'>微信</td>
<td style='${wh+tac}'>一卡通</td>
<td style='${wh+tac}'>合計</td>
</tr>
${mains}
<tr>
<td ${sty}>總計大寫:</td>
<td ${sty} colspan='4'>${this.changeNumMoneyToChinese(cost)}</td>
</tr>
<tr>
<td ${sty}>總計小寫:</td>
<td ${sty} colspan='4' style='text-align:left;'>${cost}</td>
</tr>
<tr></tr>
<tr>
<td ${sty+tac}>收銀員:${this.operator}</td>
<td ${sty+tac}>出納:</td>
<td ${sty+tac}>會計:</td>
<td ${sty+tac}>打印時間:</td>
<td ${sty+tac} style='text-align:left'>${this.times({date:1,type:'y-m-d h:m:s'})}</td>
</tr>
<tr>
<td ${sty}>備註:</td>
<td ${sty} colspan='4'></td>
</tr>
</table>
</body>
</html>`;
var ele=document.createElement('a');
ele.download=title+'.xls';//下載文件的名字
ele.href=uri + window.btoa(unescape(encodeURIComponent(template)));
document.body.appendChild(ele);
ele.click();
document.body.removeChild(ele);
},