在IE11中打开由createObjectURL创建的链接


68

为什么不能在以下演示中打开链接:http :
//html5-demos.appspot.com/static/a.download.html

您甚至无法右键单击并在新的选项卡/窗口中打开它。我需要自定义浏览器中的任何设置吗?


也许不支持标签上使用的下载属性。status.modern.ie/adownloadattribute
Mathias

downloadIE和Safari不支持该属性。但是我不会下载/保存该链接:正如我的问题标题中所述,它甚至都不会打开/导航到该链接。Safari可以正常工作。这是一个没有下载属性的演示

在这里看看吗?看起来是一样的问题。
约翰

Answers:


115

由于安全限制,此演示使用IE不支持的Blob URL。

IE有自己的API,用于创建和下载文件msSaveOrOpenBlob

这是适用于IE,Chrome和Firefox的跨浏览器解决方案:

function createDownloadLink(anchorSelector, str, fileName){
    if(window.navigator.msSaveOrOpenBlob) {
        var fileData = [str];
        blobObject = new Blob(fileData);
        $(anchorSelector).click(function(){
            window.navigator.msSaveOrOpenBlob(blobObject, fileName);
            window.navigator.msSaveOrOpenBlob(blobObject, fileName);
        });
    } else {
        var url = "data:text/plain;charset=utf-8," + encodeURIComponent(str);
        $(anchorSelector).attr("download", fileName);
        $(anchorSelector).attr("href", url);
    }
}

$(function () {
    var str = "hi,file";
    createDownloadLink("#export", str, "file.txt");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="export" class="myButton" download="" href="#">export</a>


好像是一个网络工作者内不工作:stackoverflow.com/questions/26928992/...
安东尼Bobenrieth

4
我真的希望“如果是愚蠢的互联网浏览器”的时代将会结束。感谢您的提交,它对我有很大帮助。

6
JS Fiddle最近更改了其网站,以在iframe中显示结果。IE部分在iframe中不起作用。如果您在常规页面中尝试此代码,它也可以在IE 11中使用。
dinesh ygv '16

1
@ robert.bo.roth您要在客户端生成PDF还是PDF已经在服务器上?如果服务器上已经有它,我建议使用PDF.JS(stackoverflow.com/a/291823/1439313)。对于客户端pdf生成(即时),请使用jsPDF(parall.ax/products/jspdf
dinesh ygv

2
@ robert.bo.roth不幸的是,IE不支持嵌入式PDF。唯一的方法是向用户显示下载链接。PDFObject(pdfobject.com)可以检测浏览器支持并在嵌入式PDF和下载链接之间切换。
dinesh ygv

40

这是将任何文件下载为Blob的功能。(在IE和非IE上测试)

var download_csv_using_blob = function (file_name, content) {
    var csvData = new Blob([content], { type: 'text/csv' });
    if (window.navigator && window.navigator.msSaveOrOpenBlob) { // for IE
        window.navigator.msSaveOrOpenBlob(csvData, file_name);
    } else { // for Non-IE (chrome, firefox etc.)
        var a = document.createElement("a");
        document.body.appendChild(a);
        a.style = "display: none";
        var csvUrl = URL.createObjectURL(csvData);
        a.href =  csvUrl;
        a.download = file_name;
        a.click();
        URL.revokeObjectURL(a.href)
        a.remove();
    }
};

注意:如果需要,请更改文件的类型。


6
最好的做法是在下载完成后从该URL对象释放内存URL.revokeObjectURL(a.href)
Elhay Avichzer

3

如果数据来自Ajax,则可以添加

if (window.navigator.msSaveOrOpenBlob)
 xhttp.responseType = "arraybuffer";
else
 xhttpGetPack.responseType = "blob";

/////////////////////////////////////////////////////

var a = document.createElement("a");
document.body.appendChild(a);
a.style.display = "none";

// IE
if (window.navigator.msSaveOrOpenBlob)
{
  a.onclick = ((evx) => 
  {
      var newBlob = new Blob([new Uint8Array(xhttpGetPack.response)]);
      window.navigator.msSaveOrOpenBlob(newBlob, "myfile.ts");
  });
  a.click();
}
else //Chrome and safari
{
  var file = URL.createObjectURL(xhttpGetPack.response);
  a.href = file;
  a["download"] = "myFile.ts";
  a.click();
  window.URL.revokeObjectURL(file);
}

1
        //File Object return in ajax Success in data variable
         var blob = new Blob([data]);
         if (navigator.appVersion.toString().indexOf('.NET') > 0) //For IE
          {
            window.navigator.msSaveOrOpenBlob(blob, "filename.ext");
          }
          else if (navigator.userAgent.toLowerCase().indexOf('firefox') >-1) 
              {
                var link = document.createElement('a');
                link.href = window.URL.createObjectURL(blob);
                link.download = "filename.ext";
                document.body.appendChild(link);//For FireFox <a> tag event 
                //not working
                link.click();
            }
          else
          {
                var link = document.createElement('a');
                link.href = window.URL.createObjectURL(blob);
                link.download = "filename.ext" 
                link.click();
          }

1

要在Internet Explorer 11中下载内部iframe,您需要使用parent.window.navigator.msSaveOrOpenBlob(blob, "filename.ext");

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.