Vue3 导出带样式的 Excel 文件

使用xlsx-js-style file-saver封装的导出方法，适用vue2、vue3，用于将JSON数据转换为EXCEL文件，并自定义单元格样式

准备工作

安装了 xlsx-js-style 和 file-saver 库

npm install xlsx-js-style file-saver

使用说明

1. 引入库：

import XLSX from "xlsx-js-style"; // 引入 xlsx-js-style 库
import FileSaver from 'file-saver'; // 引入 file-saver 库

这两行代码引入了 xlsx-js-style 和 file-saver 库，前者用于处理 Excel 文件，后者用于保存文件。

2. 创建工作簿和工作表：

const header = ['日期','员工','金额']
const table = [
  ['2024-06-28','张三','100'],
  ['2024-06-28','李四','200'],
]
let workbook = XLSX.utils.book_new(); // 创建一个新的工作簿
const worksheet = XLSX.utils.aoa_to_sheet([header,table]); // 将数据转换为工作表格式
XLSX.utils.book_append_sheet(workbook, worksheet); // 将工作表添加到工作簿中

这里创建了一个新的工作簿，并将传入的数据（包含表头和表格内容）转换为工作表格式，然后添加到工作簿中。

3. 定义样式并应用到特定单元格：

// 这里的样式可自定义(示例只设置了字体颜色)
const cellStyle = { font: { color: { rgb: 'FF0000' } } }; // 定义红色字体样式

  // 遍历找到对应的列
  for (let key in worksheet) {
    // 根据特定条件判断是否需要自定义颜色
    if (key.includes('D') && [0, '0'].includes(worksheet[key].v)) { // D 列且值为 0 或 '0'
      worksheet[key].s = cellStyle;
    }
  }

定义了一个字体颜色为红色的样式，并根据特定条件将该样式应用到相应的单元格中。

4. 导出 Excel 文件：

let out = XLSX.write(workbook, { bookType: 'xlsx', bookSST: false, type: 'binary' }); // 将工作簿转换为二进制字符串

const s2ab = (s) => {
  var buf = new ArrayBuffer(s.length); // 创建一个新的 ArrayBuffer
  var view = new Uint8Array(buf); // 创建一个新的 Uint8Array 视图
  for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xff; // 将字符串转换为 Uint8Array
  return buf;
};

FileSaver.saveAs(new Blob([s2ab(out)], { type: 'application/octet-stream' }), workbookName); // 使用 FileSaver 保存文件

将工作簿转换为二进制字符串，并使用 FileSaver 库将其保存为 Excel 文件。

完整代码示例

import XLSX from "xlsx-js-style"; // 引入 xlsx-js-style 库
import FileSaver from 'file-saver'; // 引入 file-saver 库

export function createXlsx(excelData, workbookName) {
  // 创建一个新的工作簿
  let workbook = XLSX.utils.book_new();

  const header = ['日期','员工','金额']
  const table = [
    ['2024-06-28','张三','100'],
    ['2024-06-28','李四','200'],
  ]
  
  let workbook = XLSX.utils.book_new(); // 创建一个新的工作簿
  const worksheet = XLSX.utils.aoa_to_sheet([header,table]); // 将数据转换为工作表格式
  XLSX.utils.book_append_sheet(workbook, worksheet); // 将工作表添加到工作簿中

  // 定义红色字体样式
  const cellStyle = { font: { color: { rgb: 'FF0000' } } };

  // 遍历工作表中的单元格，并应用样式
  for (let key in worksheet) {
    // 如果单元格在 D 列且值为 0 或 '0'，应用样式
    if (key.includes('D') && [0, '0'].includes(worksheet[key].v)) {
      worksheet[key].s = cellStyle;
    }
  }

  // 将工作簿转换为二进制字符串
  let out = XLSX.write(workbook, { bookType: 'xlsx', bookSST: false, type: 'binary' });

  // 将字符串转换为 ArrayBuffer 并使用 Uint8Array 视图处理，可以有效地管理内存和提升性能，特别是在处理大数据量时。
  const 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;
  };

  // 使用 FileSaver 保存文件
  FileSaver.saveAs(new Blob([s2ab(out)], { type: 'application/octet-stream' }), workbookName);
}