相关推荐recommended
vue导入导出excel、设置单元格背景色、文字居中、合并单元格、设置列宽(使用xlsx库和xlsx-style库)
作者:mmseoamin日期:2023-11-30

xlsx

xlsx是由SheetJS开发的一个处理excel文件的npm库

vue导入导出excel、设置单元格背景色、文字居中、合并单元格、设置列宽(使用xlsx库和xlsx-style库),vue导入导出excel、设置单元格背景色、文字居中、合并单元格、设置列宽(使用xlsx库和xlsx-style库),第1张

适用于前端开发者实现导入导出excel文件的经典需求

为了区别于xlsx文件,突出其应用语言,该库通常又被称为js-xlsx

导出js数据为Excel文件

需要以下步骤:

vue导入导出excel、设置单元格背景色、文字居中、合并单元格、设置列宽(使用xlsx库和xlsx-style库),vue导入导出excel、设置单元格背景色、文字居中、合并单元格、设置列宽(使用xlsx库和xlsx-style库),第2张

  1. 安装 xlsx 库 你可以使用 npm 包管理器安装 xlsx 库,也可以将 xlsx 下载到本地,然后在 HTML 文件中通过 script 标签引入。
  2. 准备数据 将需要导出的数据准备好,并将其存储为一个数组或对象。
  3. 创建工作簿 通过 xlsx 库的 utils.book_new() 方法创建一个工作簿(workbook)对象,该对象包含一个或多个工作表(worksheet)。
  4. 创建工作表 通过 xlsx 库的 utils.json_to_sheet() 方法创建一个工作表,并将准备好的数据作为参数传入该方法。如果需要创建多个工作表,可以多次调用该方法,并将它们添加到工作簿对象中。
  5. 将工作表添加到工作簿 通过 xlsx 库的 utils.book_append_sheet() 方法将创建好的工作表添加到工作簿对象中。
  6. 导出数据 通过 xlsx 库的 writeFile() 方法将工作簿对象导出为 Excel 文件。你可以指定导出的文件名和文件格式,比如 .xlsx 或 .csv。

以下是一个使用 xlsx 库将数据导出为 Excel 文件的示例代码:

vue


导入Excel文件生成js数据

  1. 使用input type="file"选择xlsx文件
  2. 使用fileReader读取文件为二进制编码
  3. XLSX.read方法处理二进制编码为worksheet对象
  4. XLSX.utils.sheet_to_json转换worksheet对象为json数据,实际上就是js数组
  5. 最后处理数组数据为自己想要的格式即可

xlsx-js-style库使用

xlsx基础库不提供样式设置,可以使用xlsx-js-style库,这个库是xlsx库的fork版本,并添加了样式定义

vue导入导出excel、设置单元格背景色、文字居中、合并单元格、设置列宽(使用xlsx库和xlsx-style库),vue导入导出excel、设置单元格背景色、文字居中、合并单元格、设置列宽(使用xlsx库和xlsx-style库),第3张

详细样式可以查看https://github.com/gitbrent/xlsx-js-style/

可以调节背景色、字体样式、border

npm i -s xlsx-js-style
 

去掉标题头

XLSX.utils.json_to_sheet默认使用Object.keys生成头部

所以如下数据格式不加上skipHeader: true,会出现0 1 2的索引头部


设置列宽


合并单元格