前端利用Blob对象实现下载html文件及踩坑记录

apple_2021

已于 2022-04-27 10:41:21 修改

阅读量1.1k

点赞数 2

分类专栏：前端

于 2022-04-27 10:39:23 首次发布

本文链接：https://blog.csdn.net/apple_2021/article/details/124444831

版权

HTML下载 Blob axios responseType 文件处理

关键词由CSDN通过智能技术生成

前端专栏收录该内容

24 篇文章

订阅专栏

在项目中新增HTML文件下载功能时遇到了问题，原本使用Blob对象下载PDF文件的方法导致HTML文件下载后显示为[object Object]。分析原因发现，应当使用`new Blob([res.data])`而不是`new Blob([res])`，并且要注意当设置`responseType: 'blob'`时，响应数据已经是Blob对象。修正后，HTML文件能够正常下载并打开。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目场景：

需要根据路径下载文件，之前只支持pdf，现在需要支持html文件下载；

问题描述

我依旧使用Blob对象，根据路径进行下载，但是html下载出来出现了这个问题，下载的html文件打开之后页面显示成[object Object]；

在这里插入图片描述

axios({ method: 'get', url: '请求文件地址', responseType:'blob'}).then((res: any)=>{
    var aBlob = new Blob([res], { type: 'text/html' });
    let objectURL = window.URL.createObjectURL(aBlob);
    link.href = objectURL;
    link.download = props.gfsUrl; // 自定义文件名
    link.click(); // 下载
  })