小工具知识网

当前位置: 首页 > 行业知识 > 纯前端导出,设置导出xlsx文件样式xlsx-js-style

行业知识

纯前端导出,设置导出xlsx文件样式xlsx-js-style

2026-11-07 05:40:43 来源:互联网转载

设置导出的表格样式,xlsx-js-style!真的绝绝子!

1.下载xlsx-js-style依赖

npm install xlsx-js-style

2.在main.js中挂载到vue原型上,方便使用

import XLSX from 'xlsx-js-style'Vue.prototype.$xlsx = XLSX

 3.页面具体写法

exportExcel() {      const th = [        [          "序号",          "工号",          "姓名",          "备注",        ],      ];      let newData = [];      this.listData.map((item, index) => {        newData.push([          index + 1,          item.jobNumber,          item.name,          item.remark        ]);      });      let excelData = th.concat(newData); //数组的拼接      let workbook = this.$xlsx.utils.book_new(); // 工作簿      let worksheet = this.$xlsx.utils.aoa_to_sheet(excelData); // 数据表      //以下是样式设置,样式设置放在组织完数据之后,xlsx-js-style的核心API就是SheetJS的      //样式的设置可以参考相关文档 贴在文章末尾第二个链接      //修改列宽cols 行宽就用rows 总共11列      worksheet["!cols"] = [        {          width: 14,        },             {          width: 14,        },        {          width: 14,        },        {          width: 20,        }      ];      // 修改行高 这里我只修改了第一行      worksheet["!rows"] = new Array(this.listData.length + 1).fill({        hpx: 24,      });      //合并第一行单元格 s和e指范围即第一行 第一列到第十一列      // worksheet["!merges"] = [{ s: { r: 0, c: 0 }, e: { r: 0, c: 10 } }];      Object.keys(worksheet).forEach((key) => {        // 非!开头的属性都是单元格        // excelData.length是我表格的长度也就是总行数        //设置从第二行开始的数据样式        for (let i = 1; i 

上一篇:怎么删除mysql的表?

下一篇:服务器盖板怎么装?