在不丢失CSS样式的情况下打印DIV容器

Question

在阅读了多篇文章、论坛等之后，我终于到了该来寻求帮助的地步了。

我正尝试在页面中添加一个打印按钮，它将在单击时打印表。我已经尝试过jqprint (到目前为止最好的解决方案)，但它仍然不正确：

页面的布局是一个包含折叠面板的选项卡。在手风琴内部是一个包含多行的表格。每行中都有隐藏的div。

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

在FireFox中:当我打印成PDF文件时(为了节省纸张和顺应大自然)，只有表格的前几行被打印出来。基本上，PDF将包含许多页面，但我只得到第一个页面，之后就没有其他页面了。

在Chrome中:根本不起作用。PDF为空。

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

乔纳森

Answer 1

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

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

我正在使用这个插件打印一个变量rowspan，并且colspan它很好地保留了表的结构。

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

希望这能对你有所帮助