使用 Javascript 将下载功能添加到点击事件答案

【问题标题】：add download function to a click event with Javascript使用 Javascript 将下载功能添加到点击事件
【发布时间】：2015-07-22 16:23:23
【问题描述】：

我想知道是否可以在纯 Javascript 中为单击事件添加下载功能，例如，当用户单击图像时，它会自动下载。例如，我有一个图像标签<img src="filelocation" id="img"/>，并希望在点击时下载它。（我不能使用"download="myfile.png"。

有没有类似的东西

$('#img').on('click',function(e){
  img.download="myfile.png";
});

网上所有的答案都建议将download="..."添加到我的标签中

谢谢！

【问题讨论】：

标签： javascript jquery html download

【解决方案1】：

可能是这样的：

document.getElementById('download').click();

&lt;a id="download" href="https://assets.entrepreneur.com/content/16x9/822/20150721193719-solshero3.jpeg" download hidden&gt;&lt;/a&gt;

玩它：here

但如果你真的不能有 download 属性：Play this then.

祝你好运！

【讨论】：

【解决方案2】：

您可以在点击图片时创建一个anchor 元素，并使用.click() 触发对该anchor 的点击，即使它没有附加到您的页面。

如果这仍然违反要求，那么您可能必须通过服务器端工作来实现它。

见Change name of download in javascript

window.onload = function() {
  // Fake image for testment
  var canvas = document.createElement('canvas');
  canvas.width = 300;
  canvas.height = 200;
  var ctx = canvas.getContext('2d');
  ctx.fillStyle = 'black';
  ctx.fillRect(0, 0, 200, 100);
  ctx.fillStyle = 'cyan';
  ctx.fillText('test', 50, 50);
  
  var makeImageDownloadable = function(image, name) {
    
    image.addEventListener('click', function() {     
      var a = document.createElement('a');
      a.href = image.src;
      // may need to check the datatype, or just write image to another tmp canvas first.
      a.download = name + '.png';
      a.click();
     });
  };
  
  
  var image = new Image();
  image.onload = function() {
    document.querySelector('#holder').appendChild(image);
    makeImageDownloadable(image, 'testimage');
  };
  image.src = canvas.toDataURL('image/png');
  
};

&lt;div id="holder"&gt;&lt;/div&gt;

【讨论】：

【解决方案3】：

您可以使用HTML5 下载属性。

 <a href="http://www.hdwallpapersimages.com/wp-content/uploads/2014/01/Winter-Tiger-Wild-Cat-Images.jpg" download="my_download.png"><img src="http://www.hdwallpapersimages.com/wp-content/uploads/2014/01/Winter-Tiger-Wild-Cat-Images.jpg">
     </a>

我不确定浏览器是否兼容，最好也包含服务器端脚本。

JSFiddle：http://jsfiddle.net/k2rear94/

【讨论】：

@kcube 我想是的，我错过了什么？
@klausruprecht 您没有使用 HTML 5 吗？如果没有，你可以使用 AJAX 吗？
我使用 HTML5，但我的 img 是动态创建的，并且也是从不同的页面创建的，因此我无法将属性添加到标签中。我可以使用 AJAX
@klausruprecht 即使动态加载元素，您也可以添加下载属性。更好的是，如果你可以使用AJAX，只需获取文件的下载链接，然后就可以<a href='your_link' target='_blank' /> ?
整个标签是动态创建的。那还有效吗？你是说 kcube 建议的吗？

【解决方案4】：

如果你希望这是动态的，试试这个。

$("SomeElement").onclick = function(){
$("<a id='tmp' href='link' download ></a>).appendTo("body");
$("#tmp").click();
$("#tmp").remove();
}

但请记住，IE 不支持下载属性。

【讨论】：

谢谢，我不太明白，所以我点击元素，然后将属性创建到 img 中？你的意思是这样fiddle.jshell.net/sf7L8r3p？
如果你不想在你的页面上添加一个静态标签，这会在你的元素的点击事件上附加它到正文，触发一个标签上的点击事件，这将启动下载，然后删除来自 DOM 的元素。但是，如果您在 IE 中，这将无济于事。