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

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

前言

      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页命名为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对象内部完成了给表格增加样式的操作;
在这里插入图片描述

小结

       以上文章提供了关于使用js-xlsx库创建和导出Excel文件的详细指南。文章首先介绍了js-xlsx的基本概念和用途,然后提供了代码示例和解释,帮助开发人员了解如何使用该库进行Excel文件的操作。

       在文章中,我们学习了如何使用js-xlsx来创建工作簿、添加工作表以及设置单元格的值和样式。我们还了解了如何使用自定义替换函数和样式构建器来实现批量替换值和样式的功能。

       总的来说,这篇文章是一个很好的参考资料,对于想要使用js-xlsx库的开发人员来说尤其有用。它提供了必要的指导,使我们能够轻松地处理Excel文件,并根据需要进行自定义操作。

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值