文
章
目
录
章
目
录
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文件的导出功能，并且能够根据需求进行各种个性化设置。
