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

相关推荐
烛阴1 小时前
void 0 的奥秘:解锁 JavaScript 中 undefined 的正确打开方式
前端·javascript
Hexene...1 小时前
【前端Vue】如何实现echarts图表根据父元素宽度自适应大小
前端·vue.js·echarts
初遇你时动了情1 小时前
腾讯地图 vue3 使用 封装 地图组件
javascript·vue.js·腾讯地图
dssxyz2 小时前
uniapp打包微信小程序主包过大问题_uniapp 微信小程序时主包太大和vendor.js过大
javascript·微信小程序·uni-app
华子w9089258592 小时前
基于 SpringBoot+VueJS 的农产品研究报告管理系统设计与实现
vue.js·spring boot·后端
ohMyGod_1234 小时前
React16,17,18,19新特性更新对比
前端·javascript·react.js
前端小趴菜054 小时前
React-forwardRef-useImperativeHandle
前端·vue.js·react.js
@大迁世界4 小时前
第1章 React组件开发基础
前端·javascript·react.js·前端框架·ecmascript
一瓣橙子4 小时前
7.7日 实验03-Spark批处理开发(2)
开发语言·javascript·ajax
Hilaku4 小时前
从一个实战项目,看懂 `new DataTransfer()` 的三大妙用
前端·javascript·jquery