如何在JavaScript中打印部分呈现的HTML页面？
JavaScript代码window.print（）可以打印当前的HTML页面。
如果我在HTML页面中有div（例如，从ASP.NET MVC视图呈现的页面），那么我只想打印div。
有没有任何jQuery 不显眼的JavaScript或普通的JavaScript代码来实现这个要求？
更清楚的是，假设呈现的HTML页面如下所示：
<html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head" runat="server"> <title> <asp:ContentPlaceHolder runat="server" ID="TitleContent" /> </title> </head> <body> <div id="div1" class="div1">....</div> <div id="div2" class="div2">....</div> <div id="div3" class="div3">....</div> <div id="div4" class="div4">....</div> <div id="div4" class="div4">....</div> <p> <input id="btnSubmit" type="submit" value="Print" onclick="divPrint();" /> </p> </body> </html> 然后我想点击打印button，只打印div3。
我会这样做：
<html> <head> <title>Print Test Page</title> <script> printDivCSS = new String ('<link href="myprintstyle.css" rel="stylesheet" type="text/css">') function printDiv(divId) { window.frames["print_frame"].document.body.innerHTML=printDivCSS + document.getElementById(divId).innerHTML; window.frames["print_frame"].window.focus(); window.frames["print_frame"].window.print(); } </script> </head> <body> <h1><b><center>This is a test page for printing</center></b><hr color=#00cc00 width=95%></h1> <b>Div 1:</b> <a href="javascript:printDiv('div1')">Print</a><br> <div id="div1">This is the div1's print output</div> <br><br> <b>Div 2:</b> <a href="javascript:printDiv('div2')">Print</a><br> <div id="div2">This is the div2's print output</div> <br><br> <b>Div 3:</b> <a href="javascript:printDiv('div3')">Print</a><br> <div id="div3">This is the div3's print output</div> <iframe name="print_frame" width="0" height="0" frameborder="0" src="about:blank"></iframe> </body> </html>
沿着一些build议，你需要至less做以下几点：
- 通过JavaScriptdynamic加载一些CSS
- 编写一些特定于打印的CSS规则
- 通过JavaScript应用你喜欢的CSS规则
一个示例CSS可以像这样简单：
@media print { body * { display:none; } body .printable { display:block; } }
您的JavaScript只需要将“可打印”类应用到您的目标div，并且在打印发生时它将是唯一可见的（只要没有其他冲突的CSS规则 – 一个单独的练习）。
<script type="text/javascript"> function divPrint() { // Some logic determines which div should be printed... // This example uses div3. $("#div3").addClass("printable"); window.print(); } </script>
打印发生后，您可能需要select从目标中删除该类，并且/或者在打印发生后移除dynamic添加的CSS。
下面是一个完整的工作示例，唯一的区别是打印CSS不是dynamic加载的。 如果你希望它真的不显眼，那么你需要像这个答案一样dynamic加载CSS 。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <title>Print Portion Example</title> <style type="text/css"> @media print { body * { display:none; } body .printable { display:block; } } </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> </head> <body> <h1>Print Section Example</h1> <div id="div1">Div 1</div> <div id="div2">Div 2</div> <div id="div3">Div 3</div> <div id="div4">Div 4</div> <div id="div5">Div 5</div> <div id="div6">Div 6</div> <p><input id="btnSubmit" type="submit" value="Print" onclick="divPrint();" /></p> <script type="text/javascript"> function divPrint() { // Some logic determines which div should be printed... // This example uses div3. $("#div3").addClass("printable"); window.print(); } </script> </body> </html>
试试这个JavaScript代码：
function printout() { var newWindow = window.open(); newWindow.document.write(document.getElementById("output").innerHTML); newWindow.print(); }
<div id="invocieContainer"> <div class="row"> ...Your html Page content here.... </div> </div> <script src="/Scripts/printThis.js"></script> <script> $(document).on("click", "#btnPrint", function (e) { e.preventDefault(); e.stopPropagation(); $("#invocieContainer").printThis({ debug: false, // show the iframe for debugging importCSS: true, // import page CSS importStyle: true, // import style tags printContainer: true, // grab outer container as well as the contents of the selector loadCSS:"/Content/bootstrap.min.css", // path to additional css file - us an array [] for multiple pageTitle: "", // add title to print page removeInline: false, // remove all inline styles from print elements printDelay: 333, // variable print delay; depending on complexity a higher value may be necessary header: null, // prefix to html formValues: true // preserve input/form values }); }); </script>
对于printThis.js源代码，在新标签页中复制并放置在URL下面https://raw.githubusercontent.com/jasonday/printThis/master/printThis.js
您可以使用打印样式表，但这会影响所有的打印function。
你可以尝试使用外部打印样式表，当按下button的时候，通过JavaScript包含它，然后调用window.print() ，然后在删除它之后。
如何使用canvas？ 把它绘制到一个新窗口，然后从该新窗口调用print（）方法？
你可以通过这里find更多的文档： drawWindow（）
