前端结合xlsx.js+xlsx-style.js源码实现自定义excel文件导出

文章目录

• • 前言
  • 创建excel流程
  • 快速上手
  • 指定范围替换值/样式
  • 小结

    前言

          js-xlsx是一款非常方便的只需要纯JS即可读取和导出excel的工具库，功能强大，支持格式众多，支持xls、xlsx、ods(一种OpenOffice专有表格文件格式)等十几种格式。本文全部都是以xlsx格式为例。

    创建excel流程

    创建一个excel会经历以下过程：

    1. 创建一个工作薄
    2. 创建一个sheet
    3. 创建表格行列等

    所以我们用js-xlsx创建excel同样的道理：

    1. 创建工作薄（WorkBook）
    2. 创建sheet（WorkBook.Sheet）
    3. 创建表格行列（WorkBook.sheet[]）

    快速上手

    安装：

    npm i xlsx xlsx-style -S

    解决运行时插件报错：

    xlsx-style.js报错Can‘t resolve ‘./cptable‘ in ‘xxx\node_modules_xlsx

    引入：

    import * as XLSX from 'xlsx'import * as XLSX2 from 'xlsx-style'

    导出：

    const workbook = XLSX.utils.book_new() // 创建工作簿const worksheet = XLSX.utils.json_to_sheet(data) // json结构转sheet页const worksheet = XLSX.utils.table_to_sheet(data) // dom结构转sheet页const worksheet = XLSX.utils.aoa_to_sheet(data) // 数组转sheet页XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1') // 插入sheet页命名为sheet1XLSX.writeFile(workbook, 'new.xlsx') // 输入文件

    指定范围替换值/样式

    ` 提示：默认导出表格文字样式是cablili，大小12，居左，字符串格式

    自定义替换函数：

    • range：替换范围
    • custom：样式或者默认值

      示例：

      custom = [    {        range: { start: 'A1', end: 'B2' },        cellStyles: {            border: {              top: { style: 'thin', color: { rgb: '000000' } },              left: { style: 'thin', color: { rgb: '000000' } },              bottom: { style: 'thin', color: { rgb: '000000' } },              right: { style: 'thin', color: { rgb: '000000' } }            },            font: {                name: '宋体',                sz: 11,                color: '000000',                bold: false,                underline: false,                italic: false            },            alignment: {                vertical: 'center',                horizontal: 'center',                wrapText: false            },            fill: {                bgColor: 'ffffff'            }        },        newValue: ''    }]

      实际逻辑：

      custom.forEach(item => {    const range = {        s: XLSX.utils.decode_cell(item.range.start), // 将输入的{start: 'A1'} 解析        e: XLSX.utils.decode_cell(item.range.end) // 将输入的{end: 'F10'} 解析    }    for (let row = range.s.r; row         for (let col = range.s.c; col             const cellRef = XLSX.utils.encode_cell({ c: col, r: row })            if (item.newValue) { // 批量替换单元格的值                worksheet[cellRef] = { t: 's', v: item.newValue, z: XLSX.utils.encode_cell({ c: col, r: row }) }                break            }            if (item.cellStyles && worksheet[cellRef]) worksheet[cellRef].s = item.cellStyles // 批量替换单元格的样式        }    }})