Events javascript-onclick（）需要两次单击才能触发事件

我的问题是，当第一次触发

onclick（）

时，什么都不会发生，但当第二次单击时，代码会被执行

onclick（）

应将

转换为png图像文件并保存到计算机

HTML（TableDay函数指的是我编写的一个函数，它基本上使创建表更容易）：

到底发生了什么？我如何使html代码中的

引用只需单击一次

<div id="TableDiv">
<table id="Table">
<tr>
<th>Dag\Uur</th><th>1</th><th>2</th><th>3</th><th>4</th><th>5</th><th>6</th><th>7</th><th>8</th><th>9</th>
</tr>
<?php
TableDay("Maandag",1);
TableDay("Dinsdag",10);
TableDay("Woensdag",19);
TableDay("Donderdag",28);
TableDay("Vrijdag",37);
?>
</table>
</div>
<a id="Image" href="##" onclick="printTable()">Download</a>

<script>
var element = $("#TableDiv"); // global variable
var getCanvas; // global variable

function printTable() {
    html2canvas(element, {
    onrendered: function (canvas) {
        getCanvas = canvas;
    }});

    var imgageData = getCanvas.toDataURL("image/png");
    // Now browser starts downloading it instead of just showing it
    var newData = imgageData.replace(/^data:image\/png/, "data:application/octet-stream");
    $("#Image").attr("download", "Rooster.png").attr("href", newData);
}
</script>