按钮不适用于 html2canvas asp.net

Question

我正在尝试使用 html2canvas 在我的 html 中捕获一个 div 并将其保存到 asp.net 中的 pdf 文件中。有人建议我使用下面的 javascript 代码来实现这一点，但是代码没有在 click 事件上执行？

<script type="text/javascript" src="Scripts/html2canvas.js"></script>
<script type="text/javascript" src="Scripts/html2canvas.min.js"></script>

    document.addEventListener("DOMContentLoaded", function (event) {
            document.getElementById("Print_Button").addEventListener("OnItemCommand", (function () {
                html2canvas(document.getElementById("form1"), {
                    onrendered: function (canvas) {
                        cvs = canvas.toDataURL('image/png');
                        cvs.save("mcn.pdf")
                    }
                });
            }));


    });

按钮的属性是：

ID="Print_Button" runat="server" Text="Print MCN" type ="input"

Answer 1

ASP.NET Web 窗体中的默认行为是任何带有 runat="server" 的控件的 id 都会被转换以确保不存在 ID 冲突。因此，您的按钮和表单可能没有您在代码中使用的 id:s（除非它们将 ClientIdMode 设置为静态）

如果有问题，首先在表单和按钮上将 ClientIdMode 设置为静态。

这是我在测试时使用的代码（使用 jQuery），对我来说效果很好：

<script type="text/javascript" src="scripts/html2canvas.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.3/jspdf.debug.js"></script>
<script>


    $(function() {
            $("#Print_Button").on("click", function () {
                html2canvas($("#form1"), {
                    onrendered: function (canvas) {
                        imgData = canvas.toDataURL('image/png');
                        var pdf = new jsPDF();

                        pdf.addImage(imgData, 'PNG', 0, 0);
                        var download = document.getElementById('download');

                        pdf.save("download.pdf");
                    }
                });
            });


    });
</script>

我删除了 cvs.save("...")-row，因为您获得的数据是一个字符串，包含一个 base64 编码的图像，例如“data:image/png;base64,iVBORw0KGgo....== ”。所以它没有保存方法。 但是通过使用 jspdf-library，您仍然可以在客户端将其保存为 PDF

Answer 2

调用 htmlcanvasdownload() 来监听事件

document.addEventListener("DOMContentLoaded", function (event) {
    htmlcanvasdownload();
    function htmlcanvasdownload() {
        document.getElementById("Print_Button").addEventListener("OnItemCommand", (function () {
            html2canvas(document.getElementById("form1"), {
                onrendered: function (canvas) {
                    cvs = canvas.toDataURL('image/png');
                    cvs.save("mcn.pdf")
                }
            });
        }));

    }
});

好的，你编辑了你的问题，接下来听点击，

document.getElementById("Print_Button").addEventListener("click", function(){
   //..process canvas
   return false;//stop event going to server
});

检查 html2canvas 是否有效：

html2canvas(document.getElementById("form1"), {
        onrendered: function (canvas) {
            var cvs = canvas.toDataURL('image/png')
            //this emage need to be posted to server 
            //var file=new Blob([new Uint8Array(array)], {type: 'image/png'});
            // with ajax or with form post
            // as blob to a input type file or as imput type text where you send image/png as base64

            //this will open your image
            window.open(cvs);
        },
        width:320,
        height:220
    });