包含用户输入的 Javascript 打印 Web 表单

Question

我有一个简单的 HTML 网络表单，我想让用户填写然后打印。

我发现了一个类似的问题，该问题显示了 Javascript 如何在此处打印页面上的特定内容： How can I insert a Print button that prints a form in a webpage

接受的答案确实会打印 div 内的内容。但是，它不会打印表单的任何用户输入。它只是打印一个没有输入的空白​​表格。这是我的例子

<div id="print-content"><form>
<table width="100%">
<tbody>
<tr>
<td><label>First Name</label></td>
<td><input name="First Name" maxlength="255" type="text" /></td>
</tr>
<tr>
<td><label>Last Name</label></td>
<td><input name="Last Name" maxlength="255" type="text" /></td>
</tr>
<tr>
<td><label>Street Address</label></td>
<td><input name="Street Address" maxlength="255" type="text" /></td>
</tr>
<tr>
<td><label>City</label></td>
<td><input name="City" maxlength="255" type="text" /></td>
</tr>
<tr>
<td><label>State</label></td>
<td><input name="State" maxlength="255" type="text" /></td>
</tr>
<tr>
<td><label>Zip Code</label></td>
<td><input name="Zip Code" maxlength="255" type="text" /></td>
</tr>
<tr>
<td><label>Phone Number</label></td>
<td><input name="Phone Number" maxlength="255" type="text" /></td>
</tr>
<tr>
<td><label>E-Mail Address</label></td>
<td><input name="Email Address" maxlength="255" type="text" /></td>
</tr>
<tr>
<td colspan="2"><label>Description of item(s) to be serviced</label><br /><textarea name="Items" type="text"></textarea></td>
</tr>
<tr>
<td colspan="2"><label>Description of Problem(s)</label><br /><textarea name="Problems" type="text"></textarea></td>
</tr>
<tr>
<td colspan="2"><label>Any Special Notes</label><br /><textarea name="Notes type=" text=""></textarea></td>
</tr>
</tbody>
</table>
<input type="button" onclick="printDiv('print-content')" value="print a div!" /></form></div>


<script type="text/javascript">// <![CDATA[
function printDiv(divName) {
 alert('Click Here To Print This Form');
 var printContents = document.getElementById(divName).innerHTML;
 w=window.open();
 w.document.write(printContents);
 w.print();
 w.close();
}
// ]]></script>

关于如何更改此脚本以便它也能在表单中打印用户输入的任何想法？谢谢！

Answer 1

我已经从您发布的链接中重新创建了代码并进行了一些更改，基本上它会抓取所有输入名称和值并重新创建一个表格来打印它们，即：

<div id="print-content"><form>
<table width="100%">
<tbody>
<tr>
<td><label>First Name</label></td>
<td><input name="First Name" maxlength="255" type="text" /></td>
</tr>
<tr>
<td><label>Last Name</label></td>
<td><input name="Last Name" maxlength="255" type="text" /></td>
</tr>
<tr>
<td><label>Street Address</label></td>
<td><input name="Street Address" maxlength="255" type="text" /></td>
</tr>
<tr>
<td><label>City</label></td>
<td><input name="City" maxlength="255" type="text" /></td>
</tr>
<tr>
<td><label>State</label></td>
<td><input name="State" maxlength="255" type="text" /></td>
</tr>
<tr>
<td><label>Zip Code</label></td>
<td><input name="Zip Code" maxlength="255" type="text" /></td>
</tr>
<tr>
<td><label>Phone Number</label></td>
<td><input name="Phone Number" maxlength="255" type="text" /></td>
</tr>
<tr>
<td><label>E-Mail Address</label></td>
<td><input name="Email Address" maxlength="255" type="text" /></td>
</tr>
<tr>
<td colspan="2"><label>Description of item(s) to be serviced</label><br /><textarea name="Items" type="text"></textarea></td>
</tr>
<tr>
<td colspan="2"><label>Description of Problem(s)</label><br /><textarea name="Problems" type="text"></textarea></td>
</tr>
<tr>
<td colspan="2"><label>Any Special Notes</label><br /><textarea name="Notes type=" text=""></textarea></td>
</tr>
</tbody>
</table>
<input type="button" onclick="printDiv('print-table')" value="print a div!" /></form></div>

</div>

<script>
function printDiv(divName) {
 //alert('s');
 var printContents = '<div id="print-content"><form><table width="30%"><tbody>';
  var inputs, index;

inputs = document.getElementsByTagName('input');
for (index = 0; index < inputs.length - 1; ++index) {

   var fieldName = inputs[index].name;
   var fieldValue = inputs[index].value;

  printContents +='<tr><td><label>'+fieldName+'</label></td>';
  printContents +='<td>'+fieldValue+'</td></tr>';
}

var z = 8; // if you had more labels remeber to change this value 
inputs = document.getElementsByTagName('textarea');
for (index = 0; index < inputs.length; ++index) {

   //var fieldName = inputs[index].name;
    var fieldName = document.getElementsByTagName('label')[z].textContent;
   var fieldValue = inputs[index].value;

  printContents +='<tr><td colspan="2"><label>'+fieldName+'</label><br>'+fieldValue+'</td></tr>';
++z;
}

   printContents +='</tbody></table>';

 w=window.open();
 w.document.write(printContents);
 w.print();
 w.close();
}
</script>

CODEPEN DEMO

Answer 2

这是一个小提琴：http://jsfiddle.net/wqf7e07u/1/

function printDiv(divName) {
var inputContents;
alert('Click Here To Print This Form');
inputContents = "";
var input = document.getElementsByTagName("input");
for (i = 0; i < (input.length -1); i++) {
// notice that it's input.length -1, because we don't want the 
// submit button's value to display. 

    inputContents += input[i].name + ": " + input[i].value + "\n";
}
var input = document.getElementsByTagName("textarea");
 for (i = 0; i < (input.length -1); i++) {
    inputContents += input[i].name + " " + input[i].value + "\n";
}
alert(inputContents);
var printContents = document.getElementById(divName).innerHTML;
}

请记住，这只是演示如何获取输入。当您点击打印按钮时，它将显示字段名称和文本。

我在测试时无法使用 .print，因此我删除了该选项，并且由于 jsfiddle 的安全性，我无法使用 document.write。

然而，把它放在一起：

 function printDiv(divName) {
 var inputContents = "";
 alert('Click Here To Print This Form');

// loop through all input elements and get their values, place
// them in inputcontents, with name and value, one on each line.

var input = document.getElementsByTagName("input");
for (i = 0; i < (input.length -1); i++) {
    inputContents += input[i].name + ": " + input[i].value + "\n";
}

// loop through all textarea elements and get their values, place
// them in inputcontents, with name and value, one on each line.

var input = document.getElementsByTagName("textarea");
 for (i = 0; i < (input.length -1); i++) {
    inputContents += input[i].name + ": " + input[i].value + "\n";
}

var printContents = inputContents;
w=window.open();
w.document.write(printContents);
w.print();
w.close();
}

Answer 3

@media print{} 或 @import 'media.css' print; 在这种情况下可能是你的朋友。另一种选择是，由于您具有 CORS 访问权限，因此您可以将表单单独放在单独的页面上，然后在您想要查看的页面上使用 iframe，参考：

var fr = frames[0], iframeWin = fr.contentWindow || fr.contentDocument.defalutView;
iframeWin.print();

否则，表单将不得不占据整个页面，因为其他所有内容都会打印出来。当然，如果您不是真的在谈论打印，而只是在页面上呈现用户输入，我们没有看到您的 JavaScript 努力尝试这样做。