我们的存在下载

如何下载后台接⼝返回给我们的⼆进制数据⽂件

（vue+axios）

1.有时候,前端页⾯上需要展⽰后台接⼝返回给我们的⼀个⼆进制⽂件,⽐如图⽚,那么我们应该如何下载呢

js中有个Blob对象,⼀个Blob对象表⽰⼀个不可变的,原始数据的类似⽂件对象。Blob表⽰的数据不⼀定是⼀个JavaScript原⽣格式

blob对象本质上是js中的⼀个对象，⾥⾯可以储存⼤量的⼆进制编码格式的数据。

2.创建Blob对象

vardebug={hello:"world"};

varblob=newBlob(['后台返回的⼆进制⽂件'],{type:'该⽂件是什么类型的⽂件(MIME)'});

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

格式,下载就是什么格式,根据项⽬需求.

后缀名MIME名称

*.3gppaudio/3gpp,video/3gpp

*.ac3audio/ac3

*.asfallpication/-asf

*.auaudio/basic

*.csstext/css

*.csvtext/csv

*.docapplication/msword

*.dotapplication/msword

*.dtdapplication/xml-dtd

*.dwgimage/

*.dxfimage/

*.gifimage/gif

*.htmtext/html

*.htmltext/html

*.jp2image/jp2

*.jpeimage/jpeg

*.jpegimage/jpeg

*.jpgimage/jpeg

*.jstext/javascript,application/javascript

*.jsonapplication/json

*.mp2audio/mpeg,video/mpeg

*.mp3audio/mpeg

*.mp4audio/mp4,video/mp4

*.mpegvideo/mpeg

*.mpgvideo/mpeg

*.mppapplication/-project

*.oggapplication/ogg,audio/ogg

*.pdfapplication/pdf

*.pngimage/png

*.potapplication/-powerpoint

*.ppsapplication/-powerpoint

*.pptapplication/-powerpoint

*.rtfapplication/rtf,text/rtf

*.svfimage/

*.tifimage/tiff

*.tiffimage/tiff

*.txttext/plain

*.wdbapplication/-works

*.wpsapplication/-works

*.xhtmlapplication/xhtml+xml

*.xlcapplication/-excel

*.xlmapplication/-excel

*.xlsapplication/-excel

*.xltapplication/-excel

*.xlwapplication/-excel

*.xmltext/xml,application/xml

*.zipaplication/zip

*.xlsxapplication/

4.执⾏下载操作

这种写法,有个缺点,就是上⾯注释说的问题,当⽤户上传了⼀个⽂件到⽬标服务器上,你要下载这个⽂件,⽽这个时候管理员同时在后台把你这个

⽂件删了,结果就是点击下载链接没有反应,或者报错,望读者试情况⽽定,可以考虑让后台写个接⼝,在调⽤下载链接之前⾸先调⽤这个接⼝判断

⽂件是否存在,下⾯给⼤家看看,加了这个responType:"blob"后,后台返回的是个什么,如果不加,则下载的⽂件会出现乱码

加了后,你会发现,data中没有状态码返回了,也就是不能通过状态码来验证⽤户是否登录,接⼝是否请求成功等,所以在⽤该种⽅式下载后台返

回给我们的⼆进制⽂件的时候,需要考虑到这些问题,适当的应⽤,也希望所有各位⼤佬,能够提供给⼩弟⼀个⽐较完善的⽅法,谢谢