window.print不打印输入元素的文本

Question

我知道这个问题曾被问过。 但是我还没有找到一个确定的解决方案。 尽管我尝试了所有先前的解决方案，但均不起作用。

我正在AngularJS上进行一些编码，一旦填充，就必须打印表单数据。 但是，当我打印它时，所有表单字段在打印输出中都显示为空。 建议在某些地方使用CSS和下面的媒体查询来解决此问题。 但是仍然没有成功。 那么可能的解决方案是什么？

媒体查询：

"@media print { 
@page { margin: 0; }
body {display:none}     
}"

JS：

    $scope.printDiv = function(divName) {

    var printContents = document.getElementById(divName).innerHTML;

    var popupWin = window.open('', '_blank', 'width=300,height=300');
    popupWin.document.open();
    popupWin.document.write('<html><head><link rel="stylesheet" href="sample.css" /></head><body onload="window.print()">' + printContents + '</body></html>');
    popupWin.document.close();      
}

HTML：

<div>
<div id='printable'>
<p class="address">ADDRESS:<br/>
<input type="text" ng-model="Address_line1" maxlength="40" placeholder="Address line 1" style="border:1px solid white" width="60"/> <br/>
<input type="text" ng-model="Address_line2" maxlength="30" placeholder="Address line 2" style="border:1px solid white" /> <br/>
<input type="text" ng-model="Address_line3" maxlength="30" placeholder="Address line 3" style="border:1px solid white" /> <br/>
<input type="text" ng-model="Address_line4" maxlength="30" placeholder="Address line 4" style="border:1px solid white" />
<br/>
<input type="text" ng-model="Address_line5" maxlength="30" placeholder="Address line 5" style="border:1px solid white" />
<br/>

</p>
</div>
<button style="margin:auto;display:block;" ng-click="printDiv('printable');">Print</button>
</div>

Answer 1

调用document.getElementById(divName).innerHTML ，您正在检索页面的源HTML。 但是，输入值不会写入源HTML。 相反，对于任何元素，您都需要调用document.getElementById(inputName).value来检索放置在其中的任何内容。

如果不需要打开新窗口，则可以在当前窗口上使用window.print（）并使用@media print {} css来指定希望它的显示方式。 （您可以使用此语法创建一个noprint css类，该类将隐藏您不想显示的任何内容。）根据您的用例，这可能是更简单的解决方案。

否则，我相信您将必须手动提取每个输入值并将其连接到HTML中。

Answer 2

将值输入到输入中后，这些值将不会存储在HTML标记中。 因此，被引用元素的.innerHTML属性将不包含那些值。

一种解决方案是对每个输入使用ngValue ，每个输入具有与绑定到ng-model的控制器属性相同的模型名称。

<input ng-value="Address_line1" type="text" ng-model="Address_line1" maxlength="40" placeholder="Address line 1" style="border:1px solid white" width="60"/><br />
<input ng-value="Address_line2" type="text" ng-model="Address_line2" maxlength="30" placeholder="Address line 2" style="border:1px solid white" /> <br/>
<input ng-value="Address_line3" type="text" ng-model="Address_line3" maxlength="30" placeholder="Address line 3" style="border:1px solid white" /> <br/>
<input ng-value="Address_line4" type="text" ng-model="Address_line4" maxlength="30" placeholder="Address line 4" style="border:1px solid white" /> <br/>
<input ng-value="Address_line5" type="text" ng-model="Address_line5" maxlength="30" placeholder="Address line 5" style="border:1px solid white" />

这将模拟value属性设置为用户输入的值。

请注意，如果用户没有输入任何值，则占位符文本将出现在输入位置。 如果这是一个问题，则可以添加Javascript代码以隐藏无值的输入，否则可能需要其他解决方案。

看到它在此Codepen中演示了。

window.print不打印输入元素的文本

问题描述

媒体查询：

JS：

HTML：

2 个解决方案

解决方案1
0 2017-04-19 20:58:05

解决方案2
0 2017-04-19 21:01:13

window.print不打印输入元素的文本

问题描述

媒体查询：

JS：

HTML：

2 个解决方案

解决方案1 0 2017-04-19 20:58:05

解决方案2 0 2017-04-19 21:01:13

解决方案1
0 2017-04-19 20:58:05

解决方案2
0 2017-04-19 21:01:13