xlsx
xlsx是由SheetJS开发的一个处理excel文件的npm库
适用于前端开发者实现导入导出excel文件的经典需求
为了区别于xlsx文件，突出其应用语言，该库通常又被称为js-xlsx
导出js数据为Excel文件
需要以下步骤：
安装 xlsx 库 你可以使用 npm 包管理器安装 xlsx 库，也可以将 xlsx 下载到本地，然后在 HTML 文件中通过 script 标签引入。准备数据 将需要导出的数据准备好，并将其存储为一个数组或对象。创建工作簿 通过 xlsx 库的utils.book_new() 方法创建一个工作簿（workbook）对象，该对象包含一个或多个工作表（worksheet）。创建工作表 通过 xlsx 库的 utils.json_to_sheet() 方法创建一个工作表，并将准备好的数据作为参数传入该方法。如果需要创建多个工作表，可以多次调用该方法，并将它们添加到工作簿对象中。将工作表添加到工作簿 通过 xlsx 库的 utils.book_append_sheet() 方法将创建好的工作表添加到工作簿对象中。导出数据 通过 xlsx 库的 writeFile() 方法将工作簿对象导出为 Excel 文件。你可以指定导出的文件名和文件格式，比如 .xlsx 或 .csv。 以下是一个使用 xlsx 库将数据导出为 Excel 文件的示例代码：
vue
<script setup>import * as XLSX from "xlsx/xlsx.mjs";const download = () => { const data = [ ["姓名", "年龄", "性别"], ["张三", 18, "男"], ["李四", 22, "女"], ["王五", 25, "男"], ]; const workbook = XLSX.utils.book_new(); const worksheet = XLSX.utils.json_to_sheet(data); XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1"); XLSX.writeFile(workbook, "data.xlsx");};</script><template> <button @click="download">导出</button></template>导入Excel文件生成js数据
使用input type="file"选择xlsx文件使用fileReader读取文件为二进制编码XLSX.read方法处理二进制编码为worksheet对象XLSX.utils.sheet_to_json转换worksheet对象为json数据，实际上就是js数组最后处理数组数据为自己想要的格式即可<template> <article> <p>导入高德地图xlsx文件</p> <input type="file" ref="upload" accept=".xls,.xlsx" /> </article></template><script>import XLSX from "xlsx"export default { mounted() { // 监听表格导入事件 this.$refs.upload.addEventListener("change", e => { this.readExcel(e) }) }, methods: { readExcel(e) { //表格导入 const files = e.target.files //如果没有文件名，不往下执行 if (files.length <= 0) return // 上传文件格式不正确,非xls或者xlsx格式文件，不往下执行 if (!/\.(xls|xlsx)$/.test(files[0].name.toLowerCase())) return const fileReader = new FileReader() // readAsBinaryString将文件读取为二进制编码 fileReader.readAsBinaryString(files[0]) // 读取完成 fileReader.onload = ev => { try { // 二进制数据 const data = ev.target.result // xlsx处理二进制数据 const workbook = XLSX.read(data, { type: "binary" }) //取第一张表 const wsname = workbook.SheetNames[0] // 根据表格内容生成json数据 const ws = XLSX.utils.sheet_to_json(workbook.Sheets[wsname]) const outputs = [] //清空接收数据 for (let i = 0; i < ws.length; i++) { const sheetData = { value: ws[i].adcode, label: ws[i].中文名 } outputs.push(sheetData) } } catch (e) { console.log(e) } } } }}</script>xlsx-js-style库使用
xlsx基础库不提供样式设置，可以使用xlsx-js-style库，这个库是xlsx库的fork版本，并添加了样式定义
详细样式可以查看https://github.com/gitbrent/xlsx-js-style/
可以调节背景色、字体样式、border
npm i -s xlsx-js-style<script setup>import XLSX from "xlsx-js-style";console.log();const download = () => { const wb = XLSX.utils.book_new(); const ws = XLSX.utils.aoa_to_sheet([ ["Hello", "World"], [1, 2], ]); // 在单元格对象中添加 `s` 属性来设置该单元格的样式 ws["A1"].s = { font: { bold: true }, alignment: { horizontal: "center" }, fill: { fgColor: { rgb: "FFFF0000" } }, }; ws["B2"].s = { alignment: { horizontal: "center" }, font: { bold: true }, fill: { fgColor: { rgb: "FFFF0000" } }, }; XLSX.utils.book_append_sheet(wb, ws, "Sheet1"); XLSX.writeFile(wb, "example.xlsx");};</script>去掉标题头
XLSX.utils.json_to_sheet默认使用Object.keys生成头部
所以如下数据格式不加上skipHeader: true,会出现0 1 2的索引头部
<script setup>import XLSX from "xlsx-js-style";const download = () => { const data = [ ["姓名", "年龄", "性别"], ["张三", 18, "男"], ["李四", 22, "女"], ["王五", 25, "男"], ]; const wb = XLSX.utils.book_new(); const ws = XLSX.utils.json_to_sheet(data, { skipHeader: true, }); XLSX.utils.book_append_sheet(wb, ws, "Sheet1"); XLSX.writeFile(wb, "example.xlsx");};</script><template> <button @click="download">导出</button></template>设置列宽
<script setup>import XLSX from "xlsx-js-style";const download = () => { const data = [ { 姓名: "张三", 年龄: 18, 性别: "男" }, { 姓名: "李四", 年龄: 20, 性别: "女" }, { 姓名: "王五", 年龄: 22, 性别: "男" }, ]; const wb = XLSX.utils.book_new(); const ws = XLSX.utils.json_to_sheet(data); ws["!cols"] = [ { wpx: 150, }, { wpx: 500, }, { wpx: 100, }, ]; XLSX.utils.book_append_sheet(wb, ws, "Sheet1"); XLSX.writeFile(wb, "example.xlsx");};</script><template> <button @click="download">导出</button></template>合并单元格
<script setup>import XLSX from "xlsx-js-style";const download = () => { const data = [ { 姓名: "张三", 年龄: 18, 性别: "男" }, { 姓名: "李四", 年龄: 20, 性别: "女" }, { 姓名: "王五", 年龄: 22, 性别: "男" }, ]; const wb = XLSX.utils.book_new(); const ws = XLSX.utils.json_to_sheet(data); // s 表示要合并的单元格范围的左上角单元格，r 表示该单元格的行号，c 表示该单元格的列号，行列号从 0 开始计数。所以 { r: 0, c: 0 } 表示第 1 行第 1 列的单元格，即 A1 单元格。 // e 表示要合并的单元格范围的右下角单元格，其含义与 s 相同。所以 { r: 0, c: 1 } 表示第 1 行第 2 列的单元格，即 B1 单元格。 // 因此，{ s: { r: 0, c: 0 }, e: { r: 0, c: 1 } } 表示要合并第 1 行第 1 列和第 1 行第 3 列之间的元格。 // 注意，合并会以开始位置单元格中的内容为准，所以合并后的单元格中的内容为 A1 单元格中的内容。 ws["!merges"] = [{ s: { r: 0, c: 0 }, e: { r: 0, c: 2 } }]; XLSX.utils.book_append_sheet(wb, ws, "Sheet1"); XLSX.writeFile(wb, "example.xlsx");};</script><template> <button @click="download">导出</button></template>