解决在微软Edge浏览器下无法使用createObjectURL生成的blob链接下载的问题

tainzhi 发布于2019-08-26 12:22 / 1848人阅读

摘要：以上代码在浏览器中，均可以成功下载文件，但是在中，会报错。如下拒绝访问造成以上原因是在中使用生成的是不带域名的链接，如下而等浏览器生成的是带域名的，如下所以在下通过标签的来下载是不行的。解决方法使用，代替。

我们先来看一份代码

function download(content, filename) {
    // 字符内容转变成blob地址
    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);
};

上面的代码的意思是先用blob把字符串内容转变成blob链接，然后利用a标签自带的下载功能把内容下载下来。

以上代码在Chrome、Firefox、Safari、360、EdgeHtml浏览器中，均可以成功下载文件，但是在Edge中，会报错。如下：

SCRIPT: 拒绝访问

造成以上原因是在Edge中使用Blob生成的是不带域名的blob链接，如下：

blob:00F0B45-DD4E-4F4F-9B15-000368F15E20

而chrome等浏览器生成的是带域名的，如下：

http://xxx.xxx.biz/86e01467-6...;/center>

所以在edge下通过a标签的href来下载是不行的。

解决方法

使用 window.navigator.msSaveOrOpenBlob(blob, filename)，代替 window.URL.createObjectURL。

上代码：

function download(content, filename) {
    // 字符内容转变成blob地址
    var blob = new Blob([content]);
    if("msSaveOrOpenBlob" in navigator){
        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);
};

GPU云服务器云服务器解决阿里云服务器无法访问80端口的问题 webrtc在安卓10下无法使用解决问题的方法可以生成链接的图片云存储

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/108565.html

js实现txt/excel文件下载

摘要：出于安全考虑，无法直接调用写文件到磁盘，但是却可以通过下载来变相实现保存功能。生成文件并下载是一种逗号分隔的表格文件格式，可以很好的被支持，由于其文件格式简单，所以经常用在简单的表格上面。出于安全考虑，JS无法直接调用FileAPI写文件到磁盘，但是却可以通过下载来变相实现保存功能。JS要实现下载功能，一般都是这么几个过程：生成下载的URL，动态创建一个A标签，并将其href指向生成...

娣辩孩 2019-08-22 18:02 评论0 收藏0
关于前端实现文件下载功能

摘要：问题以上两种方式，当在下载格式，或者视频文件时，浏览器会直接播放该文件，而达不到直接下载的功能，此时，当下载音视频文件时无法使用以上两种方式。 1、通过window.open()打开新页面下载文件 window.open(`url`, _self) 使用场景：下载excel文件，后端提供接口，接口返回的是文件流，可以直接使用window.open()，最简单的方式。优点：最简洁；弊...

Arno 2019-08-23 17:54 评论0 收藏0
JS 下载文件方法分享(解决图片文件无法直接下载和 IE兼容问题)

摘要：场景简介由于业务需要，经常遇到下载各类文件的需求，其中最头疼的莫过于前端下载图片了，直接给个图片文件地址会变成直接打开图片，而不是弹窗提示另存为，研究了下前端实现文件下载最便捷的方法还是创建标签，写入属性实现点击下载，但这在浏览器上的实现又场景简介由于业务需要，经常遇到下载各类文件的需求，其中最头疼的莫过于前端下载图片了，直接给个图片文件地址会变成直接打开图片，而不是弹窗提示另存为...

awesome23 2019-08-23 14:49 评论0 收藏0
彻底理解使用JavaScript 将Json数据导出CSV文件

摘要：前言将数据报表导出，是数据报告展示常用的附带功能。今天我们主要讲的是直接通过前端将数据导出的格式的文件。但其实真正的答案应该是把相应的数据转换成和。若是超过浏览器自身限制的最大长度，会导致下载失败。前言将数据报表导出，是web数据报告展示常用的附带功能。通常这种功能都是用后端开发人员编写的。今天我们主要讲的是直接通过前端js将数据导出Excel的CSV格式的文件。原理首先在本地...

jsliang 2019-08-01 17:42 评论0 收藏0