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은 다음과 같습니다 $가 JQuery selector.입니다

<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를 사용하지 않는 경우 $('#Print_Button')은 null을 반환합니다. null을 클릭하면 버튼 대신 이벤트가 발생합니다. 코드가 JQuery와없이 작동 당신이 원하는 경우에 당신은, 내가 나를 위해이 개정 주셔서 감사합니다, 여러분의 코드가

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) 
     } 
    }); 
    }); 
});