Chrome 打印预览改变了网页的样式

Posted 2023-02-24

【中文标题】Chrome 打印预览改变了网页的样式

【英文标题】：Chrome print preview changes styling of web page

【发布时间】：2013-05-21 05:46:23

【问题描述】：

短版：

我在 Windows 7 Pro 上使用 Chrome 27.0.1453.94

我使用 Chrome 访问 http://www.try-phpbb.com/30x/

我选择打印... |另存为PDF

打印预览看起来一点也不像网页 - 布局、链接、字体都错了。

为什么？

如何解决此问题以使 PDF 的样式与网站的样式相同？

加长版：

我是一个安全论坛的成员（即必须登录才能访问），该论坛基于 phpBB 论坛模板 (https://www.phpbb.com/)。我们的论坛将很快清除所有主题和帖子，以便为下一轮订阅者腾出空间。

版主允许（甚至鼓励）我们下载每个主题/线程/帖子的内容并将它们写入 PDF 文件，以便我们将来可以继续引用它们。我们必须自己做这件事，我自愿做这项工作，因为我有 IT 背景。但事实证明比我想象的要难。

我希望按照这个过程来做......

下载并添加“时尚”Chrome 扩展程序 (https://chrome.google.com/webstore/detail/stylish/fjnbnpbmkenffdnngjfgmeleoegfcffe) 将 CSS 代码添加到 Stylish 以修改论坛页面的外观，以便进行 PDF 迁移 在 Chrome 中使用打印 |另存为 PDF 选项可将样式页面另存为 PDF 文档 对于多页论坛，对每个页面重复此过程，然后使用 PDFMate（或类似工具）将 PDF 文档连接在一起形成一个长 PDF。

第 1 步、第 2 步和第 4 步运行良好，但第 3 步却不行。

Chrome 中的打印预览会破坏论坛页面的外观。布局样式丢失，字体完全不同，链接丢失或看起来很糟糕。例如，尝试打印此页面 (http://www.try-phpbb.com/30x/) - 它在打印预览中的外观与在浏览器中的外观完全不同。

我可以做些什么来解决这个问题吗？我可以以某种方式给打印预览版本一些 CSS 代码来重新设置它的样式吗？有人知道为什么会这样吗？

或者，您能否提出另一种将 html 转换为 PDF 的解决方案？我尝试了 Chrome 扩展“iWeb2x”和“发送到 Google Drive”，但没有成功 - 因为论坛是安全的，他们创建的 PDF 文件是论坛的登录页面，而不是我目前正在查看的论坛主题页面。

非常感谢任何帮助 - 谢谢。

【参考方案1】：

看看这里，也许有帮助

http://www.smashingmagazine.com/2011/11/24/how-to-set-up-a-print-style-sheet/

您可以为打印的页面设置自己的 css 样式。

希望对你有帮助，问候

【讨论】：

很棒的建议 - 感谢您为我们指明了方向。我只是从页面源代码中获取样式，并将它们复制到“时尚”定义的样式中，并用 @media print ... 包围它们太棒了 - 谢谢伙伴。

【参考方案2】：

我有一个案例，如果 iframe 为 display:none，则未加载 css，因此未打印正确的 CSS 样式。您可以使用可见性修复它：隐藏；大小为零