Vue项目如何使用xlsx插件实现Excel文件导出
Vue项目借助xlsx插件，能轻松实现数据导出为Excel文件。接下来，就详细介绍如何在Vue项目里使用xlsx插件进行Excel文件的导出。
一、插件安装与引入
（一）安装插件
在项目的开发环境中，使用包管理工具来安装xlsx插件及其相关依赖。如果使用npm，在命令行输入：
npm install xlsx npm install file-saver 要是你习惯用yarn，对应的命令则是：
yarn add xlsx yarn add file-saver 这两组命令的作用是一样的，都是把xlsx和file-saver这两个插件安装到项目中，xlsx用于处理Excel文件的读写操作，file-saver则负责将生成的Excel文件保存到本地。
（二）引入插件
安装完成后，需要在代码中引入这两个插件，才能在项目里使用它们的功能。在相关的JavaScript文件中，添加以下代码：
import * as XLSX from 'xlsx'; import FileSaver from 'file-saver'; 这样就把xlsx和file-saver成功引入到当前代码文件中，后续就能调用它们的方法来操作Excel文件了。
二、基本功能实现
（一）读取Excel文件
读取Excel文件时，可以按以下步骤进行：
// 读取指定路径下的Excel文件内容，返回一个包含文件信息的工作簿对象 const workbook = XLSX.readFile('path/to/file.xlsx'); // 获取工作簿中第一个工作表的名称 const firstSheetName = workbook.SheetNames[0]; // 根据工作表名称获取对应的工作表对象 const worksheet = workbook.Sheets[firstSheetName]; // 将工作表中的数据转换为JSON格式，方便在JavaScript中处理和使用 const data = XLSX.utils.sheet_to_json(worksheet); console.log(data); 通过这几步操作，就能读取Excel文件中的数据，并将其转换为JavaScript中的数据结构，便于后续的处理和分析。
（二）写入Excel文件
写入Excel文件的流程如下：
// 创建一个新的工作簿对象，作为Excel文件的基础结构 const workbook = XLSX.utils.book_new(); // 准备要写入的数据，这里以一个包含表头和数据行的二维数组为例 const data = [ ['Name', 'Age', 'Email'], ['Alice', 25, 'alice@example.com'], ['Bob', 30, 'bob@example.com'] ]; // 将二维数组数据转换为工作表对象，以便添加到工作簿中 const worksheet = XLSX.utils.aoa_to_sheet(data); // 将创建好的工作表添加到工作簿中，并指定工作表名称为'Sheet1' XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1'); // 将工作簿对象写入到本地文件系统，生成名为'output.xlsx'的Excel文件 XLSX.writeFile(workbook, 'output.xlsx'); 按照上述步骤，就能在项目中创建一个新的Excel文件，并将数据写入其中。
三、高级功能拓展
（一）自定义样式
有时候，我们需要对Excel文件的样式进行自定义，比如设置列宽、字体加粗、单元格颜色等。可以参考下面的代码：
// 将数据转换为工作表对象 const ws = XLSX.utils.aoa_to_sheet(data); // 定义每列的宽度，这里设置第一列宽度为15字符宽度，第二列为10，第三列为30 const wscols = [ { wch: 15 }, { wch: 10 }, { wch: 30 } ]; // 将定义好的列宽应用到工作表 ws['!cols'] = wscols; // 获取工作表中A1单元格对象，准备设置样式 const cell = ws['A1']; // 为A1单元格设置样式，这里设置字体加粗，背景填充色为红色（RGB值为FF0000） cell.s = { font: { bold: true }, fill: { fgColor: { rgb: 'FF0000' } } }; 通过这些代码，能对Excel文件的样式进行个性化设置，让生成的文件更加美观和专业。
（二）合并单元格
合并单元格可以让Excel文件的布局更加合理，代码实现如下：
// 定义合并单元格的范围，这里表示合并A1到C1单元格 ws['!merges'] = [ { s: { r: 0, c: 0 }, e: { r: 0, c: 2 } } ]; 在实际使用时，根据需求修改合并单元格的起始和结束位置即可。
（三）添加水印
给Excel文件添加水印也是常见的需求，实现代码如下：
// 在工作表中添加水印，水印内容为'Watermark'，origin为-1表示从右下角开始添加 XLSX.utils.sheet_add_aoa(ws, [['Watermark']], { origin: -1 }); 通过这段代码，就能在Excel文件的工作表中添加水印，起到一定的标识或版权保护作用。
四、完整使用示例
在实际项目中，通常会把导出Excel文件的功能封装成一个方法，方便在不同地方调用。下面是一个完整的导出数据到Excel的方法示例：
import * as XLSX from 'xlsx'; import FileSaver from 'file-saver'; // 定义导出数据到Excel的方法，接收一个包含各种配置项的对象 export function exportJsonToExcel(options) { // 设置默认配置项 const defaultOptions = { sheetName: 'Sheet1', autoWidth: true, watermark: '' }; // 合并传入的配置项和默认配置项，优先使用传入的配置 const { header, data, filename, sheetName, autoWidth, watermark } = { ...defaultOptions, ...options }; // 创建新的工作簿 const wb = XLSX.utils.book_new(); // 处理数据，在数据开头添加表头 const exportData = [header, ...data]; // 根据处理后的数据创建工作表 const ws = XLSX.utils.aoa_to_sheet(exportData); // 如果设置了自动调整列宽 if (autoWidth) { // 根据数据内容计算每列的合适宽度 const colWidths = header.map((_, colIndex) => { return { wch: Math.max( ...exportData.map(row => { const cellValue = row[colIndex]; // 如果单元格值为空，设置最小宽度为10 if (cellValue == null) return 10; // 根据字符串长度计算宽度，非ASCII字符按两个字符宽度计算 return String(cellValue).replace(/[^x00-xff]/g, 'aa').length * 8 + 2; }) ) }; }); // 将计算好的列宽应用到工作表 ws['!cols'] = colWidths; } // 如果设置了水印 if (watermark) { // 如果工作表没有合并单元格的配置，先初始化 if (!ws['!merges']) ws['!merges'] = []; // 添加一个合并单元格的配置，用于放置水印 ws['!merges'].push({ s: { r: exportData.length + 1, c: 0 }, e: { r: exportData.length + 1, c: header.length - 1 } }); // 在指定位置添加水印 XLSX.utils.sheet_add_aoa(ws, [[watermark]], { origin: -1 }); } // 将工作表添加到工作簿 XLSX.utils.book_append_sheet(wb, ws, sheetName); // 将工作簿转换为二进制数据 const excelBuffer = XLSX.write(wb, { bookType: 'xlsx', type: 'array' }); // 创建一个Blob对象，用于保存二进制数据，设置文件类型为Excel文件类型 const blob = new Blob([excelBuffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' }); // 使用file-saver插件将Blob对象保存为本地文件，文件名由传入的filename决定 FileSaver.saveAs(blob, `${filename}.xlsx`); } 这个方法接收一些参数，用于配置导出的Excel文件的各项属性，具体参数说明如下：
header： 表头数组，用来定义Excel文件每列的名称。data： 数据数组，包含要导出到Excel文件中的具体数据。filename： 导出的Excel文件的名称。sheetName： 工作表名称，默认是Sheet1。autoWidth： 控制是否自动调整列宽，默认开启。watermark： 水印文本内容，默认为空。
（四）实际调用
在项目中使用这个导出方法时，按照以下方式调用：
import { exportJsonToExcel } from "@/utils/index"; // 定义导出Excel文件的函数 const exportExcel = () => { // 定义表头 const header = [ "时间", "类型", "地址", "ID", ]; // 假设tableData是已经获取到的项目中的数据，将其转换为适合导出的格式 const data = tableData.value.map((item) => [ item.time, item.type, item.address, item.id, ]); // 调用导出方法，传入配置参数 exportJsonToExcel({ header, data, filename: "excel名", }); }; 通过以上步骤，就可以在Vue项目中顺利实现Excel文件的导出功能，并且能够根据需求进行各种个性化设置。
支付宝扫一扫
微信扫一扫 |
