关于解决Edge浏览器下使用createObjectURL生成的Blob下载错误的问题【已解决】

发布时间:2024年01月08日


前言

在前端开发中,我们经常会遇到需要将内容下载为文件的情况。为了实现这一功能,通常会使用 Blob 对象生成一个链接,然后利用 a 标签的下载属性将内容保存到本地。

然而,近期在使用Edge浏览器时,发现这一过程中出现了一些问题,导致下载操作失败。

本篇博客将介绍在Edge浏览器中使用createObjectURL解决Blob下载错误的问题。


问题描述

在使用以下代码在Chrome、Firefox、Safari、360、EdgeHtml浏览器中实现文件下载功能时,一切正常:

function download(content, filename) {
    var blob = new Blob([content]);
    var eleLink = document.createElement('a');
    eleLink.download = filename;
    $(eleLink).css('display', 'none');
    eleLink.href = URL.createObjectURL(blob);
    document.body.appendChild(eleLink);
    eleLink.click();
    document.body.removeChild(eleLink);
}

然而,在Edge浏览器中,该代码会引发拒绝访问的错误,错误如下:
SCRIPT: 拒绝访问


原因分析

原因是Edge生成的 Blob 链接不包含域名信息,与其他浏览器生成的链接格式不同。

具体而言,Edge生成的链接如下:

blob:5630-71d7-9c38-3713-fa4da1ee6898

而 Chrome 等浏览器生成的链接则包含域名信息:

http://xxx.xxx.biz/86e01467-6654-4b74-98b3-ca25f396bc2f

解决方案

为了解决Edge浏览器中的下载错误,我们可以采用以下方法:

function download(content, filename) {
    var blob = new Blob([content]);
    if('msSaveOrOpenBlob' in navigator){
        // 使用 Edge 浏览器专有方法
        window.navigator.msSaveOrOpenBlob(blob, filename);
        return;
    }
    var eleLink = document.createElement('a');
    eleLink.download = filename;
    $(eleLink).css('display', 'none');
    eleLink.href = URL.createObjectURL(blob);
    document.body.appendChild(eleLink);
    eleLink.click();
    document.body.removeChild(eleLink);
}

上面代码中,通过判断浏览器是否支持 msSaveOrOpenBlob 方法,我们可以在Edge浏览器中使用该方法,绕过了Blob链接的生成问题。这种解决方案保证了跨浏览器的兼容性,确保在各种环境中都能正常下载文件。


总结

通过这一改造升级,可以成功解决 Edge浏览器中Blob下载错误的问题,确保了用户在使用不同浏览器时都能够顺利下载所需文件。希望这一技巧对前端开发者们能够提供帮助,让我们的应用在各种浏览器中都能够更加稳定可靠。

希望上面的内容对你的工作学习有所帮助!欢迎各位一键三连哦~

各位 加油!

? 原创不易,还希望各位大佬支持一下 \textcolor{blue}{原创不易,还希望各位大佬支持一下} 原创不易,还希望各位大佬支持一下

👍 点赞,你的认可是我创作的动力! \textcolor{green}{点赞,你的认可是我创作的动力!} 点赞,你的认可是我创作的动力!

?? 收藏,你的青睐是我努力的方向! \textcolor{green}{收藏,你的青睐是我努力的方向!} 收藏,你的青睐是我努力的方向!

?? 评论,你的意见是我进步的财富! \textcolor{green}{评论,你的意见是我进步的财富!} 评论,你的意见是我进步的财富!

文章来源:https://blog.csdn.net/XH_jing/article/details/135458861
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。