vue axios实现下载文件及responseType:blob注意事项-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue axios实现下载文件及responseType:blob注意事项。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

npm install js-file-download --save
npm install axios --save

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)：按字符读取文件内容，结果用字符串形式表示文章来源地址https://www.toymoban.com/news/detail-681284.html

到了这里，关于vue axios实现下载文件及responseType:blob注意事项的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！