HTML5下载属性是否有任何客户端备用解决方案？

Question

对于不支持HTML5中的“download”属性的浏览器，是否有客户端回退选项？

目前，Chrome是唯一正确支持该属性的浏览器。Firefox也支持，但持有一种难以理解的观点认为仅对来自同一域的文件有效，出于“安全”问题。

正确处理此问题的方法是使用后端服务器代理带有Content-Disposition头的请求文件，但在这种情况下，这可能不是一个选项。

Firefox的“安全剧院”也并不十分有用，因为它是设置代理的任意机制。

我看了一下https://github.com/dcneiner/Downloadify，但刚刚意识到它仅支持文件创建，而不支持远程文件访问。

- Geuis

---

规范中说：“该算法旨在减轻从不受信任的站点下载文件所涉及的安全风险，并强烈建议用户代理程序遵循它。”(http://www.whatwg.org/specs/web-apps/current-work/multipage/links.html#downloading-resources)，因此我怀疑任何浏览器供应商都不会允许 download 属性指向另一个来源（域）。 - Lachezar

Answer 1

简单回答：不行。除了你已经提到的 download 属性之外，没有干净的客户端方法可以做到这一点。发送适当的标头会是最好的选择，但是有一个骇客方法你可能不想使用：

对于所有具有 download 属性的链接（可以使用 document.querySelectorAll('a[download]') 获取这些链接），使用 XMLHttpRequest 获取 HREF 中提到的页面/数据。然后，使用 btoa() 函数（或 IEs 的 polyfill）将其转换为 base64 字符串。现在，在字符串的开头添加 "data:application/octet-stream;base64,"，并将其设置为锚点的新 HREF 属性，然后删除 download 属性。（您可能首先要使用类似 Modernizr 的工具来探测浏览器支持情况）。

我告诉过你，你不会喜欢它的！

- rvighne

Answer 2

我写了这个JS [attrDownloadIE.js]

// author: Carlos Machado
// version: 0.1
// year: 2015
//
var f_name = "";
var f_ref = "";

function reqListener() {
  if(f_name == "") {f_name = f_ref;}
  var blobObject = this.response;
  window.navigator.msSaveBlob(blobObject, f_name); 
}

function myDownload(evt) {
  f_name = this.getAttribute("download");
  f_ref = this.getAttribute("href");
  evt.preventDefault();
  var oReq1 = new XMLHttpRequest();
  oReq1.addEventListener("load",reqListener, false);
  oReq1.open("get", this, true);
  oReq1.responseType = 'blob';
  oReq1.send();
}

document.addEventListener(
  "load",
  function(event){
    var isIE = /*@cc_on!@*/false || !!document.documentMode;
    if(isIE) {
      var items = document.querySelectorAll('a[download], area[download]');
      for(var i = 0; i < items.length; i++) {
        items[i].addEventListener('click', myDownload, false);
      }
    }
  }
);

- Carlos Machado

---

非常好！我在这里注意到的一件事是，如果在打开之前设置responseType，IE会抛出无效状态错误... - Vigneshkumar Chinnachamy.M