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＆lt; 10，IE＆gt; = 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>

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

1 个答案: