Vue项目如何使用xlsx插件实现Excel文件导出

文
章
目
录

• 一、插件安装与引入
• （一）安装插件
• （二）引入插件
• 二、基本功能实现
• （一）读取Excel文件
• （二）写入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文件的导出功能，并且能够根据需求进行各种个性化设置。