js导出excel，并保留特定的样式

最新推荐文章于 2024-06-07 15:25:47 发布

lizheng8715

最新推荐文章于 2024-06-07 15:25:47 发布

阅读量1.3k

点赞数

分类专栏： vue js导出excel 文章标签： html excel javascript

本文链接：https://blog.csdn.net/lizheng8715/article/details/105432499

版权

vue 同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

js导出excel

1 篇文章 0 订阅

订阅专栏

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

lizheng8715

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
js导出excel，并保留特定的样式

客户要求了导出excel的样式，去网上找了很多办法，最终还是觉得这个办法最靠谱。原理是office文档可以导出成html，那自然也可以打开内容是html的文档。创建一份html文档，下载时，后缀以.xls结尾。以这种方式下载的下载的excel优点是可以随意设置样式，其他以json导出的excel表很多都不能设置样式。缺点也比较明显，就是打开时会提示，文件格式与后缀不匹配，是否仍要打...
复制链接

扫一扫

专栏目录