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

【问题标题】：Printing a DIV container without losing CSS styles打印 DIV 容器而不丢失 CSS 样式
【发布时间】：2010-11-11 06:40:06
【问题描述】：

在阅读了多篇文章、论坛等之后，我才来寻求您的帮助。

我正在尝试在页面中添加一个打印按钮，单击该按钮会打印一个表格。我已经尝试过 jqprint（迄今为止最好的解决方案）但仍然不对：

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

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

在火狐中：当我打印成 PDF（为了节省纸张并与大自然融为一体）时，只打印表格的前几行。基本上，PDF 会包含很多页面，但我只得到第一个页面，之后就没有其他页面了。

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

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

乔纳森

【问题讨论】：

标签： jquery css printing

【解决方案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 元素以实现您正在寻找的输出。

【讨论】：

目前，我有 media="all"，因此保留了样式。问题是，当我在 Firefox 中使用 jqprint 时，我无法打印比特定容器（无论是 DIV 还是表格）在屏幕上可见的更多内容。

【解决方案2】：

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

【讨论】：

【解决方案3】：

尝试使用printThis 插件。

传递要打印的元素的 id。

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

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

希望对你有帮助

【讨论】：

链接已损坏！