js導出excel,並保留特定的樣式

客戶要求了導出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);
        },

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章