如何在Vue xlsx 导出表格中添加样式？

本文主要介绍如果通过xlsx组件在前端导出数据表格，并给表格添加样式。

xlsx组件地址：

https://github.com/SheetJS/sheetjs

xlsx-tyle组件地址：

xlsx-style - npm

安装组件：

npm install xlsx
//xlsx是基础组件没有样式，如果要添加样式还要引用xlsx-style
npm install xlsx-style

例子：

  import XLSX from "xlsx";
  import {write} from 'xlsx-style'; 
  import FileSaver from "file-saver";


  ...
  methods: {

    export () {
      // 导出数据,包括表头
      let data = [
        ['日期'      ,'数量' ,'金额'],
        ['2022-01-20',100   ,1000  ]
      ]
      // 数据转换成工作表格式
      let worksheet = XLSX.utils.aoa_to_sheet(data);
      console.log(worksheet)
      // 打印出来格式如下
      //{
      //  !ref: "A1:C2",
      //  "A1": {
      //          "v": "业务日期",
      //          "t": "s"
      //  },
      //  "B1": {
      //          "v": "数量",
      //          "t": "s"
      //  },
      //  "C1": {
      //          "v": "金额",
      //          "t": "s"
      //  },
      //  "A2": {
      //          "v": "2022-01-20",
      //          "t": "s"
      //  },
      //  "B2": {
      //          "v": "10",
      //          "t": "s"
      //  },
      //  "C2": {
      //          "v": "1000",
      //          "t": "s"
      //  }
      //}   
      // !ref 是Sheet对象(Sheet Objects)之一，表示表格的数据范围。
      // 其他每个单元格为一个对象（Cell Objects），v表示单元格的值，t表示单元格的数据类型。

      //为单元格加上样式
      // 设置样式
      for (let [key, value] of Object.entries(worksheet)) {
        if (key.startsWith('!')) continue;
        // value是一个单元格对象（Cell Objects）,s表格为样式对象（Style Objects）
        value.s = {
          alignment: {vertical: 'center', horizontal:'center'},
          border: {
            top: {style: 'thin'},
            bottom: {style: 'thin'},
            left: {style: 'thin'},
            right: {style: 'thin'}
          }
        }
      }

      let workbook = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(workbook, worksheet, '表格名称');

      // 导出表格，这种导出的表格是不会有样式的，就是一个只有数据的表格。
      /* 
       * XLSX.utils.writeFile(workbook,`销售表.xlsx`);
       */

      // 如果要样式，需要用xlsx-style的write方法
      let wopts = { bookType:'xlsx', bookSST:false, type:'binary' };
      let wbout = write(workbook,wopts);
      function s2ab(s) {
        let buf = new ArrayBuffer(s.length);
        let view = new Uint8Array(buf);
        for (let i=0; i!=s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
          return buf;
      }
      // 导出表格
      FileSaver.saveAs(new Blob([s2ab(wbout)],{type:""}), `销售表.xlsx`)
    }
  }

名词：

Sheet对象(Sheet Objects)

单元格对象（Cell Objects）

样式对象（Style Objects）

了解这些名词，知道其中每个属性含义。 基本也就会使用了。这些名词解释在组件的网站上可以找到。