安装与引入

安装

npm install xlsx
npm install file-saver
# 或者
yarn add xlsx
yarn add file-saver

引入

import * as XLSX from 'xlsx';
import FileSaver from 'file-saver'

基本功能

读取 Excel 文件

// 读取文件内容
const workbook = XLSX.readFile('path/to/file.xlsx');// 获取第一个工作表
const firstSheetName = workbook.SheetNames[0];
const worksheet = workbook.Sheets[firstSheetName];// 将工作表转换为 JSON 格式
const data = XLSX.utils.sheet_to_json(worksheet);
console.log(data);

写入 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);// 将工作表添加到工作簿
XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');// 导出文件
XLSX.writeFile(workbook, 'output.xlsx');

高级功能

自定义样式

// 创建样式
const ws = XLSX.utils.aoa_to_sheet(data);
const wscols = [{ wch: 15 },{ wch: 10 },{ wch: 30 }
];
ws['!cols'] = wscols;// 添加样式
const cell = ws['A1'];
cell.s = {font: { bold: true },fill: { fgColor: { rgb: 'FF0000' } }
};

合并单元格

// 合并单元格
ws['!merges'] = [{ s: { r: 0, c: 0 }, e: { r: 0, c: 2 } } // 合并 A1:C1
];

添加水印

// 添加水印
XLSX.utils.sheet_add_aoa(ws, [['Watermark']], { origin: -1 });

使用示例

导出数据到 Excel 方法

import * as XLSX from 'xlsx';
import FileSaver from 'file-saver';export function exportJsonToExcel(options) {// 默认配置const defaultOptions = {sheetName: 'Sheet1',autoWidth: true,watermark: ''};const { header, data, filename, sheetName, autoWidth, watermark } = {...defaultOptions,...options};// 1. 创建工作簿const wb = XLSX.utils.book_new();// 2. 处理数据（添加表头）const exportData = [header, ...data];// 3. 创建工作表const ws = XLSX.utils.aoa_to_sheet(exportData);// 4. 自动设置列宽if (autoWidth) {const colWidths = header.map((_, colIndex) => {return {wch: Math.max(...exportData.map(row => {const cellValue = row[colIndex];if (cellValue == null) return 10;return String(cellValue).replace(/[^\x00-\xff]/g, 'aa').length * 8 + 2;}))};});ws['!cols'] = colWidths;}// 5. 添加水印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 });}// 6. 将工作表添加到工作簿XLSX.utils.book_append_sheet(wb, ws, sheetName);// 7. 导出文件const excelBuffer = XLSX.write(wb, {bookType: 'xlsx',type: 'array'});const blob = new Blob([excelBuffer], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'});FileSaver.saveAs(blob, `${filename}.xlsx`);
}

参数说明

header：表头数组，包含列名。

data：数据数组，包含要导出的数据。

filename：导出的 Excel 文件名。

sheetName：工作表名称，默认为 Sheet1。

autoWidth：是否自动调整列宽，默认为 true。

watermark：水印文本，默认为空字符串。

使用

import { exportJsonToExcel } from "@/utils/index";// 导出Excel
const exportExcel = () => {const header = ["时间","类型","地址","ID",];const data = tableData.value.map((item) => [item.time,item.type,item.address,item.id,]);exportJsonToExcel({header,data,filename: "excel名",});
};