html5 下载属性的任何后备客户端解决方案？

Posted 2023-02-22

【中文标题】html5 下载属性的任何后备客户端解决方案？

【英文标题】：Any fallback client-side solutions for the html5 download attribute?

【发布时间】：2013-09-10 06:10:33

【问题描述】：

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

目前，这仅在 Chrome 中得到适当支持。 Firefox 有支持，但采取了一种迟钝的观点，即它应该只处理来自同一域的文件以解决“安全”问题。

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

Firefox 的“安全剧院”也不是很有帮助，因为它是设置代理的任意机制。

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

【问题讨论】：

好吧，规范说This algorithm is intended to mitigate security dangers involved in downloading files from untrusted sites, and user agents are strongly urged to follow it.，所以我怀疑任何浏览器供应商都会允许下载属性指向另一个来源（域）。

【参考方案1】：

简短的回答：不。除了您已经提到的download 属性之外，没有干净的客户端方法可以做到这一点。发送正确的标头是最好的，但是是一个你可能不想使用的hack：

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

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

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

【讨论】：

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