Ajax锚点链接触发器不起作用

Question

I am using html2canvas javascript to convert html div to image file. All script are working good and it converts html div to image properly.

But when I am adding response(anchor link) to href and triggering it using ajax it is not triggering anchor link.

Here is my code,

Html code:

<div id="mainDiv">

<h1>Heading H1</h1>
<p>Download Image using ajax and php</p>

</div>

<div>
<a id="download">Download Image</a><br/>
<a id="download-image" href="" download>Download</a>
</div>

Ajax code

<script>

    $('#download').on('click', function () {
html2canvas([document.getElementById('mainDiv')], {
    onrendered: function (canvas) {
        var imagedata = canvas.toDataURL('image/png');
        var imgdata = imagedata.replace(/^data:image\/(png|jpg);base64,/, "");
        //ajax call to save image inside folder
        $.ajax({
            url: 'save_image.php',
            data: {
                   imgdata:imgdata
                   },
            type: 'post',
            success: function (response) {   
               $('#download-image').attr('href', response).trigger('click');
               //$('#downlaod-image').trigger('click');
            }
        });
    }
});
});

</script>

Answer 1

Clicking the link will actually reload your page. It will still execute html2canvas(), but the response from the Ajax call will never be processed, as by that time the page has already been reloaded.

So cancel the default hyperlink action by adding a return false just before the end of the click handler (after the call to html2canvas).