Vue 之 利用new Blob() 对后端返回文件流 或 base64字符串下载导出文件时不同文件类型的 type 值整理及函数封装调用示例

在 Vue 项目中，经常用 Blob 二进制进行文件下载功能（vue后台返回文件流下载导出函数封装、后台返回base64字符串下载导出函数封装、调用示例），涉及不同后缀名的文件，这里整理一份 Blob 的配置关系对应表，在我们使用Blob做下载功能时 ，根据需要下载的文件类型修改 type 值进行下载即可。

 

文件后缀名、文件类型、mimeType值对应关系表

 

后缀名	文件类型	类型（type）
.xls	Microsoft Excel	application/vnd.ms-excel
.xlsx	Microsoft Excel (OpenXML)	application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
.csv	CSV	text/csv
.doc	Microsoft Word	application/msword
.docx	Microsoft Word (OpenXML)	application/vnd.openxmlformats-officedocument.wordprocessingml.document
.pdf	PDF	application/pdf
.ppt	Microsoft PowerPoint	application/vnd.ms-powerpoint
.pptx	Microsoft PowerPoint (OpenXML)	application/vnd.openxmlformats-officedocument.presentationml.presentation
.png	便携式网络图形（PNG）	image/png
.gif	GIF	image/gif
.jpeg	JPEG 图片	image/jpeg
.jpg	JPEG 图片	image/jpeg
.mp3	MP3 音频	audio/mpeg
.aac	AAC 音频	audio/aac
.html	超文本标记语言 (HTML)	text/html
.css	CSS	text/css
.js	JavaScript	text/javascript
.json	JSON 格式	application/json
.abw	AbiWord 文档	application/x-abiword
.arc	存档文档(多个文件嵌入)	application/x-freearc
.avi	AVI: 音频视频交错	video/x-msvideo
.azw	亚马逊Kindle电子书格式	application/vnd.amazon.ebook
.bin	任何类型的二进制数据	application/octet-stream
.bmp	Windows OS/2位图图形	image/bmp
.bz	BZip 存档	application/x-bzip
.bz2	BZip2 存档	application/x-bzip2
.csh	C-Shell 脚本	application/x-csh
.eot	MS嵌入式OpenType字体	application/vnd.ms-fontobject
.epub	电子出版物(EPUB)	application/epub+zip
.htm	超文本标记语言 (HTML)	text/html
.ico	Icon 格式	image/vnd.microsoft.icon
.ics	iCalendar 格式	text/calendar
.jar	Java Archive (JAR)	application/java-archive
.jsonld	JSON-LD 格式	application/ld+json
.mid	乐器数字接口(MIDI)	audio/midi audio/x-midi
.midi	乐器数字接口(MIDI)	audio/midi audio/x-midi
.mjs	JavaScript 模块	text/javascript
.mpeg	MPEG 视频	video/mpeg
.mpkg	苹果安装程序包	application/vnd.apple.installer+xml
.odp	OpenDocument演示文档	application/vnd.oasis.opendocument.presentation
.ods	OpenDocument 电子表格文件	application/vnd.oasis.opendocument.spreadsheet
.odt	OpenDocument 文本文档	application/vnd.oasis.opendocument.text
.oga	OGG 音频	audio/ogg
.ogv	OGG 视频	video/ogg
.ogx	OGG	application/ogg
.otf	OpenType 字体	font/otf
.rar	RAR 存档	application/x-rar-compressed
.rtf	富文本格式 (RTF)	application/rtf
.sh	Bourne shell 脚本	application/x-sh
.svg	可缩放矢量图形 (SVG)	image/svg+xml
.swf	小型web格式 (SWF) or Adobe Flash document	application/x-shockwave-flash
.tar	Tape 归档(TAR)	application/x-tar
.tif	标记图像文件格式 (TIFF)	image/tiff
.tiff	Tagged Image File Format (TIFF)	image/tiff
.ttf	TrueType 字体	font/ttf
.txt	Text	text/plain
.vsd	Microsoft Visio	application/vnd.visio
.wav	波形音频格式	audio/wav
.weba	WEBM 音频	audio/webm
.webm	WEBM 视频	video/webm
.webp	WEBP 图片	image/webp
.woff	网页开放字体格式 (WOFF)	font/woff
.woff2	网页开放字体格式 (WOFF)	font/woff2
.xhtml	XHTML	application/xhtml+xml
.xml	XML	application/xml（普通用户不可读）、text/xml（普通用户可读）
.xul	XUL	application/vnd.mozilla.xul+xml
.zip	ZIP	application/zip
.3gp	3GPP audio/video 容器	video/3gpp、audio/3gpp（不含视频）
.3g2	3GPP2 audio/video 容器	video/3gpp2、audio/3gpp2（不含视频）
.7z	7-zip	application/x-7z-compressed

 
 
 

函数封装

 

为 此，将 工 作 中 常 用 的 公 共 方 法 封 装 整 理 了 一 份（不定时更新）点击此处查看

  这里可以将这些公共方法全部写在一个 publicMethods.js 文件中，然后在 main.js 文件中引入，并抛给 vue 原型，然后这样的好处就是，不管在哪个 vue 文件中，都能通过 this.xxx.xxx 的方式调用封装的公共方法；

• publicMethods.js

// 创建一个a标签，并做点击下载事件
function downloadFile(hrefUrl, fileName){
    let a = document.createElement('a')
    a.href = hrefUrl
    a.download = fileName // 下载后文件名
    document.body.appendChild(a)
    a.click() // 点击下载
    document.body.removeChild(a) // 下载完成移除元素
}
// 封装blob对象
function dataURLToBlob(base64Str, mimeTypeStr) {
    let bstr = window.atob(base64Str); // 解码 base-64 编码的字符串，base-64 编码使用方法是 btoa()
    let length = bstr.length;
    let u8arr = new Uint8Array(length); // 创建初始化为0的，包含length个元素的无符号整型数组
    while (length--) {
        u8arr[length] = bstr.charCodeAt(length); // 返回在指定的位置的字符的 Unicode 编码
    }
    return new Blob([u8arr], { type: mimeTypeStr }); // 返回一个blob对象
}

// 后端返回base64公共导出
function downloadFileByBase64(base64Str, mimeTypeStr, fileName){
    let myBlob = dataURLToBlob(base64Str, mimeTypeStr)
    let myUrl = window.URL.createObjectURL(myBlob)
    downloadFile(myUrl, fileName)
}
// 后端返回文件流公共导出
function downloadFileByFileFlow(blobData, mimeTypeStr, fileName) {
    let blob = new Blob([blobData], { type: mimeTypeStr })
    let hrefUrl = window.URL.createObjectURL(blob) // 创建下载的链接
    downloadFile(hrefUrl, fileName);
}

• main.js

import publicMethod from './utils/publicMethods.js';
Vue.prototype.$public = publicMethod;

• 相应的vue文件中

// res为后端返回的base64字符串
this.$public.downloadFileByBase64(res, 'application/vnd.ms-excel', '订单明细');

// res为后端返回的文件流
this.$public.downloadFileByFileFlow(res, 'application/vnd.ms-excel', '订单明细');

  
  

  如有不足，望大家多多指点！ 谢谢！