前端页面导出表格工具：xlsx-js-style

参考：https://github.com/gitbrent/xlsx-js-style/
参考：https://docs.sheetjs.com/

xlsx-js-style简述

简单来说，xlsx-js-style就是 sheetJs + 基本表格样式。sheetJs 分两个版本，一个是Community Edition版，另一个是Pro版，Pro版需要付费使用，xlsx-js-style使用的是CE版，版本号为：0.18.

下载

npm i xlsx-js-style -S 

当前版本为（1.2.0）
可能会需要修改源码：\node_modules\xlsx-style\dist\cpexcel.js 807行把 var cpt = require('./cpt' + 'able'); 改成 var cpt = cptable;

引入

// vue项目中main.js引入
import XLSX from 'xlsx-js-style';
Vue.prototype.$xlsx = XLSX

使用

let wb = this.$xlsx.utils.table_to_book(
  document.querySelector("#tableId"),
  { raw: true }
);
// 添加样式（定义在下方）
this.addStyle(wb.Sheets.Sheet1)
// 下载
this.$xlsx.writeFile(wb, "sheet.xlsx");

addStyle(ws) {
  for (const key in ws) {

    // 数据列
    if (!key.includes('!')) {
      ws[key].s = {
        font: { // 字体设置
          sz: 9,
          bold: false,
          color: {
            rgb: '000000'// 十六进制，不带#
          }
        },
        alignment: { // 文字居中
          horizontal: 'center',
          vertical: 'center',
          wrapText: true
        },
        border: { // 设置边框
          top: { style: 'thin' },
          bottom: { style: 'thin' },
          left: { style: 'thin' },
          right: { style: 'thin' }
        }
      }
      
      if (ws[key].t === 'z' ) {
        ws[key].t = 's'
      }
    }
  }

  // 给跨行跨列的表格添加边框
  const ranges = ws['!merges']
  if (ranges) {
    ranges.forEach(range => {
      // 拿到合并单元格区域的第一个单元格
      const firstCell = ws[XLSX.utils.encode_cell({r: range.s.r, c:range.s.c})]

      // 遍历当前合并区域的所有但愿格
      for(var R = 0; R <= range.e.r; ++R) {
        for(var C = 0; C <= range.e.c; ++C) {
          ws[XLSX.utils.encode_cell({r:R, c:C})] = firstCell;
        }
      }
    })
  }
}

sheetJs简介

工具函数

sheetJs提供的工具函数大致可以分为两类：

1. 数据包装：把js数据转化成工作表或工作簿（worksheet或者workbook）
2. 数据提取：将表格文件中的数据提取出来，生成html（或者csv,text）

aoa_to_sheet 把JS二维数组转换为工作表。
sheet_add_aoa 把JS二维数组中的数据添加到已存在的工作表中。

json_to_sheet 把JS对象数组转换为工作表。
sheet_add_json 把JS对象数组添加到已存在的工作表中。

table_to_sheet 把DOM TABLE元素转换为工作表。
table_to_book 把DOM TABLE元素转换为工作簿。

sheet_add_dom 从DOM TABLE元素中添加数据到已经存在的工作表。

sheet_to_html 通过html元素展示表格。

sheet_to_json 把工作表转换为 JS对象数组。

sheet_to_csv 通过工作表生成csv文件
sheet_to_txt 通过工作表生成text文件
sheet_to_formulae 从表格中提取所有公式

book_append_sheet 添加一个工作表到工作簿中

table_to_sheet示例

// 生成新的工作簿
var workbook = XLSX.utils.book_new();
 
// 把Id为 'table1'的表格添加到工作簿中，工作表名为Sheet1
var ws1 = XLSX.utils.table_to_sheet(document.getElementById('table1'));
XLSX.utils.book_append_sheet(workbook, ws1, "Sheet1");
 
// 把Id为 'table1'的表格添加到工作簿中，工作表名为Sheet2
var ws2 = XLSX.utils.table_to_sheet(document.getElementById('table2'));
XLSX.utils.book_append_sheet(workbook, ws2, "Sheet2");
 
// 下载表格
XLSX.writeFile(workbook , "sheet.xlsx");

json_to_sheet示例

      const headerArr = ['customer', 'price', 'num', 'totalPrice', 'remark' ]
      const newHeaderArr = ['客户', '价格', '数量', '总价', '备注' ]
      // 过滤不需要的key
      const data = this.contractCompareDetailList.map( 
        obj => Object.fromEntries(
            Object.entries(obj).filter(
              (r) => headerArr.includes(r[0])
            )
          )
      );
      // 把对象数组转换成工作表，表头顺序按照headerArr的顺序
      const ws =XLSX.utils.json_to_sheet(data, { header: headerArr})
      // 创建新的工作簿，0.20.1版本的sheetJs可以支持传参，但当前使用的是0.18.5版本，不支持传参
      const wb = new XLSX.utils.book_new()
      // 把第一行的表头(newHeaderArr )替换成实际需要展示的表头
      XLSX.utils.sheet_add_aoa(ws, [newHeaderArr], { origin: "A1" });
      // 将生成的工作表添加到新的工作簿里，Sheet1是工作表的名称
      XLSX.utils.book_append_sheet(wb, ws, "Sheet1");
      // 下载工作簿
      XLSX.writeFile(wb, "测试.xlsx");

表格样式

style object 包含这些属性：alignment, border, fill, font, numFmt

style_object_property1.png style_object_property2.png color_style.png border_style.png

工作表的稀疏模型（sparse-mode）与紧密模型（dense-mode）

关于稀疏模型，工作表是通过对象的形式保存，对象的key就是每个单元格的位置，形如A1，C4这种形式，所对应的值，就是对应位置的单元格对象。例如：sheet['A4'] = cellObject

紧密模型则是以二维数组的形式保存每个单元格对象，形如：sheet["!data"][R][C] ，其中R和C分别代表从0开始的行索引和列索引。例如：sheet['!data'][0][3] = cellObject

在以前的环境中处理小型工作表时，稀疏工作表比密集工作表更有效。在较新的浏览器中，当处理非常大的工作表时，密集的工作表使用更少的内存，往往更高效。