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