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

我使用 html2canvas javascript </ code>将html div </ code>转换为 image </ code>文件。 所有脚本都运行良好,它可以正确地将html div转换为图像。 </ p>

但是当我将响应(锚链接)添加到 href </ code>并使用ajax触发它时,它不会触发锚链接。</ p>

这是我的代码,</ p>

Html代码:</ strong> </ p>

 &lt; div id =“mainDiv  “&gt; 

&lt; h1&gt;标题H1&lt; / h1&gt;
&lt; p&gt;使用ajax和php&lt; / p&gt;

&lt; / div&gt;

&lt; div&gt;
&lt; a下载图像 id =“download”&gt;下载图片&lt; / a&gt;&lt; br /&gt;
&lt; a id =“download-image”href =“”下载&gt;下载&lt; / a&gt;
&lt; / div&gt;
< / code> </ pre>

Ajax代码</ strong> </ p>

 &lt; script&gt; 

$('#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调用将图像保存在文件夹
$ .ajax中( {
url:'save_image.php',
data:{
imgdata:imgdata
},
type:'post',
success:function(response){
$('#download-image')。attr('href',response).trigger('click' );
// $('#downlaod-image').trigger('click');
}
});
}
});
});

&lt; / 脚本&gt;
</ code> </ pre>
</ div>

展开原文

原文

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>

1个回答



点击该链接实际上会重新加载您的页面。 它仍将执行 html2canvas()</ em>,但是Ajax调用的响应将永远不会被处理,因为那时页面已经被重新加载。</ p>

所以 通过在点击处理程序结束之前(在调用 html2canvas </ em>之后)添加 return false </ code>来取消默认超链接操作。</ p>
</ div>

展开原文

原文

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

dqz13288
dqz13288 如果你替换.trigger('click')怎么办? 用.get(0).click();?
3 年多之前 回复
douyuan1752
douyuan1752 是的,第二个锚链接的href由ajax填充。
3 年多之前 回复
dongxiji0687
dongxiji0687 第二个元素是否填充了href?
3 年多之前 回复
douyi5961
douyi5961 我仍然面临同样的错误。 它没有响应触发功能。
3 年多之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问
相关内容推荐