点击已上传的文件进行下载后,调用后台接口,后台返回的是流数据,前端将流数据解析,下载
用到了blob方法
1、用文件流下载文件( Blob)时各种类型文件的 type 整理
参考文档:https://blog.csdn.net/weixin_43299180/article/details/119818982
[{type:'.aac',value:'audio/aac'},{type:'.abw',value:'application/x-abiword'},{type:'.arc',value:'application/x-freearc'},{type:'.avi',value:'video/x-msvideo'}, {type:'.azw',value:'application/vnd.amazon.ebook'}, {type:'.bin',value:'application/octet-stream'},{type:'.bmp',value:'image/bmp'},{type:'.bz',value:'application/x-bzip'},{type:'.bz2',value:'application/x-bzip2'},{type:'.csh',value:'application/x-csh'}, {type:'.css',value:'text/css'},{type:'.csv',value:'text/csv'},{type:'.doc',value:'application/msword'},{type:'.docx',value:'application/vnd.openxmlformats-officedocument.wordprocessingml.document'}, {type:'.eot',value:'application/vnd.ms-fontobject'}, {type:'.epub',value:'application/epub+zip'},{type:'.gif',value:'image/gif'},{type:'.htm',value:'text/html'},{type:'.html',value:'text/html'},{type:'.ico',value:'image/vnd.microsoft.icon'}, {type:'.ics',value:'text/calendar'},{type:'.jar',value:'application/java-archive'},{type:'.jpeg',value:'image/jpeg'},{type:'.jpg',value:'image/jpeg'},{type:'.js',value:'text/javascript'}, {type:'.json',value:'application/json'},{type:'.jsonld',value:'application/ld+json'},{type:'.mid',value:'audio/midi audio/x-midi'},{type:'.midi',value:'audio/midi audio/x-midi'},{type:'.mjs',value:'text/javascript'}, {type:'.mp3',value:'audio/mpeg'},{type:'.mp4',value:'video/mp4'},{type:'.mpeg',value:'video/mpeg'},{type:'.mpkg',value:'application/vnd.apple.installer+xml'},{type:'.odp',value:'application/vnd.oasis.opendocument.presentation'}, {type:'.ods',value:'application/vnd.oasis.opendocument.spreadsheet'}, {type:'.odt',value:'application/vnd.oasis.opendocument.text'},{type:'.oga',value:'audio/ogg'},{type:'.ogg',value:'video/ogg'},{type:'.ogv',value:'video/ogg'},{type:'.ogx',value:'application/ogg'},{type:'.otf',value:'font/otf'}, {type:'.png',value:'image/png'},{type:'.pdf',value:'application/pdf'},{type:'.ppt',value:'application/vnd.ms-powerpoint'}, {type:'.pptx',value:'application/vnd.openxmlformats-officedocument.presentationml.presentation'},{type:'.rar',value:'application/x-rar-compressed'}, {type:'.rtf',value:'application/rtf'},{type:'.sh',value:'application/x-sh'},{type:'.svg',value:'image/svg+xml'},{type:'.swf',value:'application/x-shockwave-flash'},{type:'.tar',value:'application/x-tar'}, {type:'.tif',value:'image/tiff'},{type:'.tiff',value:'image/tiff'},{type:'.ttf',value:'font/ttf'},{type:'.txt',value:'text/plain'},{type:'.vsd',value:'application/vnd.visio'}, {type:'.wav',value:'audio/wav'},{type:'.weba',value:'audio/webm'},{type:'.webm',value:'video/webm'},{type:'.webp',value:'image/webp'},{type:'.woff',value:'font/woff'}, {type:'.woff2',value:'font/woff2'},{type:'.xhtml',value:'application/xhtml+xml'},{type:'.xls',value:'application/vnd.ms-excel'},{type:'.xlsx',value:'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'}, {type:'.xml',value:'text/xml'}, {type:'.xul',value:'application/vnd.mozilla.xul+xml'},{type:'.zip',value:'application/zip'},{type:'.3gp',value:'video/3gpp'}, {type:'.3g2',value:'video/3gpp2'},{type:'.7z',value:'application/x-7z-compressed'},{type:'.dwg',value:'application/x-autocad'}]
2、下载
downList:兼容的同时勾选多个文件进行的下载
```
function downloadFile(downList,res){ //点击下载后的数据处理(对后台给到的文件流进行操作)
// 创建一个隐藏的a链接
const link =document.createElement("a");
let type = res.type;
if( type =='content/unknown' ||"multipart/form-data" ){ //后台有的文件类型会返回这种
var suffix = downList.length==1?downList[0].fileName.substr(downList[0].fileName.lastIndexOf(".")+1):"zip"; //文件后缀
var filterobj =blobType.filter((item)=>{
return item.type =="."+suffix;
})
if(filterobj){
type = filterobj[0].value;
}
}
let blob =new Blob([res],{type:type}); //文件流处理
link.style.display ="none"; //去除a标签的样式
// 设置连接
link.href =URL.createObjectURL(blob);
link.download = downList.length==1?downList[0].fileName.substr(0,downList[0].fileName.lastIndexOf(".")):"多个文件压缩包";
document.body.appendChild(link);
// 模拟点击事件
link.click();
link.remove();
}
```