便捷前端导出excel文件工具与示例代码

2024-02-05 23:32:04

js-xlsx：轻松导出和导入 Excel 文件

js-xlsx 是一个强大的 JavaScript 库，可让你使用纯 JS 读取和导出 Excel 文件。它的功能强大，支持多种格式，包括 XLS、XLSX 和 ODS。

安装 js-xlsx

通过 npm 安装 js-xlsx：

npm install js-xlsx

导入 js-xlsx

在你的 JavaScript 项目中导入 js-xlsx：

import * as XLSX from 'js-xlsx';

导出 Excel 文件

让我们导出一个包含姓名、年龄和性别数据的简单 Excel 文件：

// 将数据转换为 Excel 表格
const worksheet = XLSX.utils.aoa_to_sheet([
  ['姓名', '年龄', '性别'],
  ['张三', 20, '男'],
  ['李四', 22, '女'],
]);

// 创建一个新的工作簿
const workbook = XLSX.utils.book_new();

// 将工作表添加到工作簿
XLSX.utils.book_append_sheet(workbook, worksheet, 'sheet1');

// 将工作簿写入文件
XLSX.writeFile(workbook, 'test.xlsx');

支持中文

要导出带有中文数据的 Excel 文件，请在 writeFile 方法中添加 bookSST: true 选项：

XLSX.writeFile(workbook, 'test.xlsx', { bookType: 'xlsx', bookSST: true });

指定列宽

为特定列指定宽度：

// 设置列宽数组
const colWidths = [10, 10, 10];

// 为工作表添加列宽
worksheet['!cols'] = colWidths;

指定行高

指定特定行的行高：

// 设置行高数组
const rowHeights = [20, 20, 20];

// 为工作表添加行高
worksheet['!rows'] = rowHeights;

合并单元格

// 添加合并单元格
XLSX.utils.sheet_add_aoa(worksheet, [['合并单元格', '合并单元格']], {
  origin: {
    r: 0,
    c: 0,
  },
  destination: {
    r: 1,
    c: 2,
  },
});

添加样式

// 创建一个样式对象
const style = {
  font: {
    name: 'Arial',
    sz: 12,
    bold: true,
  },
  alignment: {
    horizontal: 'center',
    vertical: 'center',
  },
};

// 为单元格应用样式
XLSX.utils.cell_style(worksheet, { r: 0, c: 0 }, style);

添加图片

// 创建一个 Image 对象
const image = new Image();
image.src = 'image.png';

// 将图片添加到工作簿
XLSX.addImage(workbook, image, 'image1');

// 在工作表中添加图片
XLSX.utils.cell_add_image(worksheet, 'image1', {
  tl: {
    r: 0,
    c: 0,
  },
  br: {
    r: 10,
    c: 10,
  },
});