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

这篇具有很好参考价值的文章主要介绍了纯前端导出,设置导出xlsx文件样式xlsx-js-style。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

设置导出的表格样式,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博客文章来源地址https://www.toymoban.com/news/detail-798578.html

到了这里,关于纯前端导出,设置导出xlsx文件样式xlsx-js-style的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包