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):按字符读取文件内容,结果用字符串形式表示

相关推荐
工业甲酰苯胺4 小时前
TypeScript枚举类型应用:前后端状态码映射的最简方案
javascript·typescript·状态模式
谢尔登8 小时前
【React Native】ScrollView 和 FlatList 组件
javascript·react native·react.js
然我8 小时前
面试官:如何判断元素是否出现过?我:三种哈希方法任你选
前端·javascript·算法
kk_stoper9 小时前
如何通过API查询实时能源期货价格
java·开发语言·javascript·数据结构·python·能源
晨枫阳9 小时前
前端VUE项目-day1
前端·javascript·vue.js
颜酱9 小时前
抽离ant-design后台的公共查询设置
前端·javascript·ant design
绅士玖9 小时前
JavaScript 设计模式之单例模式🚀
前端·javascript·设计模式
Dream耀9 小时前
useReducer:React界的"灭霸手套",一个dispatch搞定所有状态乱局
前端·javascript·react.js
余大侠在劈柴9 小时前
pdf.js 开发指南:在 Web 项目中集成 PDF 预览功能
前端·javascript·学习·pdf
拾光拾趣录10 小时前
JavaScript屏幕切换检测方案
前端·javascript