javascript - 单击与 Chrome 和 IE 兼容的按钮即可跨浏览器文件下载？

Question

图像托管在服务器外部，仅下载给用户(客户端)。

我试过 HTML5 下载标签，但它在 IE 上效果不佳。

<div style="width:800px; height:457px; background-image:url('http://i.imgur.com/7fypLpI.jpg');"></div>
<a href="http://i.imgur.com/7fypLpI.jpg" download="http://i.imgur.com/7fypLpI.jpg">Download</a>

https://jsfiddle.net/eLpc8d7u/

如何使用适用于任何浏览器的 JavaScript 下载文件？

我看过另一个问题:IE download file

但我仍然对制作单个脚本感到困惑。

Answer 1

对于包括 IE < 10 和 IE >= 10 在内的跨浏览器下载，您可以使用下面的库，这将为您轻松完成任务。

http://danml.com/js/download.js

GitHub 位置:https://github.com/rndme/download

您案例的示例代码片段:

function downloadImage(event, url, fileName) {
  event.preventDefault();

  if(window.download && url) {   
     fileName = fileName || url.split('/').pop().split('?')[0];
     var ajax = new XMLHttpRequest();
        		ajax.open( 'GET', url, true);
        		ajax.responseType = 'blob';
        		ajax.onload= function(e){ 
				  download(e.target.response, fileName, 'application/octet-stream');
				};
        		setTimeout(function(){ ajax.send();}, 0); // allows setting custom ajax headers using the return:
			    return ajax;
  }
}

<script src="http://danml.com/js/download.js"></script>
<div style="width:800px; height:457px; background-image:url('http://i.imgur.com/7fypLpI.jpg');"></div>
<a href="http://i.imgur.com/7fypLpI.jpg" onclick="downloadImage(event, 'http://i.imgur.com/7fypLpI.jpg')">Download with default file name</a><br/>
<a href="http://i.imgur.com/7fypLpI.jpg" onclick="downloadImage(event, 'http://i.imgur.com/7fypLpI.jpg', 'testImage.jpg')">Download with custom file name</a>