前端接收转译后端的二进制流文件（动态路由）

最新推荐文章于 2024-03-05 10:15:55 发布

夏弥落花成雨

最新推荐文章于 2024-03-05 10:15:55 发布

阅读量157

点赞数

分类专栏：成长日记文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/weixin_48369262/article/details/130579633

版权

成长日记专栏收录该内容

8 篇文章 0 订阅

订阅专栏

该代码段展示了如何处理一个返回blob类型数据的接口，用于生成QR码并新页面打开。当接口返回200状态且数据成功时，数据会被转换为PDF并打开。若出现错误，如未登录状态，会显示警告信息并清除token及重置路由。

摘要由CSDN通过智能技术生成

lookQrcode(){
            XXXXX().then((res) => {
                const binaryData = [];
                binaryData.push(res);
                let url = window.URL.createObjectURL(
                    new Blob(binaryData, { type: "application/pdf" })
                );
                // 新页面打开
                window.open(url);
            })
        },

接口配置：

export function xxx(params) {
  return request({
      url: `xxx/xxx/xxx`,
      responseType:'blob',//重点
      method: 'get',
      params: params,
  })
}

如果报错，找寻以下文件

在把respone替换成以下：

 response => {
    const res = response.data
    if(response.status = 200) {
      if(!response.data.success) {
        if(response.data.msg == '抱歉，您未登录') {
          Message({
            type: 'waring',
            message: response.data.msg
          })
          removeToken()
          resetRouter()
        } else {
          if(response.config.responseType == 'blob') {
            return Promise.resolve(res)
          } else {
            Message({
              message: response.data.msg || 'Error',
              type: 'error',
              duration: 5 * 1000
            })
            return Promise.reject(new Error(response.data.msg || 'Error'))
          }
        }
      } else {
        return Promise.resolve(res)
      }
    } else {
      Message({
            message: res.message || 'Error',
            type: 'error',
            duration: 5 * 1000
          })
          return Promise.reject(new Error(res.message || 'Error'))
    }
  },

主要改变为红框内部分：