如何使用jQuery / javascript打印包含数据的div

Question

I want to print particular div of a webpage and that div containing some string. 我想打印网页的特定div，并且该div包含一些字符串。 for example: in textbox containing name of the person. 例如：在包含人名的文本框中。

Now when I print page at that time in print preview it's showing textbox only without any string(data). 现在，当我当时在打印预览中打印页面时，它仅显示文本框，而没有任何字符串（数据）。

 function showPopup(divName) { var divToPrint = document.getElementById(divName); var newWin = window.open('', 'Print-Window'); newWin.document.open(); newWin.document.write('<html><body onload="window.print()">' + divToPrint.innerHTML + '</body></html>'); newWin.document.close(); setTimeout(function() { newWin.close(); }, 10); }

 <div class="container"> <form id="service-job-form" name="service-job-form"> <div id="printableArea"> <label for="CustomerId" class="col-sm-4 col-form-label">Customer Name</label> <div class="col-sm-5 input-group"> <input type="text" autocomplete="off" id="CustomerName" name="CustomerName" required data-provide="typeahead" class="typeahead search-query form-control autocomplete" placeholder="Customer Name" /> </div> </div> <div class="form-group row"> <input type="button" class="btn btn-primary" value="Print" id="bodyWrapper" onclick="showPopup('printableArea');" /> </div> </form> </div>

Answer 1

I hope this could help: 我希望这可以帮助：

 function showPopup() { var name = $('#CustomerName').val(); var newWin = window.open('', 'Print-Window'); newWin.document.open(); newWin.document.write('<html><body onload="window.print()">' + name + '</body></html>'); newWin.document.close(); setTimeout(function() { newWin.close(); }, 10); }

Answer 2

If you are getting data from an input field the use .value instead of .innerHTML . 如果要从输入字段获取数据，请使用.value而不是.innerHTML 。 So your code would read: 因此，您的代码将显示为：

newWin.document.write('<html><body onload="window.print()">' + divToPrint.value + '</body></html>');

如何使用jQuery / javascript打印包含数据的div

问题描述

2 个解决方案

解决方案1
0 2018-08-06 11:37:28

解决方案2
0

如何使用jQuery / javascript打印包含数据的div

问题描述

2 个解决方案

解决方案1 0 2018-08-06 11:37:28

解决方案2 0

解决方案1
0 2018-08-06 11:37:28

解决方案2
0