Question

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

是否有像

这样的东西

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

所有在线答案都建议将download="..."添加到我的代码

中

谢谢！

Answer 1

也许是这样的：

＆＃13;

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

＆＃13;

<a id="download" href="https://assets.entrepreneur.com/content/16x9/822/20150721193719-solshero3.jpeg" download hidden></a>

＆＃13;

玩它：here

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

祝你好运!!

Answer 2

您可以点击图片创建anchor元素，并使用.click()触发anchor上的点击，即使它未附加到您的网页上。

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

请参阅Change name of download in javascript

＆＃13;

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');
  
};

＆＃13;

<div id="holder"></div>

＆＃13;

Answer 3

您可以使用HTML5下载属性。

＆＃13;

 <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>

＆＃13;

我不确定这方面的浏览器兼容性，更好的方法是包括服务器端脚本。

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

Answer 4

如果你想要这是动态的，试试这个。

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

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

使用Javascript

4 个答案: