我已经通过某人的帮助获取了这段代码,并希望在点击#print_button
后执行该代码。出于某种原因,我不能让它工作,我不知道我哪里出错了?
这是jquery:
$(document).ready(function () {
$('#Print_Button').click(function () {
var html2obj = html2canvas($('#form1'));
var queue = html2obj.parse();
var canvas = html2obj.render(queue);
var img = canvas.toDataURL();
window.open(img);
});
});
以及我的按钮的HTML属性:
id="Print_Button" runat="server" value="Print"
任何人都可以建议我哪里出错吗?
这是正文的完整html:
<form id="form1" runat="server">
<div class="header">
<strong class="auto-style11">
MCN PRINTOUT
</strong>
<img alt="Veolia Logo" class="logo" src="logo.png" />
<input type="button" id="Print_Button" value="click me"/>
</div>
<div id="nav">
<ul>
<li><a href="login.aspx">Home</a></li>
<li><a href="MCNForm.aspx">MCN Entry</a></li>
<li><a href="Search.aspx">MCN Search</a></li>
</ul>
</div>
<div id ="main">
<p id ="main_header"></p>
<p id ="mcn">DISPOSAL ADVICE/TRANSFER NOTE</p>
<p id="address">
</p>
<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>
</div>
<div class="footer">
<p id ="footer_menu">Menu</p>
<p id="copyright">© 2017 ...</p>
</div>
</form>
答案 0 :(得分:0)
使用输入类型按钮
$(document).ready(function () {
$('#Print_Button').click(function () {
alert("Clicked");
//your code here
});
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" id="Print_Button" value="click me"/>
&#13;