Fatal编程技术网
  • javascript/
  • 如何以JavaScript打印呈现的HTML页面的一部分？

如何以JavaScript打印呈现的HTML页面的一部分？

javascript jquery

如何以JavaScript打印呈现的HTML页面的一部分？,javascript,jquery,Javascript,Jquery,JavaScript代码window.print（）可以打印当前HTML页面 如果我在HTML页面中有一个div（例如，从视图呈现的页面），那么我只想打印该div 是否有jQuery或普通JavaScript代码来实现此请求 更清楚地说，假设呈现的HTML页面如下所示： <html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head" runat="server"> <title>

JavaScript代码window.print（）可以打印当前HTML页面

如果我在HTML页面中有一个div（例如，从视图呈现的页面），那么我只想打印该div

是否有jQuery或普通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。

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

您可以尝试在外部使用打印样式表，按下按钮时通过JavaScript将其包含在内，然后调用
window.print（）
，然后将其删除。

我会这样做：

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


打印测试页
printDivCSS=新字符串（“”）
函数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（）；
}
这是用于打印的测试页

第1部分：

这是div1的打印输出



第2部分：

这是div2的打印输出



第3部分：

这是div3的打印输出
按照与某些建议相同的思路，您至少需要执行以下操作：

  • 通过JavaScript动态加载一些CSS
  • 制作一些特定于打印的CSS规则
  • 通过JavaScript应用您的CSS规则
CSS示例可以如此简单：

@media print {
  body * {
    display:none;
  }

  body .printable {
    display:block;
  }
}
然后，JavaScript只需将“printable”类应用于目标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>


函数divPrint（）{
//一些逻辑决定了应该打印哪个div。。。
//本例使用div3。
$（“#div3”）.addClass（“可打印”）；
window.print（）；
}
您可能希望在打印完成后从目标中删除该类，和/或在打印完成后删除动态添加的CSS

下面是一个完整的工作示例，唯一的区别是打印CSS不是动态加载的。如果你希望它真的不引人注目，那么你需要这样做


打印部分示例
@媒体印刷品{
正文*{
显示：无；
}
正文。可打印{
显示：块；
}
}
打印部分示例
第一组
第2组
第3组
第4组
第5组
第6组


函数divPrint（）{
//一些逻辑决定了应该打印哪个div。。。
//本例使用div3。
$（“#div3”）.addClass（“可打印”）；
window.print（）；
}
试试下面的JavaScript代码：

function printout() {

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


…您的html页面内容在此。。。。
$（文档）。在（“单击”上，“#btnPrint”，函数（e）{
e、 预防默认值（）；
e、 停止传播（）；
$（“#发票容器”）。打印此({
debug:false，//显示用于调试的iframe
importcs:true，//导入页面CSS
importStyle:true，//导入样式标记
printContainer:true，//获取外部容器以及选择器的内容
loadCSS:“/Content/bootstrap.min.css”，//附加css文件的路径-为多个
pageTitle:，//将标题添加到打印页
removeInline:false，//从打印元素中删除所有内联样式
printDelay:333，//可变打印延迟；根据复杂性，可能需要更高的值
header:null，//html的前缀
formValues:true//保留输入/表单值
});
});
对于printThis.js源代码，请在“新建”选项卡中的URL下方复制并粘贴

这是可行的，但需要进行一些修改，以允许在打印目标后“重置”页面。（正如您所指出的，这将是一个问题。）例如，在打印之前，打开一个模式窗口或某种覆盖，指示现在可以进行打印（或立即调用window.print（）），然后当用户单击“确定”或“关闭”时，样式表可以自行重置。哦，还有，您不一定需要动态加载外部CSS文件，您可以预先加载它，但只需在准备打印时调整目标div或其他容器上的类即可。如果需要使用样式表格式化正在打印的内容，printDivCSS就在那里。如果你不希望打印的文本被格式化为样式表，那么你就不需要它。我检查了当时的情况。默认情况下，IE7将打印活动帧，因此我必须聚焦（）帧。它不允许我关注（）的“可见性：隐藏”内容，所以我不得不删除一些样式格式。框架的宽度、高度和框架边框已为0，因此即使没有样式格式，也会隐藏该框架。这样，一切都能正常工作。哦，最后一点注意，如果用户尝试CTRL+F搜索页面，他们的搜索可能会在框架内找到匹配项，这些匹配项他们看不到。打印完成后，您必须清空框架以修复该框架。@CodingWithStyle如果您解释了您的方法/解决方案，而不仅仅是提供了代码，那么这个答案将非常有用。这似乎不再有效-至少在Chrome中是这样。打印对话框在CSS应用于iframe之前打开 
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>