Vue导出Excel功能怎么实现

Vue导出Excel功能怎么实现

在Vue中，我们可以使用一些第三方库来实现导出Excel的功能，下面将介绍两种常用的方法：使用xlsx库和FileSaver.js库。

1、使用xlsx库

xlsx是一个用于处理Excel文件的JavaScript库，它提供了丰富的API来操作Excel文件，我们需要安装xlsx库：

npm install xlsx

在Vue组件中引入xlsx库：

import * as XLSX from 'xlsx';

接下来，我们创建一个函数来生成Excel文件：

exportExcel() {
  // 创建一个新的工作簿
  const workbook = XLSX.utils.book_new();
  // 创建一个新的工作表
  const worksheet = XLSX.utils.aoa_to_sheet([]);
  // 将工作表添加到工作簿中
  XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');
  // 将工作簿转换为二进制字符串
  const binaryData = XLSX.write(workbook, { bookType: 'xlsx', type: 'binary' });
  // 创建一个Blob对象，用于存储二进制数据
  const blob = new Blob([s2ab(binaryData)], { type: 'application/octet-stream' });
  // 创建一个隐藏的a标签，用于触发下载
  const aTag = document.createElement('a');
  aTag.href = URL.createObjectURL(blob);
  aTag.download = 'export.xlsx';
  aTag.style.display = 'none';
  document.body.appendChild(aTag);
  aTag.click();
  document.body.removeChild(aTag);
}

在这个函数中，我们首先创建了一个新的工作簿和工作表，然后将工作表添加到工作簿中，接着，我们将工作簿转换为二进制字符串，并创建一个Blob对象来存储这些数据，我们创建了一个隐藏的a标签，将其href属性设置为Blob对象的URL，并将其download属性设置为要保存的文件名，通过模拟点击这个a标签，我们可以触发文件的下载。

2、使用FileSaver.js库

FileSaver.js是一个用于保存文件的JavaScript库，它可以让我们轻松地将数据保存为文件，我们需要安装FileSaver.js库：

npm install file-saver --save

在Vue组件中引入FileSaver.js库：

import { saveAs } from 'file-saver';

接下来，我们创建一个函数来生成Excel文件：

exportExcel() {
  // 创建一个新的工作簿
  const workbook = XLSX.utils.book_new();
  // 创建一个新的工作表
  const worksheet = XLSX.utils.aoa_to_sheet([]);
  // 将工作表添加到工作簿中
  XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');
  // 将工作簿转换为二进制字符串
  const binaryData = XLSX.write(workbook, { bookType: 'xlsx', type: 'binary' });
  // 创建一个Blob对象，用于存储二进制数据和文件名信息
  const blob = new Blob([s2ab(binaryData)], { type: 'application/octet-stream' });
  saveAs(blob, 'export.xlsx');
}

在这个函数中，我们首先创建了一个新的工作簿和工作表，然后将工作表添加到工作簿中，接着，我们将工作簿转换为二进制字符串，并创建一个Blob对象来存储这些数据，我们使用saveAs函数将Blob对象保存为文件，注意，这里我们不需要手动创建一个隐藏的a标签来触发下载，因为saveAs函数会自动处理这个过程。