• axios请求设置responseType为'blob'或'arraybuffer'下载时,正确处理返回值


    问题:调用后台图片接口,后台返回二进制流图片数据格式。前端接收到流后处理数据显示在img标签。
    解决:
    1、先设置axios接收参数格式为"arraybuffer":
    responseType: 'arraybuffer'
     
    2、转换为base64格式图片数据在img标签显示:
    return 'data:image/png;base64,' + btoa(
        new Uint8Array(res.data).reduce((data, byte) => data + String.fromCharCode(byte), '')
      );
    返回的string直接放在img标签src可直接显示
     
    3、先设置axios接收参数格式为"blob":
    axios.post( ExportUrl, Params, {
        responseType: 'blob'
      })
      .then(function(response) {
        const url = window.URL.createObjectURL(new Blob([response.data]));
        console.log(url)
      });
     
     
    通过a标签下载文件
    const url = '下载的url链接';
    const link = document.createElement('a');
    link.href = url;
    link.target = '_blank';
    link.setAttribute('download', 'Excel名字.xlsx');
    document.body.appendChild(link);
    link.click();
     
     
     
    前言
    使用axios请求api下载导出一个文件时,接口返回值可能会出现两种情况:
    1、文件流
    2、json对象
     
     
    responseType值的类型
    值 
    数据类型
    ''
     DOMString(默认类型)
    arraybuffer
    ArrayBuffer对象
    blob
    Blob对象
    document 
    Documnet对象
    json
    JavaScript object, parsed from a JSON string returned by the server
    text
    DOMString
     
    实例
    返回值不同情况的处理方式,举例如下:
     
    ①、请求设置为 responseType: 'arraybuffer',
    请求成功时,后端返回文件流,正常导出文件;
    请求失败时,后端返回json对象,如:{"Status":"false","StatusCode":"500","Result":"操作失败"},也被转成了arraybuffer
     
    此时请求成功和失败返回的http状态码都是200
     
    解决方案:将已转为arraybuffer类型的数据转回Json对象,然后进行判断
     
    代码如下
    async downloadFile (file) {
          let res = await this.$axios.post(this.API.order.tradeImpExcle, { responseType: "arraybuffer" });
          if (!res) return;
          try {
            //如果JSON.parse(enc.decode(new Uint8Array(res.data)))不报错,说明后台返回的是json对象,则弹框提示
            //如果JSON.parse(enc.decode(new Uint8Array(res.data)))报错,说明返回的是文件流,进入catch,下载文件
            let enc = new TextDecoder('utf-8')
            res = JSON.parse(enc.decode(new Uint8Array(res.data))) //转化成json对象
            if (res.Status == "true") {
              this.refresh()
              this.$message.success(res.Msg)
            } else {
              this.$message.error(res.Result)
            }
          } catch (err) {
            const content = res.data;
            const blob = new Blob([content]);
            let url = window.URL.createObjectURL(blob);
            let link = document.createElement("a");
            link.style.display = "none";
            link.href = url;
            link.setAttribute(
              "download",
              res.headers["content-disposition"].split("=")[1]
            );
            document.body.appendChild(link);
            link.click();
          }
        }
     
    ②、请求设置为 responseType: 'blob',
     
    解决方案:将已转为blob类型的数据转回Json对象,然后进行判断
     
    代码如下
     async downloadFile (file) {
          let formData = new FormData();
          formData.append("allTradesExcelFile", file);
          let res = await this.$axios.post(this.API.order.tradeImpExcle, formData, { responseType: "blob" });
          if (!res) return;
          let r = new FileReader()
          let _this = this
          r.onload = function () {
            try {
              // 如果JSON.parse(this.result)不报错,说明this.result是json对象,则弹框提示
              // 如果JSON.parse(this.result)报错,说明返回的是文件流,进入catch,下载文件
              res = JSON.parse(this.result)
              if (res.Status == "true") {
                _this.refresh()
                _this.$message.success(res.Msg)
              } else {
                _this.$message.error(res.Result)
              }
            } catch (err) {
              const content = res.data;
              const blob = new Blob([content]);
              let url = window.URL.createObjectURL(blob);
              let link = document.createElement("a");
              link.style.display = "none";
              link.href = url;
              link.setAttribute(
                "download",
                res.headers["content-disposition"].split("=")[1]
              );
              document.body.appendChild(link);
              link.click();
            }
          }
          r.readAsText(res.data) // FileReader的API
        }
     
  • 相关阅读:
    libreoffice转PDF文件
    window端设置elasticsearch的堆内存大小
    kubeadm 部署 K8S 1.21.5
    GitLab缓存问题
    【博客园美化】参考资料
    【Qt】QObject::connect: Cannot queue arguments of type 'QVector<int>' Make sure 'QVector<int>' is registered using qRegisterMetaType()解决办法
    【jeecgboot】启动报错
    验证下MarkDown
    nginx代理转发因http_version导致lua读取文件不存在问题
    怎么看mac是arm64还是x64
  • 原文地址:https://www.cnblogs.com/mingyeliu/p/15357753.html
Copyright © 2020-2023  润新知