window.print不打印输入元素的文本
[英]window.print is not printing text of input element
问题描述
I know this question was asked before. 
我知道这个问题曾被问过。 But I could not found a sure solution for it yet. 但是我还没有找到一个确定的解决方案。 Though I tried all the previous solutions, it doesn't work. 尽管我尝试了所有先前的解决方案，但均不起作用。
I am doing some coding on AngularJS and I have to print the form data once it is filled. 我正在AngularJS上进行一些编码，一旦填充，就必须打印表单数据。 However when I print it, all the form fields are showing empty in the printout. 但是，当我打印它时，所有表单字段在打印输出中都显示为空。 Somewhere it is suggested to handle the issue using CSS with the media query below. 建议在某些地方使用CSS和下面的媒体查询来解决此问题。 But still no success. 但是仍然没有成功。 So what could be the possible solution? 那么可能的解决方案是什么？
Media query: 媒体查询：
"@media print {
@page { margin: 0; }
body {display:none}
}"
JS: 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: 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>
2 个解决方案
解决方案1
0 2017-04-19 20:58:05
When you call document.getElementById(divName).innerHTML , you're retrieving the page's source HTML. 调用document.getElementById(divName).innerHTML ，您正在检索页面的源HTML。 However, input values don't get written to the source HTML. 但是，输入值不会写入源HTML。 Instead, for any element, you need to call document.getElementById(inputName).value to retrieve whatever you put there. 相反，对于任何元素，您都需要调用document.getElementById(inputName).value来检索放置在其中的任何内容。
If opening the new window isn't necessary, you can use window.print() on the current window and use @media print {} css to specify how you want it to appear. 如果不需要打开新窗口，则可以在当前窗口上使用window.print（）并使用@media print {} css来指定希望它的显示方式。 (You can use this syntax to create a noprint css class that will hide anything you don't want to appear.) This is likely the much easier solution depending on your use case. （您可以使用此语法创建一个noprint css类，该类将隐藏您不想显示的任何内容。）根据您的用例，这可能是更简单的解决方案。
Otherwise, I believe you'll have to manually extract each input value and concatenate it into your HTML. 否则，我相信您将必须手动提取每个输入值并将其连接到HTML中。
解决方案2
0 2017-04-19 21:01:13
When the values are entered into the inputs, those are not stored in the HTML markup. 将值输入到输入中后，这些值将不会存储在HTML标记中。 Thus the .innerHTML property of the element being referenced won't contain those values. 因此，被引用元素的.innerHTML属性将不包含那些值。
One solution is to use ngValue for each input with the same model name as the controller property bound to ng-model . 一种解决方案是对每个输入使用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" />
That will simulate value property being set to the value entered by the user. 这将模拟value属性设置为用户输入的值。
Be aware that if there is no value entered by the user, the placeholder text will appear in the spot of the input. 请注意，如果用户没有输入任何值，则占位符文本将出现在输入位置。 If that is an issue, perhaps Javascript code could be added to hide inputs with no value, or else maybe a different solution is needed. 如果这是一个问题，则可以添加Javascript代码以隐藏无值的输入，否则可能需要其他解决方案。
See it demonstrated in this codepen . 看到它在此Codepen中演示了。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.