Chrome打印预览会更改网页的样式

时间:2013-05-26 00:10:22

标签: css google-chrome pdf printing

简短版本:

我在Windows 7 Pro上使用Chrome 27.0.1453.94

我使用Chrome转到http://www.try-phpbb.com/30x/

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

打印预览看起来与网页不同 - 布局,链接,字体都错了。

为什么?

如何解决这个问题,使PDF的样式与网站的样式相同?

长版:

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

我们已获得主持人的许可(甚至鼓励)下载每个主题/主题/帖子的内容并将其写入PDF文件,以便将来继续引用它们。我们必须自己做这件事,因为我有IT背景,所以我自愿做这项工作。但它证明比我想象的更难。

我希望能够完成以下这个过程...

  1. 下载并添加“时尚”Chrome扩展程序 (https://chrome.google.com/webstore/detail/stylish/fjnbnpbmkenffdnngjfgmeleoegfcffe
  2. 将CSS代码添加到Stylish以修改准备进行PDF迁移的论坛页面的外观
  3. 在Chrome中使用Print | “另存为PDF”选项可将样式化页面另存为PDF文档
  4. 对于多页论坛,请对每个页面重复此过程,然后使用PDFMate(或类似文档)将PDF文档连接成一个长PDF。
  5. 步骤1,2和4工作正常,但步骤3不是。

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

    我有什么办法可以解决这个问题吗?我可以以某种方式给打印预览版本一些CSS代码重新设置吗?任何人都知道为什么会发生这种情况?

    或者,您可以建议另一种将HTML转换为PDF的解决方案吗?我尝试过Chrome扩展程序“iWeb2x”和“发送到Google云端硬盘”,但没有成功 - 因为论坛是安全的,他们创建的PDF文件是论坛的登录页面,而不是我目前正在查看的论坛帖子页面。

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

2 个答案:

答案 0 :(得分:12)

看看这里,也许是有帮助的

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

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

希望它有所帮助,问候

答案 1 :(得分:0)

我有一个案例,如果iframe是display:none,则不会加载css,因此不会打印正确的CSS样式。您可以通过可见性修复它:隐藏;并且大小为零