vue使用js-xlsx、xlsx、xlsxStyle导出excel，可合并表格、修改格子样式，例如背景颜色、字体大小、列宽等

开始之前先上效果图，觉得不错的可以点个赞（有合并表格的需求可看文章底部链接）

1.需要用到的js

(1)js-xlsx.js
https://github.com/Ctrl-Ling/XLSX-Style-Utils或者https://github.com/SheetJS/js-xlsx
里面的xlsx.core.min.js或xlsx.full.min.js
(2)xlsxStyle.js
https://github.com/Ctrl-Ling/XLSX-Style-Utils
里面的xlsxStyle.core.min.js
(3)xlsxStyle.utils.js
https://github.com/Ctrl-Ling/XLSX-Style-Utils
里面的xlsxStyle.utils.js

2.下载js后通过

  <script src="./vue.js"></script> <script src="./xlsx.core.min.js"></script><script src="./xlsxStyle.core.min.js"></script><script src="./xlsxStyle.utils.js"></script>

3.开始使用

<button @click="exportExcel3">导出excel3</button>

methods: {exportExcel3() {//数据形式let __data = [['订单号', '产品名称', '供应商信息', '采购单价', '币种', '退税率', '关税', '付款方式'], //标题['内容', '内容', '内容', '内容', '内容', '内容', '内容', '内容'],['内容', '内容', '内容', '内容', '内容', '内容', '内容', '内容'],['内容', '内容', '内容', '内容', '内容', '内容', '内容', '内容'],['内容', '内容', '内容', '内容', '内容', '内容', '内容', '内容']]var sheet = XLSX.utils.json_to_sheet(__data, {skipHeader: true,});//第一次使用的朋友可以添加一句输出看看sheet的数据结构//console.log(sheet)//遍历每个格子for(const key in sheet) {//给每个格子修改样式sheet[key].s = {border: {//添加边框bottom: {style: 'thin',color: '000000'},left: {style: 'thin',color: '000000'},right: {style: 'thin',color: '000000'},top: {style: 'thin',color: '000000'}},//字体水平居中、垂直居中、自动换行、缩进alignment:{horizontal:'center', //水平居中vertical: 'center',wrapText: 1,indent: 0},//字体类型、大小、是否加粗font: {//字体name: '等线',sz: 9,bold: false}}//给特定格子（带'1'的，即首行 标题）添加样式，下面同理if (key.replace(/[^0-9]/ig, '') === '1') {sheet[key].s = {...sheet[key].s,fill: { //背景色fgColor: { rgb: 'EBF1DE' }},font: {//覆盖字体name: '等线',sz: 11,bold: true},}}if (key === 'A1') {sheet[key].s = {...sheet[key].s,fill: { //背景色fgColor: { rgb: 'E4DFEC' }}}}if (key === 'C1' || key === 'D1' || key === 'E1' || key === 'F1' || key === 'G1' || key === 'H1' ) {sheet[key].s = {...sheet[key].s,fill: { //背景色fgColor: { rgb: 'FDE9D9' }}}}}//列宽let colsP = [{'wch' : 8.11 //A},{'wch' : 12.67//B},{'wch' : 8.11//C},{'wch' : 8.11//D},{'wch' : 8.11//E},{'wch' : 6.78//F},{'wch' : 8.11//G},{'wch' : 8.11//H},]sheet['!cols'] = colsP//console.log('1111:', sheet)//打印let excelName = '汇报单.xlsx' //excel文件名this.openDownload(this.sheet2blob(sheet,'汇报单详细'), excelName);},//下面两个函数是处理数据流的，可以直接拿来用//导出excel辅助函数sheet2blob(sheet, sheetName) {let wb = XLSX.utils.book_new()wb.SheetNames.push(sheetName)wb.Sheets[sheetName] = sheetvar wbout = xlsxStyle.write(wb, { bookType: '', bookSST: false, type: 'binary' })var blob = new Blob([s2ab(wbout)], { type: "" },sheetName)// 字符串转ArrayBufferfunction s2ab(s) {var buf = new ArrayBuffer(s.length)var view = new Uint8Array(buf)for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xffreturn buf}return blob},//导出excel辅助函数openDownload(url, saveName) {if (typeof url == "object" && url instanceof Blob) {url = URL.createObjectURL(url) // 创建blob地址}var aLink = document.createElement("a")aLink.href = urlaLink.download = saveName || ""; // HTML5新增的属性，指定保存文件名，可以不要后缀，注意，file:///模式下不会生效var eventif (window.MouseEvent) event = new MouseEvent("click")else {event = document.createEvent("MouseEvents")event.initMouseEvent("click",true,false,window,0,0,0,0,0,false,false,false,false,0,null)}aLink.dispatchEvent(event);}
}

4.点击按钮导出，大功告成，给大家看看效果图

附：另一篇文章用的是相同的插件，导出的是table的数据，并对一些方法进行了封装可以直接使用：http://t.csdn.cn/WD7UX

vue使用js-xlsx、xlsx、xlsxStyle导出excel，可合并表格、修改格子样式，例如背景颜色、字体大小、列宽等相关推荐

nodejs使用xlsx和xlsx-style导出Excel文件
nodejs 导出 Excel 安装依赖 npm install xlsx --save npm install xlsx-style --save npm install fs --save 修改文 ...
vue前端使用xlsx和 xlsx-style 导出excel,给第一行添加样式
解释我是想要用前端生成excel表格,并给第一行添加样式参考文章 https://blog.csdn.net/jililin123/article/details/126249198 步骤基本和 ...
用Xlsx xlsx-style 导出excel表格，附带合并单元格，文字居中，文字颜色字体大小等样式 (复制即可实现)
提示:写完文章后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录系列文章目录前言一.用Xlsx xlsx-style 导出excel表格二.使用步骤 1.安装插件 2.引入总结前 ...
Java 利用hutool工具实现导出excel并合并单元格
Java 利用hutool工具实现导出excel并合并单元格 controller层调用service,就一个核心方法,没错就下面这个代码就能实现了.前提是项目里面要引用hutool包.把我这个复制到 ...
Springboot导出excel，合并单元格示例
原文链接:Springboot导出excel,合并单元格示例更多文章,欢迎访问:Java知音,一个专注于技术分享的网站以下用一个示例来说明springboot如何导出数据到excel. 首先引入M ...
EasyPoi导出excel以及整改表格宽度
一.背景最近做了一个excel导出功能,最开始查阅资料,EasyPoi以及阿里出的EasyExcel都是不错的工具,二者对比,EasyExcel导出大数据量的效率优于EasyPoi,但是前者要比后者 ...
java excel中重复数据事务处理_Java导出excel时合并同一列中相同内容的行思路详解...
一.有时候导出Excel时需要按类别导出,一大类下好几个小类,小类下又有好几个小小类,就像下图: 要实现这个也不难, 思路如下:按照大类来循环,如上就是按照张江校区.徐汇校区.临港校区三个大类循环,然 ...
java 导出如何合并列_Java导出excel时合并同一列中相同内容的行思路详解
一.有时候导出Excel时需要按类别导出,一大类下好几个小类,小类下又有好几个小小类,就像下图: 要实现这个也不难, 思路如下:按照大类来循环,如上就是按照张江校区.徐汇校区.临港校区三个大类循环,然 ...
excel怎么合并表格
今天跟大家分享一下excel怎么合并表格 1.如下图要求将这几个excel表格合并到一起. 2.首先我们点击下图选项 3.点击[汇总拆分]-[合并多簿] 4.鼠标点击[合并到一表] 5.然后选择[确定 ...