1

我正在拉扯头发，试图让我的表格输入打印出来。我已经尝试过 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&#176;</label>
<input type="radio" name="temp" id="radF" value="F">
  <label for="radF">F&#176;</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&#176;</label>
<input type="radio" name="Atemp" id="radAF" value="F">
  <label for="radAF">F&#176;</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）

我知道它不漂亮，我正在进行中，但有人可以告诉我哪里出错了。我的老板开始对我花时间解决这个问题感到不满

4

1 回答 1

1

我自己刚刚找到了答案。

在 StackOverflow 上查看此页面：

有没有办法在 jQuery 或 javascript 中克隆表单字段值？

您需要触摸这些值，使它们在“值”属性中显式。所以你需要直接修改 printThis 插件。

从 printThis 插件的 1.3 版开始，我在添加标题的行（第 92 行）之后添加了以下行：

$('input:text').each(function() {
    $(this).attr('value', $(this).val());
});

Then, I changed the line that appends the code (when the option printContainer is set to false), on line #99:

$doc.find("body").append($(this).html());

变成

$doc.find("body").append($(this).clone(true));

这确保传递的数据包含值。

调用 printThis 时，请务必在选项中将 printContainer 设置为 false！

这应该可以解决您的问题。可能为时已晚，无法帮助您，但至少应该可以帮助下一个人。

于 2014-02-10T22:50:26.673 回答