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

最新推荐文章于 2024-08-09 07:02:10 发布

三行代码解决

最新推荐文章于 2024-08-09 07:02:10 发布

阅读量1.8k

点赞数 17

文章标签： javascript 前端 excel

本文链接：https://blog.csdn.net/DAJJbb/article/details/136034483

版权

本文详细介绍了如何使用js-xlsx库进行Excel文件操作，包括创建工作簿、工作表，设置单元格值和样式，以及解决npm插件报错。适合开发者快速上手和定制Excel文件。

摘要由CSDN通过智能技术生成

文章目录

前言

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

创建excel流程

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

创建一个工作薄
创建一个sheet
创建表格行列等

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

创建工作薄（WorkBook）
创建sheet（WorkBook.Sheet）
创建表格行列（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页命名为sheet1
XLSX.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 <= range.e.r; row++) {
        for (let col = range.s.c; col <= range.e.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 // 批量替换单元格的样式
        }
    }
})

由于xlsx.js不能提供样式的插入，因此需要使用xlsx-style.js的write方法；
由源码可得：
xlsx-style源码：write方法
在这里插入图片描述
继续往下看：
在write_zip_type这个方法中new了一个StyleBuilder对象；

在StyleBuilder对象内部完成了给表格增加样式的操作；