Vue项目导出Excel(Blob篇)
日常工作中,你常用到的下载方式有哪些?1、后台返回生成好的文档地址,前端通过 a 链接即可下载;2、后台返回二进制文档流,前端解析下载。接下来,我们就聊聊第二种方式开始之前,我们先看一下二进制流长什么样子⬇️你没看错,你不认识,我也不认识,但这完全不影响我们接下来的操作。我们这里会用到Blob对象,先来简单了解一下Ta:Blob 对象表示一个不可变、原始数据的类文件对象。它的数据可以按文本或二进制
·
日常工作中,你常用到的下载方式有哪些?
①. 后台返回生成好的文档地址,前端通过 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 |
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 |
更多推荐
已为社区贡献3条内容
所有评论(0)