使用JQuery打印DIV内容

Print DIV content by JQuery

本文关键字：内容 DIV 打印 JQuery 使用      更新时间：2023-09-26

假设我的页面中有许多div，但我想使用jquery打印特定div的内容。我发现有一个插件。

jQuery Print Element

使用这个插件我们可以很容易地打印div内容，如下所示。

$('SelectorToPrint').printElement();

但是如果我的div隐藏在页面中会发生什么?然后它就能工作了。这个插件可以打印隐藏div的内容?

如果打印机没有连接到客户端机器会发生什么。如果打印机不存在，我想显示消息给客户，"打印机未找到"?如何处理这种情况。所以请告诉我什么是最好的方法来打印页面中隐藏的div内容，以及处理打印机问题，如果打印机没有附加。

谢谢

我更喜欢这个，我已经测试过了，它的工作

https://github.com/jasonday/printThis 

$("#mySelector").printThis();

或

$("#mySelector").printThis({
*      debug: false,              * show the iframe for debugging
*      importCSS: true,           * import page CSS
*      printContainer: true,      * grab outer container as well as the contents of the selector
*      loadCSS: "path/to/my.css", * path to additional css file
*      pageTitle: "",             * add title to print page
*      removeInline: false        * remove all inline styles from print elements
*  });

如果隐藏的div不能用那一行打印:

$('SelectorToPrint').printElement();

改成:

$('SelectorToPrint').show().printElement();

应该在所有情况下都能正常工作。

对于其余的，没有解。该插件将为您打开打印对话框，用户必须选择他的打印机。你根本无法发现打印机是否附加了javascript(如果你考虑到这一点，你(几乎)不能没有print-dialog打印)。

注意:

$.browser对象已在1.9版本中删除。jQuery的x使此库不受支持。

试试这个jquery库，jquery Print Element

http://projects.erikzaadi.com/jQueryPlugins/jQuery.printElement/

这是一个JQuery&JavaScript解决方案来打印div样式(使用内部和外部css) 

$(document).ready(function() {
            $("#btnPrint").live("click", function () {//$btnPrint is button which will trigger print
                var divContents = $(".order_summery").html();//div which have to print
                var printWindow = window.open('', '', 'height=700,width=900');
                printWindow.document.write('<html><head><title></title>');
                printWindow.document.write('<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" >');//external styles
                printWindow.document.write('<link rel="stylesheet" href="/css/custom.css" type="text/css"/>');
                printWindow.document.write('</head><body>');
                printWindow.document.write(divContents);
                printWindow.document.write('</body></html>');
                printWindow.document.close();
                printWindow.onload=function(){
                printWindow.focus();                                         
                printWindow.print();
                printWindow.close();
                }
            });
});

这将在新窗口中打印您的div。

触发事件按钮

<input type="button" id="btnPrint" value="Print This">

有一种方法可以在隐藏div中使用它，但是你必须更多地使用printElement()函数和css。

Css: 

#SelectorToPrint{
     display: none;
}

脚本:

  $("#SelectorToPrint").printElement({ printBodyOptions:{styleToAdd:'padding:10px;margin:10px;display:block', classNameToAdd:'WhatYouWant'}})

这将覆盖您打开的新窗口中的display: none，内容将显示在打印预览页面上，并且您站点上的div仍然隐藏。

您可以遵循以下步骤:

  1. 将要打印的div换行到另一个div中。
  2. 在css中设置包装器div显示状态为none。
  3. 保留你想要打印显示状态的div作为块，无论如何它将被隐藏，因为它的父级被隐藏。
  4. 直接调用$('SelectorToPrint').printElement();
相关文章：