Question

我想触发下载按钮，以便在预览后自动下载。我尝试了下面的代码，但它没有用。

imgSize.endsWith("KB");

...

$("#btn-Preview-Image").on('click', function () {
         html2canvas(element, {
         onrendered: function (canvas) {
                $("#previewImage").append(canvas);
                getCanvas = canvas;
             }
         });
         $("#btn-Convert-Html2Image").click() //doesn't work
 });


  //trigger this click below

    $("#btn-Convert-Html2Image").on('click', function () {
      var imgageData = getCanvas.toDataURL("image/png");
      var newData = imgageData.replace(/^data:image\/png/, "data:application/octet-stream");
      $("#btn-Convert-Html2Image").attr("download", "your_pic_name.png").attr("href", newData);
    });

Answer 1

您需要使用trigger()的{{1}}函数明确触发点击。

<强>替换

JQuery

。通过

$("#btn-Convert-Html2Image").click();

使用$("#btn-Convert-Html2Image").trigger('click');将触发元素上的trigger('click')事件，该事件模拟与鼠标点击相同的事件。

click

$("#btn-Preview-Image").on('click', function () { $("#btn-Convert-Html2Image").trigger('click'); }); $("#btn-Convert-Html2Image").on('click', function () { alert('triggered download'); });

有关详细信息：


点击（）   将事件处理程序绑定到“单击”JavaScript事件，或在元素上触发该事件。

<强>触发（）   执行附加到给定事件类型的匹配元素的所有处理程序和行为。

Answer 2

.click是一个单击事件，单击它将不会触发点击事件。

触发您需要使用的事件

$("#btn-Convert-Html2Image").trigger('click');

Answer 3

您的.click()应该与.trigger("click")一样： https://jsfiddle.net/xpvt214o/139343/。很可能你在回调函数中遇到异常。如果html2canvas引发错误，则会忽略$("#btn-Convert-Html2Image").click()字符串。

Answer 4

我认为你的问题是因为 getCanvas 在html2canvas的更高版本中被替换了。图书馆现在使用承诺。

为了创建画布并下载它，您必须定义

通过承诺
第二次点击按钮中的引用

您的功能实际上正常工作，问题是由语法问题引起的。

我假设element是您要转换为画布的屏幕区域：

$("#btn-Preview-Image").on('click', function () {
  html2canvas(document.body).then(function(canvas){
    var appended = document.body.appendChild(canvas);
  });
    console.log("First button");

  }).finish(function(){
      $("#btn-Convert-Html2Image").click() 
});

$("#btn-Convert-Html2Image").on('click', function () {
  this.href = $('canvas')[0].toDataURL('image/png');
  this.download = 'design.png';
  console.log("Second button");
});

注意：我在第一个函数中使用了一个promise，因为我们需要等待库来构造我们的画布。否则，第二次单击不会检测到我们刚刚创建的画布。

触发另一次点击jquery

4 个答案: