2022-06-12 文件流下载

点击已上传的文件进行下载后,调用后台接口,后台返回的是流数据,前端将流数据解析,下载

用到了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();

}

```

你可能感兴趣的:(2022-06-12 文件流下载)