圖像被下載多次

Question

我正在嘗試將頁面的某些區域下載為圖像。 為此，我使用了html2canvas.js。 那東西運行正常，但是我的問題是當我單擊下載鏈接圖像時，它被下載了多次，除非我關閉頁面，否則它不會停止。 我不知道我在哪里錯，為什么會這樣。 我在這里發布我的代碼，請幫幫我。

下載圖像的功能。

 <script>
    function genImageFile() {
                html2canvas($('.pvtRendererArea')[0]).then(function (canvas) {
                    if (navigator.userAgent.indexOf("MSIE ") > 0 ||
                        navigator.userAgent.match(/Trident.*rv\:11\./)) {
                        var blob = canvas.msToBlob();
                        window.navigator.msSaveBlob(blob, 'Test file.png');
                    } else {
                        $('#mytest').attr('href', canvas.toDataURL("image/png"));
                        $('#mytest').attr('download', $('#title').text() + '.png');
                        $('#mytest')[0].click();
                    }
                }
                )
            };
        </script>

從我調用該函數的HTML：

<a onclick="genImageFile()" id="mytest" value="Image View" class="button"><br> PNG </a>

Answer 1

您可以使用以下代碼

<script>
function genImageFile() {
            html2canvas($('.pvtRendererArea')[0]).then(function (canvas) {
                if (navigator.userAgent.indexOf("MSIE ") > 0 ||
                    navigator.userAgent.match(/Trident.*rv\:11\./)) {
                    var blob = canvas.msToBlob();
                    window.navigator.msSaveBlob(blob, 'Test file.png');
                } else {
                    var link = document.createElement('a');
                    link.download = $('#title').text() + '.png';
                    link.href = canvas.toDataURL("image/png");
                    link.click();
                }
            }
            )
        };
    </script>