Question

在阅读了多篇文章，论坛等之后，它就到了我来到的地步。寻求你的帮助。

我正在尝试在页面中添加“打印”按钮，在单击时会打印一个表格。我尝试过jqprint（到目前为止最好的解决方案），但它仍然不对：

页面布局是一个包含手风琴的标签。手风琴里面是一个有多排的桌子。每行内都有隐藏的div。

当用户单击“打印”按钮时，将显示隐藏的div，然后使用ID作为选择器调用jqprint打印表。

在FireFox中：当我打印成PDF（为了节省纸张并与大自然亲密接触）时，只打印表格的前几行。基本上，PDF将包含许多页面，但我只获得第一个页面，之后没有其他内容。

在Chrome中：根本不起作用。 PDF格式空白。

如果您知道jqprint的修复程序或对该问题有任何反馈，请提前感谢。

乔纳森

Answer 1

用于打印的样式html通常使用不同的样式表来实现，例如在你的头元素：

<head>
    ...

    <link rel="stylesheet" type="text/css" media="screen" href="style.css">
    <link rel="stylesheet" type="text/css" media="print" href="print.css">
    ...

</head>

样式表style.css用于在屏幕上设置html样式，而print.css用于设置html样式以进行打印。通过在print.css中提供适当的样式，您可以轻松地显示或隐藏html元素，以实现您正在寻找的输出。

Answer 2

您可以使用另一个css进行打印，即print.css，并使所有div显示您想要打印的内容。

Answer 3

尝试使用printThis插件。

将元素的id传递给print。

我正在使用这个插件来打印变量rowspan和colspan，它可以很好地保留表的结构。

$('#table_id').printThis({ pageTitle: $('#report_title').text()});

希望这可以帮助你

打印DIV容器而不会丢失CSS样式

3 个答案: