Javascript распечатать веб-форму с включенным пользовательским вводом

Question

У меня есть простая веб-форма HTML, которую я хотел бы, чтобы пользователи заполняли, а затем печатали.

Я нашел похожий вопрос, который показал с Javascript, как печатать конкретный контент на странице здесь: Как я могу вставить кнопку "Печать", которая печатает форму на веб-странице

Принятый ответ действительно печатает содержимое внутри 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>

КОДЕПЕН ДЕМО

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, когда тестировал его, поэтому удалил опцию и не смог использовать document.write из-за безопасности jsfiddle.

однако, чтобы собрать это вместе:

 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 с вашей стороны попытаться это сделать.