javascript - 创建一个按钮来启动 jQuery 函数而不是立即启动？

Question

我有这个创建图像的功能:

<script>
domtoimage.toJpeg(document.getElementById('print_screen'), { quality: 0.70 })

              .then(function (dataUrl) {
                  var link = document.createElement('a');
                  link.download = 'invoice.jpeg';
                  link.href = dataUrl;
                  link.click();
});
</script>

问题是它在加载页面时立即启动。我想做一个像这样的按钮:

<a class="btn" href="" onclick="printFunction()">Click here to print</a>

我尝试将 domtoimage 包装在 function printFunction 中，但这没有用。我究竟做错了什么？ :(

Answer 1

如果您使用的是 jQuery，那么您可以将您的函数包装在 document.ready 函数中，就像这样，如果不是，您的 domtoimage.toJpeg 函数将在浏览器解析该标记时执行。

<script>
$(document).ready(function(){
    var btnHandler = function(){
              domtoimage.toJpeg(document.getElementById('print_screen'), { quality: 0.70 })

              .then(function (dataUrl) {
                  var link = document.createElement('a');
                  link.download = 'invoice.jpeg';
                  link.href = dataUrl;
                  link.click();
    };
    var $btn = $("a.btn").click(btnHandler);
});
</script>