前端下载文件流,解决设置返回值类型responseType:‘blob‘无效的问题

基本流程:前端发起请求设置响应体-后端接收返回文件流-转换为Blob格式文件-前端接收数据

我的实现代码如下:

config.js

import axios from 'axios';
import { getAuthorization } from '@/utils/loginUtils';

// 创建axios实例
const Service = axios.create({
    baseURL: process.env.VUE_APP_BASE_URL, // 设置请求的基本URL
    // 定义统一的请求头
    headers: {
       'Authorization': getAuthorization(), // 用于在请求中传递身份验证凭据,通常用于进行用户身份验证
    },
    // 配置请求超时时间
    timeout: 60000
});

request.js

import Service from "./config";

// 封装get请求
export const get = (config) => {
    return Service({
        ...config,
        method: 'get',
        data: config.data,
        responseType: config.responseType
    });
};

// 封装post请求
export const post = (config) => {
    return Service({
        ...config,
        method: 'post',
        data: config.data
    });
};

index.js

(重点设置:responseType: 'blob')

import { post,get } from './request';

// 指标导出接口
const exportRfidIndicator = () => {
    return get({
        url: process.env.VUE_APP_BASE_API+'/api/rfid/exportRfidIndicator',
        responseType: 'blob' // 设置响应类型为'blob'返回的是一个包含二进制数据的 Blob 对象
    })
}

export default {
    exportRfidIndicator
}

页面文件关键代码:

<div class="download_file" @click="DownloadFile"></div>


import api from "@/api/index.js";
export default {
    data() {
        return {
            filename: "后勤资源监控指标.xlsx",
        }
    }
}

methods:{
    // 指标导出
    DownloadFile() {
      api.exportRfidIndicator()
      .then(res => {
        console.log("res",res);
        if(!res) return
        const blob = new Blob([res],{type:'application/vnd.ms-excel'}) // 构造一个blob对象来处理数据,并设置文件类型
        console.log("blob",blob);
        if (window.navigator.msSaveOrOpenBlob) { //兼容IE10
            navigator.msSaveBlob(blob, this.filename)
        } else {
            const href = URL.createObjectURL(blob) //创建新的URL表示指定的blob对象
            console.log("href",href);
            const a = document.createElement('a') //创建a标签
            a.style.display = 'none'
            a.href = href // 指定下载链接
            a.download = this.filename //指定下载文件名
            a.click() //触发下载
            URL.revokeObjectURL(a.href) //释放URL对象
        }
        // 这里也可以不创建a链接,直接window.open(href)也能下载
      })
      .catch(err => {
          console.log(err)
      })
    }
}
 

以上步骤看起来没有一点问题,但是我在自测的时候,直接炸裂,文件直接是打不开

尝试修复也没有用

然后我去看控制台的输出,结果发现不对劲,经过转换应该返回正常的blob格式才对,现在却是如下这种乱码的格式:

因为这里的问题,所以导致下载下来的是一个无效的文件。

然后我就开始进一步的排查,我看了config的rensponseType是“blob”,这说明我配置的responseType: 'blob'生效了,然后所有关于导出的代码都被我看烂了,也没看出来哪里会不对劲,各种百度也都找了,各种博客都找烂了(大概找了上百条),就是没有发现我的代码有什么问题,也没有我这种问题的解决办法。

最后可以说也是缘分,误打误撞的让我看到有个博主的文章,真的起到了关键性的作用,文章其中有一句话:“mock模块会影响原生的ajax请求,使得服务器返回的blob类型变成乱码”,我突然醒悟,因为我在项目开发前期的确是用到了mock,打开控制台发现,mockjs初始化的时候给拦截响应设置了responseType:'',证据如下:

我回到代码中把引用mock的代码注释掉就可以了。真的是怎么也没有想到是mock模块影响了,可让我又学会了一招,以后也可以少走一条弯路了,真实功夫不负有心人!

下面是正常后拿到的数据格式:

最后我也是成功的解决了这个困扰我一天的难题,希望这篇文章可以帮助到更多的人,让人们少走弯路。

  • 8
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

YG·玉方

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值