洞悉导出Excel奥秘：Vue Blob对象实现干货

前端

2023-02-14 19:38:16

Vue通过Blob对象实现Excel导出：两种方法，一网打尽！

在前端开发中，数据导出是不可或缺的需求，而Excel凭借其通用性，成为众多开发者导出数据的首选。今天，我们将深入探讨如何使用Vue通过Blob对象实现Excel导出，带你轻松掌握这一技能。

方法一：利用Blob URL

构建数据源

首先，创建一个包含导出数据的数组、对象或其他数据结构。

设置响应类型

发起数据请求时，将responseType属性设置为blob，以便服务器返回二进制数据流。

转换Blob对象

收到服务器响应后，使用Blob()或File()构造函数将二进制数据流转换为Blob对象。

创建Blob URL

使用URL.createObjectURL()方法，将Blob对象转换为指向它的临时URL。

创建下载链接

创建一个<a>标签，设置href属性为Blob URL。

点击下载

点击下载链接，浏览器将自动下载Blob对象为Excel文件。

方法二：使用ExcelJS库

安装ExcelJS库

使用npm安装ExcelJS库：

npm install exceljs

初始化工作簿

创建一个ExcelJS工作簿对象，并添加工作表。

填充数据

使用setCellValue()或addRow()方法将数据填充到工作表中。

设置单元格样式

根据需要设置单元格样式，如字体、颜色和边框。

保存工作簿

调用工作簿对象的saveAs()方法，将工作簿保存为Excel文件。

后端配置

后端需要正确配置Content-Type头部，以确保浏览器能正确解析二进制数据流。常见的Content-Type值包括：

application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
application/vnd.ms-excel
application/octet-stream

示例代码

方法一：

const blob = new Blob([data], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'});
const blobUrl = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = blobUrl;
a.download = 'data.xlsx';
a.click();

方法二：

import ExcelJS from 'exceljs';
const workbook = new ExcelJS.Workbook();
const worksheet = workbook.addWorksheet('Sheet1');
worksheet.addRow(['Header1', 'Header2', 'Header3']);
worksheet.addRow(['Data1', 'Data2', 'Data3']);
workbook.xlsx.writeBuffer().then((buffer) => {
  const blob = new Blob([buffer], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'});
  saveAs(blob, 'data.xlsx');
});