如何制作网页的可打印版本？答案

【问题标题】：how to make printable version of a webpage?如何制作网页的可打印版本？
【发布时间】：2012-01-24 21:25:35
【问题描述】：

我想制作我的网页的可打印版本。我已经尝试使用 CSS 为页面制作单独的样式表，但它无法正常工作。（即它不会摆脱顶部的边距，菜单栏背景也不会消失。）页面由数百个表格，当我进行打印预览时，它们有时也会在页面之间拆分。

这些表格是根据用户在复选框中的选择动态生成的，是否可以添加一个可打印的链接，该链接将从当前页面获取内容并将其放入一个更易于打印的页面中？

【问题讨论】：

真的，要对布局进行最大程度的控制，您可能需要执行生成 PDF 之类的操作。然而，这比创建单独的样式表要多得多。
我从未尝试过的事情该怎么做？
这需要在后端完成。因此，您必须将用户的选择提交到后端，然后很可能使用一些 pdf 库来生成 pdf 文件。
你试过@media print吗？因为您可以覆盖默认样式表中的任何样式
虽然不是一个完整的答案，但请查看this article 作为一个很好的起点。

【解决方案1】：

您可以使用@media print 制作页面的打印机友好版本

@media print {
        your styles here
}

例如在Foundation 他们有基本规则，你可以添加任何你自己的东西：

@media print {
    * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important;
    -ms-filter: none !important; } /* Black prints faster: sanbeiji.com/archives/953 */
    p a, p a:visited { color: #444 !important; text-decoration: underline; }
    p a[href]:after { content: " (" attr(href) ")"; }
    abbr[title]:after { content: " (" attr(title) ")"; }
    .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }  /* Don't show links for images, or javascript/internal links */
    pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
    thead { display: table-header-group; } /* css-discuss.incutio.com/wiki/Printing_Tables */
    tr, img { page-break-inside: avoid; }
    @page { margin: 0.5cm; }
    p, h2, h3 { orphans: 3; widows: 3; }
    h2, h3{ page-break-after: avoid; }
    .hide-on-print { display: none !important; }
    .print-only { display: block !important; }
}

【讨论】：

【解决方案2】：

将 CSS 与 @media rules 结合使用。使用@media screen 和@media print 为打印视图定义您在屏幕上显示的样式。用page-break-* attributes控制分页符。

@media screen {
    body {
        background-image: url(/images/background.png);
    }
}
@media print {
    body {
        background-image: none;
    }
    tr {
        page-break-inside: avoid;
    }
}

【讨论】：

【解决方案3】：

不需要两个不同的页面。您应该创建一个不同的 CSS 表。复制现有的后，只需将所有内容设置为黑/白（如果您真的需要，也可以设置几种颜色），通过在 CSS 声明中添加 display: none; 来删除您不需要的任何菜单和元素，然后摆脱不需要的边距。你应该在这里和那里放一个margin: 0 或margin-top: 0 声明。如果您不显示您的 HTML 和 CSS 代码，则很难更具体。

【讨论】：

正如我所提到的，我已经尝试过了，但是一些元素没有遵循打印 css 规则并且仍然显示任何想法为什么？
你应该分析代码。他们仍然可以从某些父元素继承属性。尝试使用诸如 Firebug 或 Safari/Chrome 内置代码检查器之类的东西。在右侧，您可以看到所选元素的 CSS 属性以及它从何处继承这些属性。这对你有很大帮助。
可能是因为它们在您的 Web CSS 中具有更大的权重（即，在 Web 样式表中，您有一个 id 的规则，而在印刷版中，您有一个 class 的规则）。要解决这个问题，请将 !important 添加到打印 CSS 中的规则

【解决方案4】：

最简单的方法是为打印版本制作另一个样式表，并将属性media="print" 添加到<link/> 中。

【讨论】：