使用xlsx、xlsx-style自定义样式导出excel

1.安装依赖xlsx xlsx-style

npm install xlsx xlsx-style --save

2.在对应的vue文件中引入

import XLSX from 'xlsx'
import XLSXD from 'xlsx-style'
// 在引入xlsx-style时会报错
// This relative modules was not found:  * ./cptable in ./~/xlsx-style/dist/cpexcel.js
// 两种解决方法:
// 1.找到node_modules\xlsx-style\dist\cpexcel.js 中的 815行的 
 var cpt = require('./cpt' + 'able') 
 // 更改为 
 var cpt = cptable
// 2. 在vue.config.js中修改配置
module.exports = {
 configureWebpack: {
     externals: {
         './cptable': 'var cptable'
     }
 }
}

3.在对应的vue文件中开始导出

// 导出按钮
导出
// 要导出的数据
data() {
  return {
    msgList: [
      { name: '张三', age: 16, sex: '男' },
      { name: '李四', age: 16, sex: '男' },
      { name: '王五', age: 16, sex: '男' }
    ]
  }
}
methods: {
    // 导出方法
  exportHandler() {
    let wb = XLSX.utils.book_new();
    let contentWs = XLSX.utils.json_to_sheet(this.msgList);
    XLSX.utils.book_append_sheet(wb, contentWs, "人员明细表");
    XLSX.writeFile(wb, "人员表.xlsx");
  },
}

基本数据导出效果图

image.png

// 自定义表头名称
exportHandler() {
   let wb = XLSX.utils.book_new();
      // 自定义表头数据
      let headers = {
        name: "姓名",
        age: "年龄",
        sex: "性别",
      };
      // 将表头放入数据源前面
      this.msgList.unshift(headers);
      let contentWs = XLSX.utils.json_to_sheet(this.msgList, {
        header: ['name', 'age', 'sex'], // 可自定义表头顺序
        skipHeader: true, // 是否忽略表头,默认为false
      });
      XLSX.utils.book_append_sheet(wb, contentWs, "人员明细表");
      XLSX.writeFile(wb, "人员表.xlsx");
}

自定义表头名称效果图

image.png

// 自定义标题及合并单元格,设置单元格列宽
exportHandler() {
      let wb = XLSX.utils.book_new();
      let headers = {
        name: "姓名",
        age: "年龄",
        sex: "性别",
      };
      this.msgList.unshift(headers);
      let contentWs = XLSX.utils.json_to_sheet(this.msgList, {
        header: ["name", "age", "sex"],
        skipHeader: true,
        origin: "A2", // 设置插入位置
      });
      // 单独设置某个单元格内容
      contentWs["A1"] = {
        t: "s",
        v: "人员名单",
      };
      // 设置单元格合并  !merges 为一个对象数组,每个对象设定了单元格合并的规则, 
      // {s:{ r: 0, c: 0}, e: { r: 0, c: 2}} 为一个规则, s: 起始位置, e: 结束位置, r: 行, c: 列
      contentWs["!merges"] = [{ s: { r: 0, c: 0 }, e: { r: 0, c: 2 } }];
      // 设置列宽
      contentWs["!cols"] = [{ wch: 50 }, { wch: 20 }, { wch: 40 }];
      XLSX.utils.book_append_sheet(wb, contentWs, "人员明细表");
      XLSX.writeFile(wb, "人员表.xlsx");
}

image.png

// 指定单元格设置链接,目前仅使用xlsx写入文件时生效
contentWs["A1"] = {
        t: "s",
        v: "人员名单",
        // 设置链接,及提示
        l: {
          Target: "http://www.baidu.com",
          Tooltip: "点击此链接跳转到百度",
        }
}

设置单元格链接效果图

image.png

// 给单元格自定义样式
exportHandler() {
  let wb = XLSX.utils.book_new();
      let headers = {
        name: "姓名",
        age: "年龄",
        sex: "性别",
      };
      this.msgList.unshift(headers);
      let contentWs = XLSX.utils.json_to_sheet(this.msgList, {
        header: ["name", "age", "sex"],
        skipHeader: true,
        origin: "A2",
      });
      // 单独设置某个单元格内容
      contentWs["A1"] = {
        t: "s",
        v: "人员名单",
        l: {
          Target: "http://www.baidu.com",
          Tooltip: "点击此链接跳转到百度",
        },
        // 自定义样式
        s: {
          font: {
            name: "宋体",
            sz: 40,
            bold: true,
            color: { rgb: "FFFFAA00" },
          },
          alignment: {
            horizontal: "center",
            vertical: "center",
          },
          fill: { bgcolor: { rgb: "ffff00" } },
        },
      };
      // 设置单元格自动换行,目前仅对非合并单元格生效
      contentWs["A3"].s = {
          alignment: {
              wrapText: true, // 设置单元格换行
              indent: 1 // 设置单元格缩进
      }
      contentWs["!merges"] = [{ s: { r: 0, c: 0 }, e: { r: 0, c: 2 } }];
      contentWs["!cols"] = [{ wch: 50 }, { wch: 20 }, { wch: 40 }];
      XLSX.utils.book_append_sheet(wb, contentWs, "人员明细表");
      // 使用xlsx-style写入文件方式,使得自定义样式生效
      const tmpDown = new Blob([
        this.s2ab(
          XLSXD.write(wb, {
            bookType: "xlsx",
            bookSST: true,
            type: "binary",
            cellStyles: true,
          })
        ),
      ]);
      this.downExcel(tmpDown, "人员表.xlsx");
},
// 自定义下载文件方法
downExcel(obj, fileName) {
      const a_node = document.createElement("a");
      a_node.download = fileName;
      if ("msSaveOrOpenBlob" in navigator) {
        window.navigator.msSaveOrOpenBlob(obj, fileName);
      } else {
        a_node.href = URL.createObjectURL(obj);
      }
      a_node.click();
      // 
      setTimeout(() => {
        URL.revokeObjectURL(obj);
      }, 2000);
},
// 文件流转换
s2ab(s) {
      if (typeof ArrayBuffer !== "undefined") {
        const buf = new ArrayBuffer(s.length);
        const view = new Uint8Array(buf);
        for (let i = 0; i != s.length; ++i) {
          view[i] = s.charCodeAt(i) & 0xff;
        }
        return buf;
      } else {
        const buf = new Array(s.length);
        for (let i = 0; i != s.length; ++i) {
          buf[i] = s.charCodeAt(i) & 0xff;
        }
        return buf;
      }
    },

自定义单元格样式效果图

image.png

以上展示excel的基本导出及部分自定义样式.
单元格对象

image.png

单元格数据类型, t 的可选值

Z)5N6$WN9PTW5KBODAR2)CR.png