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>

图片被多次下载

1 个答案: