フォームの入力を印刷しようとして髪を引っ張っています。PrintThis、printElement、window.print、および印刷ソリューションの他のすべての反復を試しましたが、機能しません。
背景として、これは 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:Library@gmail.com?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>
(SiteVisit はフォームの ID です)
私はそれがきれいではないことを知っています。私は進行中の作業ですが、どこが間違っているのか教えてください。私の上司は、私がこれを理解するのにかかる時間に不満を持ち始めています