前端页面blob下载文件兼容性问题及注意点

最新推荐文章于 2024-03-07 16:37:20 发布

大牛码子

最新推荐文章于 2024-03-07 16:37:20 发布

阅读量2k

点赞数

分类专栏： Blob文件下载文章标签： javascript

本文链接：https://blog.csdn.net/weixin_46053228/article/details/124029913

版权

Blob文件下载专栏收录该内容

1 篇文章 0 订阅

订阅专栏

博客介绍了在H5中使用a标签下载文件时遇到的浏览器兼容性问题，特别是对于特定文件类型如image、py、txt、exe等。当在跨域或前后端分离项目中，download属性可能失效导致文件直接预览而非下载。为了解决这个问题，文章提出了使用Blob对象的方法，通过创建Blob对象、生成URL以及封装下载函数来实现无兼容性问题的文件下载。这种方法确保了在各种浏览器和低版本IE中的正常工作。

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

下载文件场景下：

使用a标签访问静态路径请求服务器下载文件时，zip.xlsx等文件类型浏览器打不开会下载到本地，而image、py、txt、exe在第三方网站上或者跨域项目/前后端部署的，浏览器a标签H5属性download会失效直接强制打开预览文件，同时低版本ie或者谷歌有兼容性问题

解决方法使用构造函数blob下载文件无任何兼容性问题
1>.调用Blob构造函数生成blob对象
const blobContent = new Blob（[二进制流数据-byte型],｛type｝）
2>,调用..生成url对象指向blob
const bloburl=window.URL.createObjectURL(blobConent)
3>.封装函数下载文件
downloadFileBlob（bloburl，filename）｛
const link=document.createElement（“a”）；
link.download = filename；
link.style.display="none";
link.href = bloburl;
document.body.appendChild(link);
link.click();
//移除
documen.body.removeChild（link）
｝