Vue项目导出Excel（Blob篇）

最新推荐文章于 2025-06-19 19:01:47 发布

原创最新推荐文章于 2025-06-19 19:01:47 发布 · 置顶 · 4.5k 阅读

24 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js

Vue 同时被 2 个专栏收录

6 篇文章

订阅专栏

工具类

5 篇文章

订阅专栏

本文详细介绍了如何在前端使用axios获取后台返回的二进制文档流，并利用Blob对象配合file-saver库实现文件下载，重点讲解了Blob对象的使用和不同MIME类型的对应。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

日常工作中，你常用到的下载方式有哪些？

①. 后台返回生成好的文档地址，前端通过 a 链接即可下载；
②. 后台返回二进制文档流，前端解析下载。

接下来，我们就聊聊第二种方式

开始之前，我们先看一下二进制流长什么样子⬇️

你没看错，你不认识，我也不认识，但这完全不影响我们接下来的操作。

我们这里会用到Blob对象，先来简单了解一下Ta

Blob 对象表示一个不可变、原始数据的类文件对象。它的数据可以按文本或二进制的格式进行读取，也可以转换成 ReadableStream 来用于数据操作。

在发起请求时，需指定 responseType

// 以get请求为例
axios.get(url, {  
	params, 
	responseType: "blob" 
})

保存文件的方法

// download.js文件
// 事先安装 file-saver 依赖
let FileSaver = require("file-saver");

export default {
  download: (dataBlob, fileName) => {
    FileSaver.saveAs(dataBlob, fileName);
  }
};

关键的一步来了

import Download from "../assets/javascript/download";
...
let blob = new Blob([res], { // res 即图1后台返回的内容
  type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" // 这里很关键
});
Download.download(
  blob,
  `${this.datasetObj.Title}.${this.downloadType}`
);

大功告成！来预览一下导出的Excel

在这里插入图片描述

这个结果，你总认识了吧！

附：

Blob.type 表明该 Blob 对象所包含数据的 MIME 类型。如果类型未知，则该值为空字符串。

常见MIME类型：

扩展名	文档类型	MIME 类型
.aac	AAC audio	audio/aac
.csv	Comma-separated values (CSV)	text/csv
.doc	Microsoft Word	application/msword
.docx	Microsoft Word (OpenXML)	application/vnd.openxmlformats-officedocument.wordprocessingml.document
.gif	Graphics Interchange Format (GIF)	image/gif
.jpeg / .jpg	JPEG images	image/jpeg
.json	JSON format	application/json
.png	Portable Network Graphics	image/png
.pdf	Adobe Portable Document Format (PDF)	application/pdf
.xls	Microsoft Excel	application/vnd.ms-excel
.xlsx	Microsoft Excel (OpenXML)	application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
.zip	ZIP archive	application/application/zip