封狼 2022-10-21 15:48 采纳率: 100%
浏览 44
已结题

前端无法解析blob文件

问题遇到的现象和发生背景
vue+springboot 实现下载功能时,前端没法解析文件,但在浏览器的响应中的数据符合要求
用代码块功能插入代码,请勿粘贴截图

前端:

async downloadR(id){
      request.get('search/downloadR/'+id,
          {responseType: 'blob'}
      ).then((res)=>{
        console.log('文件下载成功');
        const blob = new Blob([res.data]);
        const fileName = id+".R";
        if ('download' in document.createElement('a')) {
          //支持a标签download的浏览器
          const link = document.createElement('a');//创建a标签
          link.download = fileName;//a标签添加属性
          link.style.display = 'none';
          link.href = URL.createObjectURL(blob);
          document.body.appendChild(link);
          link.click();//执行下载
          URL.revokeObjectURL(link.href); //释放url
          document.body.removeChild(link);//释放标签
        } else {
         navigator.msSaveBlob(blob, fileName);
        }
      }).catch((res)=>{
        console.log('文件下载失败');
      });
    },

request

const request=axios.create(
    {
        baseURL:'http://localhost:9090',//全局统一前缀
        timeout:5000
    })

//request拦截器
//可以自请求发送前对请求做一些处理
//比如统一加token,对参数统一加密
request.interceptors.request.use(config=>{
    config.headers['Content-Type']='application/json;charset=utf-8'
    return config;
},error => {
    return Promise.reject(error);
});

运行结果及报错内容

下载后的结果

img

浏览器中响应 也是下载应该的结果

img

  • 写回答

3条回答 默认 最新

  • 崽崽的谷雨 2022-10-21 16:14
    关注

    看看res.data是什么

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题?

问题事件

  • 系统已结题 11月5日
  • 已采纳回答 10月28日
  • 创建了问题 10月21日

悬赏问题

  • ¥15 在若依框架下实现人脸识别
  • ¥15 网络科学导论,网络控制
  • ¥100 安卓tv程序连接SQLSERVER2008问题
  • ¥15 利用Sentinel-2和Landsat8做一个水库的长时序NDVI的对比,为什么Snetinel-2计算的结果最小值特别小,而Lansat8就很平均
  • ¥15 metadata提取的PDF元数据,如何转换为一个Excel
  • ¥15 关于arduino编程toCharArray()函数的使用
  • ¥100 vc++混合CEF采用CLR方式编译报错
  • ¥15 coze 的插件输入飞书多维表格 app_token 后一直显示错误,如何解决?
  • ¥15 vite+vue3+plyr播放本地public文件夹下视频无法加载
  • ¥15 c#逐行读取txt文本,但是每一行里面数据之间空格数量不同