Question

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

使用此插件，我们可以轻松打印如下所示的div内容。

$('SelectorToPrint').printElement();

但如果我的div隐藏在页面中会发生什么。那么它是否有效这个插件可以打印隐藏div的内容吗？

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

感谢

Answer 1

我更喜欢这个，我测试了它和它的工作

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
*  });

Answer 2

你的问题听起来并不像是你自己尝试过，所以我甚至不应该想到回答，但是：如果一个隐藏的div不能用那一行打印：

$('SelectorToPrint').printElement();

只需将其更改为：

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

应该使它适用于所有情况。

其余的，没有解决方案。该插件将为您打开打印对话框，用户必须选择他的打印机。你根本无法找到一台打印机是否附带了javascript（而且你（几乎）没有打印对话框就无法打印 - 如果你正在考虑的话）。

注意：

jQuery版本1.9.x中删除了$.browser对象使这个库不受支持。

Answer 3

试试这个jquery库，jQuery Print Element

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

Answer 4

这是一个JQuery＆amp; 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">

Answer 5

有一种方法可以将它与隐藏的div一起使用，但你必须使用printElement（）函数和css进行更多的工作。

的CSS：

#SelectorToPrint{
     display: none;
}

脚本：

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

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

Answer 6

您可以按照以下步骤操作：

将要打印的div包装到另一个div中。
在css中将包装器div显示状态设置为none。
将要打印的div显示为块状态，无论如何它将被隐藏，因为它的父项被隐藏。
只需致电$('SelectorToPrint').printElement();

通过JQuery打印DIV内容

6 个答案: