（转）如何下载后台接口返回给我们的二进制数据文件(vue +axios)

1.有时候,前端页面上需要展示后台接口返回给我们的一个二进制文件,比如图片,那么我们应该如何下载呢

 

js中有个Blob对象,一个 Blob对象表示一个不可变的, 原始数据的类似文件对象。Blob表示的数据不一定是一个JavaScript原生格式 blob对象本质上是js中的一个对象，里面可以储存大量的二进制编码格式的数据。

 

2.创建Blob 对象

 

var debug = {hello: "world"};

 

var blob = new Blob(['后台返回的二进制文件'],{type : '该文件是什么类型的文件(MIME)'});

 

3.常用的文件类型有(MIME),根据需要返回怎样的文件,就填写怎样的MIME类型,也可以不写,写的话指定了下载的文件格式,不写,文件是什么格式,下载就是什么格式,根据项目需求.

 

后缀名       MIME名称
*.3gpp    audio/3gpp, video/3gpp
*.ac3    audio/ac3
*.asf       allpication/vnd.ms-asf
*.au           audio/basic
*.css           text/css
*.csv           text/csv
*.doc    application/msword    
*.dot    application/msword    
*.dtd    application/xml-dtd    
*.dwg    image/vnd.dwg    
*.dxf      image/vnd.dxf
*.gif            image/gif    
*.htm    text/html    
*.html    text/html    
*.jp2            image/jp2    
*.jpe       image/jpeg
*.jpeg    image/jpeg
*.jpg          image/jpeg    
*.js       text/javascript, application/javascript    
*.json    application/json    
*.mp2    audio/mpeg, video/mpeg    
*.mp3    audio/mpeg    
*.mp4    audio/mp4, video/mp4    
*.mpeg    video/mpeg    
*.mpg    video/mpeg    
*.mpp    application/vnd.ms-project    
*.ogg    application/ogg, audio/ogg    
*.pdf    application/pdf    
*.png    image/png    
*.pot    application/vnd.ms-powerpoint    
*.pps    application/vnd.ms-powerpoint    
*.ppt    application/vnd.ms-powerpoint    
*.rtf            application/rtf, text/rtf    
*.svf           image/vnd.svf    
*.tif         image/tiff    
*.tiff       image/tiff    
*.txt           text/plain    
*.wdb    application/vnd.ms-works    
*.wps    application/vnd.ms-works    
*.xhtml    application/xhtml+xml    
*.xlc      application/vnd.ms-excel    
*.xlm    application/vnd.ms-excel    
*.xls           application/vnd.ms-excel    
*.xlt      application/vnd.ms-excel    
*.xlw      application/vnd.ms-excel    
*.xml    text/xml, application/xml    
*.zip            aplication/zip    

*.xlsx     application/vnd.openxmlformats-officedocument.spreadsheetml.sheet

4.执行下载操作

 

这种写法,有个缺点,就是上面注释说的问题,当用户上传了一个文件到目标服务器上,你要下载这个文件,而这个时候管理员同时在后台把你这个文件删了,结果就是点击下载链接没有反应,或者报错,望读者试情况而定,可以考虑让后台写个接口,在调用下载链接之前首先调用这个接口判断文件是否存在,下面给大家看看,加了这个   responseType:"blob" 后,后台返回的是个什么,如果不加,则下载的文件会出现乱码

加了后,你会发现,data中没有状态码返回了,也就是不能通过状态码来验证用户是否登录,接口是否请求成功等,所以在用该种方式下载后台返回给我们的二进制文件的时候,需要考虑到这些问题,适当的应用,也希望所有各位大佬,能够提供给一个比较完善的方法,谢谢

此文为转载