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

Creating a button to launch a jQuery function rather than instantly?

本文关键字：启动 函数 jQuery 创建 一个 按钮      更新时间：2023-09-26

我有一个创建图像的函数:

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

我试着在function printFunction里面包装domtoimage，但那不起作用。我做错了什么?(

如果您正在使用jQuery，那么您可以在文档中包装您的函数。当浏览器解析该标签时，将执行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>

$('#buttonid')。点击(function (){这里的代码});

在promise回调中触发click事件。解决方法是在承诺回调中注释link.click()，并在另一个function中触发click event

这样做注释link.click() 

<script>
    var link=null;
    domtoimage.toJpeg(document.getElementById('print_screen'), { quality: 0.70 })
                  .then(function (dataUrl) {
                      link = document.createElement('a');
                      link.download = 'invoice.jpeg';
                      link.href = dataUrl;
                      // Comment the below line
                      // link.click();
    });   
</script>

在自定义函数中触发点击事件，如下所示:

<a class="btn" href="" onclick="printFunction()">Click here to print</a>
<script>
    function printFunction(){
        // trigger the click event in printFunction
        link.click();
    }
 </script>

在函数中这样写:

var srciptElement = document.createElement('script');
scriptElement.attr("src",the url of the jquery");
document.getElementsByTagName("BODY")[0].appendChild(scriptElement);
相关文章：