如何下载后台接⼝返回给我们的⼆进制数据⽂件
(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
如何下载javascript*.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中没有状态码返回了,也就是不能通过状态码来验证⽤户是否登录,接⼝是否请求成功等,所以在⽤该种⽅式下载后台返回给我们的⼆进制⽂件的时候,需要考虑到这些问题,适当的应⽤,也希望所有各位⼤佬,能够提供给⼩弟⼀个⽐较完善的⽅法,谢谢
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论