Vue导出Excel的实现方法与原理

摘要：本文将详细介绍前端Vue中导出Excel的方法，包括使用第三方库和纯前端实现两种方式。同时解释其原理，帮助读者了解如何在Vue项目中高效地导出Excel文件。

---

• 第三方库：exceljs

exceljs是一款功能强大的JavaScript库，它能够在前端中创建、编辑和导出Excel文件。它的原理是使用纯JavaScript实现了Excel的文件格式，通过生成Excel文件的数据结构，并转换为二进制格式进行下载。

导出Excel的方法：

第一步：安装exceljs库

在Vue项目中使用npm或yarn安装exceljs库：

npm install exceljs
或
yarn add exceljs

第二步：导入exceljs

在需要导出Excel的组件中导入exceljs库：

import ExcelJS from 'exceljs';

第三步：创建Excel工作簿、工作表和添加数据 在需要导出的地方，创建一个新的Excel工作簿，添加工作表，并将数据添加到工作表中：

const workbook = new ExcelJS.Workbook();
const worksheet = workbook.addWorksheet('Sheet1');

// 假设data为要导出的数据数组
data.forEach((item, index) => {
  worksheet.addRow([item.name, item.age, item.email]);
});

第四步：导出Excel文件 将生成的Excel文件进行二进制编码，并创建一个下载链接供用户下载：

workbook.xlsx.writeBuffer().then((buffer) => {
  const blob = new Blob([buffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
  const url = URL.createObjectURL(blob);
  const link = document.createElement('a');
  link.href = url;
  link.download = 'data.xlsx'; // 下载文件名
  link.click();
});

---

• 纯前端实现

有时候我们不想引入额外的库，也可以在Vue中纯前端实现导出Excel。这种方法的原理是利用浏览器支持的Blob和URL.createObjectURL功能，将数据转换为CSV格式，并以文件形式下载。

导出Excel的方法：

第一步：编写导出函数 在Vue组件中编写一个导出函数，将数据转换为CSV格式，并创建一个下载链接供用户下载：

exportExcel(data) {
  const csv = data.map(item => `${item.name},${item.age},${item.email}`).join('\n');
  const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
  const url = URL.createObjectURL(blob);
  const link = document.createElement('a');
  link.href = url;
  link.download = 'data.csv'; // 下载文件名
  link.click();
}

第二步：调用导出函数 在需要导出的地方，调用导出函数，并将数据传入：

// 假设data为要导出的数据数组
this.exportExcel(data);

---

• 引入方法

一、安装vue-json-excel

npm install vue-json-excel -S

二、main.js中引入

import JsonExcel from 'vue-json-excel'
Vue.component('downloadExcel', JsonExcel)

三、在代码中使用

四、数据

• DetailsForm：需要导出的数据

• title：表格标题

• json_fields：里面的属性是excel表每一列的title,用多个词组组成的属性名(中间有空格的)要加双引号; 指定接口的json内某些数据下载,若不指定，默认导出全部数据中心全部字段

五、效果

 六、一些常用参数

---

如果有疑问欢迎留言，为您解答！！！