html2canvas將無法在asp.net工作

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。您訂閱空onclick事件而不是按鈕。如果你希望你的代碼工作沒有jQuery的你應該改變$('#')到javascricpt getbyIddocument.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) 
     } 
    }); 
    }); 
});