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

Posted 2023-03-22

【中文标题】在 IE11 中打开由 createObjectURL 创建的链接

【英文标题】：Open links made by createObjectURL in IE11

【发布时间】：2014-07-23 07:28:00

【问题描述】：

为什么打不开下面demo中的链接：http://html5-demos.appspot.com/static/a.download.html

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

【问题讨论】：

可能不支持 a 标签上使用的下载属性。 status.modern.ie/adownloadattribute

IE 和 Safari 不支持 download 属性。但我不会下载/保存链接：正如我的问题标题中提到的，它甚至不会打开/导航到链接。 Safari 按预期工作。这是一个没有下载属性的demo。

你看here了吗？看起来同样的问题。

【参考方案1】：

本演示使用 Blob URL，由于安全限制，IE 不支持。

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);
        );
     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>

【讨论】：

似乎它在网络工作者中不起作用：***.com/questions/26928992/…

我真的希望“如果互联网浏览器那么愚蠢”的时代将会结束。谢谢你的投稿，对我帮助很大。

JS Fiddle 最近更改了其网站以在 iframe 中显示结果。 IE 部分在 iframe 中不起作用。如果您在常规页面中尝试此代码，它也适用于 IE 11。

@robert.bo.roth 您想在客户端生成 PDF 还是 PDF 已经在服务器上？如果它已经在服务器上，我推荐 PDF.JS(***.com/a/291823/1439313)。对于客户端 pdf 生成（即时），使用 jsPDF(parall.ax/products/jspdf)

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

【参考方案2】：

这是将任何文件下载为 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();
    
;

注意：如果需要，请更改文件类型。

【讨论】：

实际上不需要将元素附加到正文中，因此也不需要设置style 和调用remove()。在 Chrome、FF 和 Edge Chromium 上对此进行了测试。

【参考方案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);

【参考方案4】：

        //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();
          

【参考方案5】：

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