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代码来隐藏没有值的输入，否则可能需要一个不同的解决方案。

在this codepen中看到它。

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

媒体查询：

JS：

HTML：

2 个答案: