CSS Chrome 打印预览更改网页样式

Chrome print preview changes styling of web page

提问by Drew

Short Version:

精简版：

I am using Chrome 27.0.1453.94 on Windows 7 Pro

我在 Windows 7 Pro 上使用 Chrome 27.0.1453.94

I go to http://www.try-phpbb.com/30x/using Chrome

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

I select Print... | Save as PDF

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

The print preview looks nothing like the web page - layout, links, fonts all wrong.

打印预览看起来与网页完全不同——布局、链接、字体都错了。

Why?

为什么？

How can I fix this to make the PDF styled the same way as the web site?

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

Long Version:

长版：

I am a member of a secure forum (ie have to log in for access), which is base on the phpBB forum template (https://www.phpbb.com/). Our forum will be cleared of all threads and posts soon to make room for the next round of subscribers.

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

We have been given permission (even encouraged) by the moderators to download the contents of each topic/thread/post and write them into PDF files so we can keep referencing them in the future. We have to do this ourselves, and I volunteered to do the work as I have an IT background. But its proving harder than I thought.

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

I was hoping to do the following this process...

我希望做以下这个过程......

1. Download and add "Stylish" Chrome Extension (https://chrome.google.com/webstore/detail/stylish/fjnbnpbmkenffdnngjfgmeleoegfcffe)
2. Add CSS code to Stylish to modify the appearance of the forum pages ready for PDF migration
3. In Chrome use Print | Save as PDF option to save styled page as a PDF doc
4. For multi-page forums, repeat this process for each page and then use PDFMate (or similar) to concatenate the PDF docs together into a single long PDF.

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

Steps 1, 2 and 4 are working perfectly, but step 3 is not.

步骤 1、2 和 4 工作正常，但步骤 3 不是。

The print preview in Chrome screws up the appearance of the forum pages. Layout styling is lost, fonts are completely different, links are missing or look terrible. For example, try printing this page (http://www.try-phpbb.com/30x/) - it looks completely different in print preview to how it looks in the browser.

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

Is there something I can do to fix this? Can I somehow give the print preview version some CSS code to restyle it? Anyone know why this would be happening?

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

Or alternatively, can you suggest another solution to convert HTML to PDF? I have tried Chrome extensions "iWeb2x" and "Send to Google Drive", but with no success - because the forum is secured, the PDF file they create is the forum's Login page, not the forum thread page I'm currently looking at.

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

Any help greatly appreciated - thanks.

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

采纳答案by BeNdErR

Have a look here, maybe it's helpful

看看这里，也许有帮助

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

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

You can set your own css style for the printed page.

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

Hope it helps, regards

希望有帮助，问候

回答by Miguel

I had a case, where if the iframe is display:none, the css is not loaded, thus not printing the correct CSS style. You can fix it with visibility:hidden; And size zero

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