vue代码如下,发送请求配置responseType为blob
拿到返回的结果后装成需要的blob格式
axios({
url: '请求接口url',
method: 'post',
params: '请求参数',
responseType:'blob' // 重点在于配置responseType: 'blob'
}).then(res => {
let fileName = row.fileName+'.'+row.extendName;
let blob = new Blob([res.data],{type: this.blobJson[row.extendName]});
if ('download' in document.createElement("a")) {
const link = document.createElement("a");
link.download = fileName;
link.style.display = 'none';
const url = window.URL || window.webkitURL || window.moxURL;
link.href = url.createObjectURL(blob);
document.body.appendChild(link);
link.click();
document.body.removeChild(link); // 下载完成移除元素
url.revokeObjectURL(link.href); // 释放掉blob对象
} else {
navigator.msSaveBlob(blob, fileName);
}
})
不同的文件对应的blob的type不一样,将后缀与对应的类型整理为bolbJson如下
blobJson:{
aac:"audio/aac",
abw:"application/x-abiword",
arc:"application/x-freearc",
avi:"video/x-msvideo",
azw:"application/vnd.amazon.ebook",
bin:"application/octet-stream",
bmp:"image/bmp",
bz:"application/x-bzip",
bz2:"application/x-bzip2",
csh:"application/x-csh",
css:"text/css",
csv:"text/csv",
doc:"application/msword",
docx:"application/vnd.openxmlformats-officedocument.wordprocessingml.document",
eot:"application/vnd.ms-fontobject",
epub:"application/epub+zip",
gif:"image/gif",
htm:"text/html",
html:"text/html",
ico:"image/vnd.microsoft.icon",
ics:"text/calendar",
jar:"application/java-archive",
jpeg:"image/jpeg",
jpg:"image/jpeg",
js:"text/javascript",
json:"application/json",
jsonld:"application/ld+json",
mid:"audio/midi audio/x-midi",
midi:"audio/midi audio/x-midi",
mjs:"text/javascript",
mp3:"audio/mpeg",
mpeg:"video/mpeg",
mpkg:"application/vnd.apple.installer+xml",
odp:"application/vnd.oasis.opendocument.presentation",
ods:"application/vnd.oasis.opendocument.spreadsheet",
odt:"application/vnd.oasis.opendocument.text",
oga:"audio/ogg",
ogv:"video/ogg",
ogx:"application/ogg",
otf:"font/otf",
png:"image/png",
pdf:"application/pdf",
ppt:"application/vnd.ms-powerpoint",
pptx:"application/vnd.openxmlformats-officedocument.presentationml.presentation",
rar:"application/x-rar-compressed",
rtf:"application/rtf",
sh:"application/x-sh",
svg:"image/svg+xml",
swf:"application/x-shockwave-flash",
tar:"application/x-tar",
tif:"image/tiff",
tiff:"image/tiff",
ttf:"font/ttf",
txt:"text/plain",
vsd:"application/vnd.visio",
wav:"audio/wav",
weba:"audio/webm",
webm:"video/webm",
woff:"font/woff",
woff2:"font/woff2",
xhtml:"application/xhtml+xml",
xls:"application/vnd.ms-excel",
xlsx:"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
xml:"text/xml",
xul:"application/vnd.mozilla.xul+xml",
zip:"application/zip",
"3gp":"video/3gpp、audio/3gpp",
"3g2":"video/3gpp2、audio/3gpp2",
"7z":"application/x-7z-compressed",
}
如果要求文件流存储在json的格式中返回,我采用将文件流转化成为base64的格式,前端接收json后再转化为blob下载文件,代码如下:
axios({
url: '请求接口url',
method: 'post',
params: '请求参数',
responseType:'blob' // 重点在于配置responseType: 'blob'
}).then(res => {
var bstr = atob(resp.data), n = bstr.length, u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
let blob = new Blob([u8arr],{type: this.blobJson[row.extendName]});
let fileName = row.fileName+'.'+row.extendName;
if ('download' in document.createElement("a")) {
const link = document.createElement("a");
link.download = fileName;
link.style.display = 'none';
const url = window.URL || window.webkitURL || window.moxURL;
link.href = url.createObjectURL(blob);
document.body.appendChild(link);
link.click();
document.body.removeChild(link); // 下载完成移除元素
url.revokeObjectURL(link.href); // 释放掉blob对象
} else {
navigator.msSaveBlob(blob, fileName);
}
})
后端的文件下载方法参考https://blog.csdn.net/weixin_44812604/article/details/128252709?spm=1001.2014.3001.5501