当前位置:首页 » 《休闲阅读》 » 正文

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

15 人参与  2024年03月30日 15:05  分类 : 《休闲阅读》  评论

点击全文阅读


设置导出的表格样式,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 <= excelData.length; i++) {          //用正则表达式判断是否是某一行          if (key.replace(/[^0-9]/gi, "") == i) {            worksheet[key].s = {              //设置字体              font: {                name: "Arial",                sz: 12,                bold: false,                color: { rgb: "000000" },              },              //设置居中              alignment: {                horizontal: "center",                vertical: "center",                wrapText: true,              },              //设置边框              border: {                top: { style: "thin" },                right: { style: "thin" },                bottom: { style: "thin" },                left: { style: "thin" },              },            };          }        }           });      this.$xlsx.utils.book_append_sheet(workbook, worksheet, "Sheet1");      this.$xlsx.writeFile(workbook, "a.xlsx"); //表格名称    },

参考:前端根据后端返回数据导出指定样式的表格(xlsx-js-style)_前端excel导出指定格式-CSDN博客


点击全文阅读


本文链接:http://m.zhangshiyu.com/post/88164.html

<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

最新文章

  • 途径一场风月全书+后续+结局(商予淮宋泠音)列表_途径一场风月(商予淮宋泠音)途径一场风月全书+后续+结局在线
  • 池烟宁的爱如朝露已晞经典荡气回肠池烟宁贺宴临全书在线
  • (番外)+(全书)桑年裴谨言(你是我未拆的遗书结局+番外)_(桑年裴谨言)列表_笔趣阁(你是我未拆的遗书结局+番外)
  • 全文途径一场风月+后续+结局(商予淮宋泠音夏予烟)列表_全文途径一场风月+后续+结局
  • 嫁给未婚夫哥哥后,他不死不休悬念章节免费释出_「沈灏明叶清疏妹妹」后续全文免费阅读
  • [踹了破产千金女友后,她却跪地求我回来]后续完结版_周雨墨糖糖宋修文完结版免费阅读
  • 霍聿年祝沐雪江廷臣(淡月烟雨寄朝朝+后续+结局)结局_(霍聿年祝沐雪江廷臣淡月烟雨寄朝朝+后续+结局全书结局)结局列表_笔趣阁(霍聿年祝沐雪江廷臣)
  • (番外)+(全书)长离不见清瑟结局+番外(江清瑟谢长离)列表_长离不见清瑟结局+番外(江清瑟谢长离)长离不见清瑟江清瑟谢长离结局+番外
  • (番外)+(全书)爱意终落定,不再盼相逢结局+番外_(傅承裴楚梓悠)爱意终落定,不再盼相逢结局+番外列表_笔趣阁(傅承裴楚梓悠结局+番外)
  • 分手后,他被我无缝衔接了精彩章节免费试读_「梁烨季云帆安安」精彩章节试读
  • 她不再回头后续已完结_[陆言沈棠林晚]限时免费章节抢先看
  • 「乱世书生,从打猎致富开始」小说免费在线阅读_[周田杨繁花]小说免费试读

    关于我们 | 我要投稿 | 免责申明

    Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1