如何在JavaScript中打印部分呈现的HTML页面？

JavaScript代码window.print（）可以打印当前的HTML页面。如何在JavaScript中打印部分呈现的HTML页面？

如果我在HTML页面中有div（例如，从ASP.NET MVC视图呈现的页面），那么我只想打印div。

是否有任何jQuery unobtrusive 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>

然后，我要点击打印按钮，只打印DIV3。

来源

2009-07-02 KentZhou

我会去了解它有点像这样：

<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>

来源

2009-07-02 02:33:39

谢谢。此解决方案正常工作。 – KentZhou 2009-07-13 16:49:50

但是printDivCSS的建议是什么？似乎没有必要使用它。 – KentZhou 2009-07-13 16:52:20

您可以使用打印样式表，但这会影响所有打印功能。

您可以尝试在外部打印样式表，并且在按下按钮时通过JavaScript包含它，然后调用window.print()，然后再删除它。

来源

2009-07-02 00:30:19 alex

这会工作，但经过一些修改后，您可以在打印目标后让页面“重置”。（正如你所指出的那样，这将是一个问题。）例如，在打印之前，打开一个模式窗口或某种叠加层，指示现在可以进行打印（或者直接调用window.print（）），然后当用户单击确定或关闭，样式表可以重置自己。 – Funka 2009-07-02 02:01:04

另外，你不一定需要动态加载外部CSS文件，你可以预先加载它，但只需在准备打印时调整目标div或其他容器上的类即可。（并在完成时删除类。） – Funka 2009-07-02 02:02:16

-1

如何使用画布？将它绘制到一个新窗口中，然后从该新窗口调用print（）方法？

你可以通过在这里找到更多的文档：drawWindow()

来源

2009-07-02 02:04:06 Paul

按照同样的思路，因为一些建议，你需要做的，至少以下：

加载一些CSS动态地通过JavaScript
工艺某些打印特异性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>

你可能想从可选目标删除类发生打印后，和/或删除动态添加CSS发生打印后。

下面是一个完整的工作示例，唯一的区别是打印CSS不是动态加载的。如果你希望它真的不显眼，那么你将需要load the CSS dynamically like in this answer。

<!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>

来源

2009-07-02 07:00:23

试试这个JavaScript代码：

function printout() { 

    var newWindow = window.open(); 
    newWindow.document.write(document.getElementById("output").innerHTML); 
    newWindow.print(); 
}

来源

2014-07-29 20:47:48

<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烃源代码，填写Flash低于在新标签页URL https://raw.githubusercontent.com/jasonday/printThis/master/printThis.js

来源

2016-06-17 11:07:48

如何在JavaScript中打印部分呈现的HTML页面？

回答

相关问题