1
我拉我的头发试图让我的表单的输入打印。我已经尝试了PrintThis，printElement，window.print和打印解决方案的每一次迭代，并且无法使其正常工作。用jquery printThis打印表格
作为背景 - 这是一个使用jQuery，jqmobile，html5，css3的多页表单。它有多种类型的输入，包括多选，无线电，文本等。我想打印所有的输入，但不一定需要表单布局。
这里是我的代码示例，因为它是非常长期且深入的我只会把一个样本：
头段
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<link rel="stylesheet" type="text/css" href="form.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"> </script>
<script src="jquery.maskedinput.min.js" type="text/javascript"></script>
<script type="text/javascript" src="json2.min.js"></script>
<script type="text/javascript" src="jquery.printElement.min.js"></script>
<!--[if lt IE 9]>
<script type="text/javascript" src="flashcanvas.js"></script>
<![endif]-->
<script>
$(document).bind('mobileinit', function() {
$.mobile.page.prototype.options.addBackBtn= true;
$.mobile.page.prototype.options.backBtnText="Back";
$.mobile.page.prototype.options.backBtnIcon="arrow-1";
$.mobile.selectmenu.prototype.options.nativeMenu = false;
})
</script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<script>
function formSubmit()
{
document.getElementById("SiteVisit").action = "mailto:[email protected]?cc=" + document.getElementById("RelBy1").value + "&subject=Site%20Visit%20Form";
document.getElementById("SiteVisit").submit();
}
</script>
<title>Site Visit Form</title>
<meta name="HandheldFriendly" content="True" />
<meta name="MobileOptimized" content="320" />
<meta name="Viewport" content="width-device-width, initial-scale'1.0" />
<meta name="apple-mobile-web-app-capable" content="yes">
</head>
身体的部分
<header><h1>Site Visit Form</h1></header>
<form method="post" enctype="text/plain" name="SiteVisit" id="SiteVisit">
<div data-role="page" id="chapter3">
<div data-role="header">
<h1>Field Assessments</h1>
</div><!--/header-->
<script>
$(document).ready(function() {
$("input[name='ProjectID']").on('change',function(){
var val = $(this).val();
var h = $("#chapter3").find("div[data-role='header']").find("h1");
$(h).html($(h).html() + " " + val);
});
})
</script>
<div data-role="content" id="Field">
<fieldset><div class="_100">
<div class="_20">Time:<input type="time" name="time2"> </div>
<div class="_20">Water Temp:<input type="text" name="temp"> </div>
<div class="_20" data-role="controlgroup" data-mini="true" data-type="horizontal">
<label><br /></label>
<input type="radio" name="temp" id="radC" value="C">
<label for="radC">C°</label>
<input type="radio" name="temp" id="radF" value="F">
<label for="radF">F°</label> </div>
<div class="_20">Air Temp:<input type="text" name="air"> </div>
<div class="_20" data-role="controlgroup" data-mini="true" data-type="horizontal">
<label><br /></label>
<input type="radio" name="Atemp" id="radAC" value="C">
<label for="radAC">C°</label>
<input type="radio" name="Atemp" id="radAF" value="F">
<label for="radAF">F°</label> </div></div>
<div class="_100">
<div class="_25">SC (uS/cm):<input type="text" name="SC"> </div>
<div class="_25">pH:<input type="text" name="ph"> </div>
<div class="_25">DO (mg/L):<input type="text" name="DO"></div>
<div class="_25">DO Saturation %:<input type="text" name="sat"> </div>
</div>
<div class="_100">
<div class="_33">Bar Pressure (mm/Hg):<input type="text" name="pressure"></div>
<div class="_33">Turbidity (NTU):<input type="text" name="turbidity"></div>
<div class="_33">Turbidity<select id="Turb" data-iconpos="left" data-icon="grid">
<option value = "0"> </option>
<option value = "Clear">Clear</option>
<option value = "Slight">Slight</option>
<option value = "Turbid">Turbid</option>
<option value = "Opaque">Opaque</option>
</select></div>
</div>
<div class="_100">
<div class="_30">Flow (cfs):<input type="text" name="flow"></div>
<div data-role="controlgroup" class="_30">
<label for = "chkdry">Dry Bed</label>
<input type = "checkbox" id="chkdry" value="Yes" data-mini="true">
<label for="chkPool">Stranded Pools</label>
<input type="checkbox" id="chkPool" value="Yes" data-mini="true">
</div>
<div class="_40"> <label class=select for=Method>Method</label>
<select id="Method" data-iconpos="left" data-icon="grid">
<option value = "0"> </option>
<option value = "Meter">Meter</option>
<option value = "Doppler">Doppler</option>
<option value = "Float">Float</option>
<option value = "Gage">Gage</option>
<option value = "VE">Visual Estimate</option>
</select></div></div>
</fieldset>
<fieldset>
<div class="_100">
<div class="_50"><Label class=select for=FieldForms>Field Forms</label>
<select id = "FieldForms" multiple name=FieldForms data-iconpos="left" data-icon="grid">
<OPTION>Select all that apply:</OPTION>
<option value = "Aquatic Plant Visual Assessment">Aquatic Plant Visual Assessment</option>
<option value = "Photos">Photos</option>
<option value = "Aquatic Plant Tracking Form">Aquatic Plant Tracking Form</option>
<option value = "Rosgen Form">Rosgen Form</option>
<option value = "NRCS Form">NRCS Form</option>
<option value = "EMAP Forms">EMAP Forms</option>
<option value = "Summary Form">Summary Form</option>
<option value = "Channel Cross-Section">Channel Cross-Section</option>
<option value = "Total Discharge">Total Discharge</option>
</select></div>
<div class="_50"><Label class=select for=DataLoggers>Data Loggers</label>
<select id = "DataLoggers" multiple name=DataLoggers data-iconpos="left" data-icon="grid">
<OPTION>Select all that apply:</OPTION>
<option value = "Temperature">Temperature</option>
<option value = "YSI">YSI</option>
<option value = "TruTrack">TruTrack</option>
<option value = "AquaRods">AquaRods</option>
<option value = "Weather Station">Weather Station</option>
<option value = "MiniDOT">MiniDOT</option>
</select></div></div>
</fieldset></div>
<div data-role="footer" data-id="SVFnav">
<div data-role="navbar">
<ul>
<li><a href="#chapter1"><h4>Site Info</h4></a></li>
<li><a href="#chapter2"><h4>Samples</h4></a></li>
<li><a class="ui-btn-active ui-state-persist"><h4>Field</h4></a></li>
<li><a href="#chapter4"><h4>Comments</h4></a></li>
<li><a href="#chapter5"><h4>Lab Info</h4></a></li>
</ul>
</div></div>
</div>
</body>
</form>
这里是最新的按钮脚本
<script type="text/javascript" src="printThis.js"></script>
<input type="button" id="printThis" onclick="printThis()" data-icon="gear" data-theme="b" value="Print" />
<script>
$(document).ready(function() {
$("#printThis").click(function() {
$('#Site,#Samples,#Field,#Comments').printThis({
debug: true,
importCSS: true,
printContainer: false,
loadCSS: "form.css",
pageTitle: "Site Visit Form",
removeInline: false});
});
});
</script>
（＃Site，＃Samples，＃Field，＃Comments是页面ID）。这会打印表格，但它打印的唯一输入是选择&收音机而不是文本。我需要完整表格中的所有输入。
我也试过以下
<div data-role="header">
<h1>Lab Information</h1>
<input type="button" class="ui-btn-right" id="print" onclick="printElement" data-icon="gear" data-theme="b" value="Print" />
</div><!--/header-->
<script>
$(document).ready(function() {
$("#print").click(function(){
printElement({ printMode: 'popup' });
});
function printElem(options){
$('#SiteVisit').printElement(options);
}
});
</script>
（现场访问是表单的ID）
我知道这是不漂亮，我是一个进展中的工作，但有人可以告诉我我错了。我的老板们开始不满意它花费的时间了。
为什么不让服务器生成一个可打印的版本？ –
它只是不打印？你看到什么行为？ – Richard
我不能使用.asp或.php，PrintThis插件只打印空白字段，它没有选取字段中的值 – pja