Vue 纯前端使用 ExcelJS 导出 Excel 文件手把手教程

在现代 Web 开发中，Excel 文件的导入导出功能常常被用于报表生成、数据分析等场景。

ExcelJS

是一个非常流行的 JavaScript 库，可以帮助我们在前端实现 Excel 文件的导入、导出等功能。本文将详细介绍如何在 Vue 项目中使用

ExcelJS

进行 Excel 文件的导出。

一、项目准备

首先，确保你已经有一个 Vue 项目。如果你还没有创建 Vue 项目，可以通过以下命令使用 Vue CLI 创建一个新的 Vue 项目：

vue create exceljs-demo
cd exceljs-demo

然后，在项目中安装

ExcelJS

库：

npminstall exceljs

二、导入 ExcelJS

在 Vue 组件中使用 ExcelJS，我们需要先导入该库：

import ExcelJS from'exceljs';

三、创建 Excel 文件

接下来，我们将通过

ExcelJS

创建一个新的 Excel 文件，并使用 Vue 来触发文件的生成与下载。

1. 准备数据

首先，我们需要准备一些数据，这些数据将填充到 Excel 文件中。例如，我们可以使用以下数据：

const data =[{ name:'Alice', age:25, email:'[email protected]'},{ name:'Bob', age:30, email:'[email protected]'},{ name:'Charlie', age:35, email:'[email protected]'}];

2. 创建 Excel 文件

在 Vue 组件中，我们可以通过

ExcelJS

来创建一个新的工作簿，并将数据填充到其中。以下是一个简单的实现：

<template><div><button @click="exportExcel">导出 Excel</button></div></template><script>import ExcelJS from'exceljs';exportdefault{
  methods:{exportExcel(){// 创建一个新的工作簿const workbook =newExcelJS.Workbook();const worksheet = workbook.addWorksheet('Sheet 1');// 创建一个工作表// 设置列标题
      worksheet.columns =[{ header:'姓名', key:'name', width:20},{ header:'年龄', key:'age', width:10},{ header:'邮箱', key:'email', width:30}];// 准备数据并添加到工作表中const data =[{ name:'Alice', age:25, email:'[email protected]'},{ name:'Bob', age:30, email:'[email protected]'},{ name:'Charlie', age:35, email:'[email protected]'}];

      worksheet.addRows(data);// 添加数据行// 创建一个 Blob 并下载文件
      workbook.xlsx.writeBuffer().then((buffer)=>{const blob =newBlob([buffer],{ type:'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'});const link = document.createElement('a');
        link.href =URL.createObjectURL(blob);
        link.download ='example.xlsx';
        link.click();// 模拟点击下载文件});}}}</script>

解释

• ExcelJS.Workbook()：创建一个新的工作簿。
• workbook.addWorksheet('Sheet 1')：添加一个工作表。
• worksheet.columns：设置工作表的列头信息，包括每列的名称、键（对应数据中的键）以及列的宽度。
• worksheet.addRows(data)：将数据添加到工作表中。
• workbook.xlsx.writeBuffer()：将工作簿转换为一个 Buffer，可以在浏览器中直接下载。

3. 创建 Blob 并触发下载

在

ExcelJS

创建好 Excel 文件后，我们通过

Blob

对象将其转换为二进制流，然后使用

URL.createObjectURL()

创建一个 URL，该 URL 可以被用来下载 Excel 文件。

我们创建了一个

a

标签，并通过 JavaScript 触发它的

click

事件，从而模拟文件的下载。

四、样式和 UI 改进

你可以根据需求，进一步美化 UI 组件，例如添加加载动画、按钮样式等。这些都可以通过 CSS 和 Vue 的动态绑定来实现。

<template><div><button@click="exportExcel"class="export-button">导出 Excel</button></div></template><stylescoped>.export-button{padding: 10px 20px;background-color: #4CAF50;color: white;border: none;border-radius: 5px;cursor: pointer;}.export-button:hover{background-color: #45a049;}</style>

五、总结

在这篇教程中，我们使用

ExcelJS

库实现了在 Vue 项目中导出 Excel 文件的功能。通过创建工作簿、设置列、添加数据、生成 Blob 等步骤，我们能够轻松实现 Excel 文件的导出。

如果你需要对导出的 Excel 文件进行更复杂的操作，例如格式化单元格、合并单元格、添加图表等，

ExcelJS

提供了丰富的 API，可以帮助你进一步扩展功能。