1、先看效果图
在这里插入图片描述
2、引入依赖

npm install xlsx-style --save
npm install --save xlsx

3、运行项目会发生一个报错

This relative module was not found: ./cptable in ./node_modules/xlsx-style@0.8.13@xlsx-style/dist/cpexcel.js

4、解决报错:
在\node_modules\xlsx-style\dist\cpexcel.js 807行 的

var cpt = require('./cpt' + 'able');

改为:

var cpt = cptable;

再次运行项目就不会报错了
5、使用:
5.1、引入:

import XLSXStyle from 'xlsx-style';

5.2、mounted使用

this.exportExcel()

5.3、methods定义方法

exportExcel(){
	let data = [['时间','电压'],['2021-12-01 08:57:12','3.14'],['2021-12-01 08:58:20','3.15']];
	let titles = ['时间','电压']
	var sheet = XLSX.utils.json_to_sheet(data, {
          skipHeader: true,
        });
        /**设置标题头背景色 */
        for (const key in sheet) {
          // 第一行,表头
          if (key.replace(/[^0-9]/ig, '') === '1') {
            sheet[key].s = {
              fill: { //背景色
                fgColor: { rgb: 'C0C0C0' }
              },
              font: {//字体
                name: '宋体',
                sz: 12,
                bold: true
              },
              border: {//边框
                bottom: {
                  style: 'thin',
                  color: 'FF000000'
                }
              },
              alignment:{
                horizontal:'center' //水平居中
              }
            }
          }
          let colsP = titles.map(item=>{
            let obj = {
              'wch': 25 //列宽
            }
            return obj;
          })
          sheet['!cols']  = colsP;//列宽
        }
        this.openDownload(this.sheet2blob(sheet,titles.join('-')), titles.join('-')+"Excel文件.xlsx");
},
sheet2blob(sheet, sheetName) {
      let wb = XLSX.utils.book_new();
      wb.SheetNames.push(sheetName)
      wb.Sheets[sheetName] = sheet;
      var wbout = XLSXStyle.write(wb, { bookType: '', bookSST: false, type: 'binary' })
      var blob = new Blob([s2ab(wbout)], { type: "" },sheetName);
      // 字符串转ArrayBuffer
      function 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) & 0xff;
        return buf;
      }
      return blob;
    },
openDownload(url, saveName) {
      if (typeof url == "object" && url instanceof Blob) {
        url = URL.createObjectURL(url); // 创建blob地址
      }
      var aLink = document.createElement("a");
      aLink.href = url;
      aLink.download = saveName || ""; // HTML5新增的属性,指定保存文件名,可以不要后缀,注意,file:///模式下不会生效
      var event;
      if (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);
    },

6、最后就会成功导出成为excel文件
7、改进:如果不想发生This relative module was not found: ./cptable in ./node_modules/xlsx-style@0.8.13@xlsx-style/dist/cpexcel.js问题:可以在package.json中把依赖引入改为以下图片所示,同时删除项目node_modules文件夹,项目重新 (npm i )安装依赖

"xlsx-style": "git+ssh://https://gitee.com/zheng-haiwen/xlsx-styles.git"

在这里插入图片描述

关于XLSXStyle更多配置的请看官网:https://www.npmjs.com/package/xlsx-style

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐