vue axios实现下载文件及responseType:blob注意事项

需要使用axios和js-file-download组件

bash 复制代码
npm install js-file-download --save
npm install axios --save
javascript 复制代码
import fileDownload from 'fileDownload'; // 引入fileDownload
import axios from 'axios'; // 引入axios 

axios({
	method: 'get',
    url: 'xxxxxxx',
    responseType: 'blob'
}).then(res => {
    if(res.status == 200){
      // res.headers['content-disposition'].substring(20)表示从响应头中获取文件名
      fileDownload(res.data,res.headers['content-disposition'].substring(20));
    }else { // 下载文件失败,解析json格式信息
      let that = this;
      var fileReader = new FileReader();
      fileReader.readAsText(res.data); // 按字节读取文件内容,结果为文件的二进制串
      fileReader.onload = ()=>{
          that.$notify.error(fileReader.result);
      }
    } 
})

注意事项:responseType:blob表示服务器返回的响应类型是二进制流,一般用于文件、视频下载等场景。正常情况下后端返回二进制数据,当后端服务器出错时,往往会以json形式返回错误信息,例如{"code":500,"msg":"未知异常"}。因为设置了blob类型,axios会强制把数据转为blob,导致json格式的响应没办法正常解析,需要使用FileReader对象来处理,FileReader是一种异步读取文件机制。FileReader提供了如下方法,大家根据需要自行选择。

  • readAsArrayBuffer(file):按字节读取文件内容,结果用ArrayBuffer对象表示

  • readAsBinaryString(file):按字节读取文件内容,结果为文件的二进制串

  • readAsDataURL(file):读取文件内容,结果用data:url的字符串形式表示

  • readAsText(file,encoding):按字符读取文件内容,结果用字符串形式表示

相关推荐
编程贝多芬5 分钟前
Promise 的场景和最佳实践
前端·javascript
Asort6 分钟前
JavaScript 从零开始(四):基础语法详解——从变量声明到数据类型的完全指南
前端·javascript
木木jio8 分钟前
前端大文件分片上传 —— 基于 React 的工程化实现
前端·javascript
Lotzinfly12 分钟前
12个TypeScript奇淫技巧你需要掌握😏😏😏
前端·javascript·面试
一个大苹果13 分钟前
setTimeout延迟超过2^31立即执行?揭秘JavaScript定时器的隐藏边界
javascript
普郎特28 分钟前
"不再迷惑!用'血缘关系'彻底搞懂JavaScript原型链机制"
前端·javascript
一枚前端小能手1 小时前
「周更第3期」实用JS库推荐:Lodash
前端·javascript
艾小码1 小时前
Vue组件到底怎么定义?全局注册和局部注册,我踩过的坑你别再踩了!
前端·javascript·vue.js
鹏多多1 小时前
前端复制功能的高效解决方案:copy-to-clipboard详解
前端·javascript
uhakadotcom1 小时前
Rollup 从0到1:TypeScript打包完全指南
前端·javascript·面试