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();

}

```

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 217,185评论 6 503
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,652评论 3 393
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 163,524评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,339评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,387评论 6 391
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,287评论 1 301
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,130评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,985评论 0 275
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,420评论 1 313
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,617评论 3 334
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,779评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,477评论 5 345
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,088评论 3 328
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,716评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,857评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,876评论 2 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,700评论 2 354

推荐阅读更多精彩内容