Question

我被告知下面用于jquery的代码看起来很好但我仍然感到困惑，为什么我不能让html2canvas工作。单击按钮时，我没有得到任何响应。我已经尝试了按钮的其他方法，他们工作正常。任何人都可以告诉我可能出错的地方吗？

我的jquery是：

 $(document).ready(function () {
     $('#Print_Button').click(function () {
         html2canvas($('#form1'),{
            onrendered: function(canvas) {
            cvs = canvas.toDataURL('image/png');
            window.open(cvs)
        }
    });
    });
 });

，HTML是：

<table id="table_1"">
    <tr>
        <td class="auto-style12">MCN Ref No.</td>
        <td>
            <asp:TextBox ID="TextBox1" ReadOnly="True" runat="server" Width="116px"></asp:TextBox>
        </td>
    </tr>
    <tr>
        <td class="auto-style12">Date:</td>
        <td>
            <asp:TextBox ID="TextBox4" ReadOnly="True" runat="server" Width="116px"></asp:TextBox>
        </td>
    </tr>
    <tr>
        <td class="auto-style12">Time:</td>
        <td>
            <asp:TextBox ID="TextBox5" runat="server" ReadOnly="True" Width="116px"></asp:TextBox>
        </td>
    </tr>
</table>

<img alt="Logo" class="auto-style10" src="logo.png" /><div id ="form">
<table id="main_table" class = "table table-bordered">
    <tr>
        <td class="auto-style8">SITE:</td>
        <td class="auto-style9">
            <asp:TextBox ID="TextBox6" runat="server" OnTextChanged="TextBox6_TextChanged" ReadOnly="True"></asp:TextBox>
        </td>
        <td class="auto-style4">HAULIER(CARRIER):</td>
        <td>
            <asp:TextBox ID="TextBox10" runat="server" ReadOnly="True"></asp:TextBox>
        </td>
    </tr>
    <tr>
        <td class="auto-style8">DESCRIPTION OF WASTE:</td>
        <td class="auto-style9">
            <asp:TextBox ID="TextBox7" runat="server" ReadOnly="True"></asp:TextBox>
        </td>
        <td class="auto-style4">DESTINATION:</td>
        <td>
            <asp:TextBox ID="TextBox9" runat="server" ReadOnly="True"></asp:TextBox>
        </td>
    </tr>
    <tr>
        <td class="auto-style8">EWC CODE:</td>
        <td class="auto-style9">
            <asp:TextBox ID="TextBox8" runat="server" ReadOnly="True"></asp:TextBox>
        </td>
        <td class="auto-style4">VEHICLE REGISTRATION:</td>
        <td>
            <asp:TextBox ID="TextBox11" runat="server" ReadOnly="True"></asp:TextBox>
        </td>
    </tr>
    <tr>
        <td class="auto-style8">QUANTITY:</td>
        <td class="auto-style9">
            <asp:TextBox ID="TextBox13" runat="server" ReadOnly="True"></asp:TextBox>
        </td>
        <td class="auto-style4">DRIVER NAME:</td>
        <td>
            <asp:TextBox ID="TextBox12" runat="server" ReadOnly="True"></asp:TextBox>
        </td>
    </tr>
    <tr>
        <td class="auto-style8">NOMINAL WEIGHT:</td>
        <td class="auto-style9">
            <asp:TextBox ID="TextBox15" runat="server" ReadOnly="True"></asp:TextBox>
        </td>
        <td class="auto-style4">SKIP ID:</td>
        <td>
            <asp:TextBox ID="TextBox16" runat="server" ReadOnly="True"></asp:TextBox>
        </td>
    </tr>
    </table>


    <table id="table_2" style="width:30%;">
        <tr>
            <td>DUTY OF CARE:</td>
            <td>
                <asp:TextBox ID="TextBox14" runat="server" OnTextChanged="TextBox14_TextChanged"></asp:TextBox>
            </td>
        </tr>
    </table>
</div>

<p id="tsandcs">

</p>

Answer 1

因为$是JQuery selector.。如果您不使用jquery $('#Print_Button')，则返回 null 。您订阅 null onclick 事件而不是按钮。如果您希望代码在没有jquery的情况下运行，则应将$('#')更改为javascricpt getbyId document.getElementById("")

最后，您的代码必须看起来像

document.addEventListener("DOMContentLoaded", function(event) { 
     document.getElementById("Print_Button").click(function () {
        html2canvas(document.getElementById("form1"),{
           onrendered: function(canvas) {
           cvs = canvas.toDataURL('image/png');
           window.open(cvs)
        }
    });
  });
});

html2canvas在asp.net中不起作用

1 个答案: