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

目录

• • 前言
  • 问题描述
  • 原因分析
  • 解决方案
  • 总结

---

前言

在前端开发中，我们经常会遇到需要将内容下载为文件的情况。为了实现这一功能，通常会使用 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}{评论，你的意见是我进步的财富！} 评论，你的意见是我进步的财富！