在不同的浏览器上打印页面

Question

我在我们正在处理的相当庞大的网站上遇到很多打印问题。

问题是FF，IE等问题只在打印时出现。

工作流程如下：我点击页面上的打印按钮，弹出打开不同的模板和样式，并触发window.print命令。

MY可能的解决方案：

当弹出打开，我会呈现一个canvas元素整个DOM，然后将它放回页为PNG文件，然后触发打印动作。

这是一个可行的解决方案吗？

Answer 1

您可以通过两种方式接近这一点：

浏览器扩展

写一个扩展的浏览器（S）（至少Chrome和Firefox）将让您抓住当前内容作为位图你可以使用画布。

这可能是最快的选择，因为屏幕快照是在内部创建的。虽然，我不确定浏览器快照客户端窗口或完整文档是否需要确定。

模拟DOM树

有库，如html2canvas和canvas2image模拟DOM树，并试图显示网页的近似表示。

有几件事情，以本通知：

• 这是比较慢的
• 您可能会遇到有关图像跨域限制（解决办法是使用图像代理）
• 你不能得到“外物”的内容（闪光，爪哇等）
• 这是不是100％准确的（如果这事项）

当你有一个快照时，其他的事情应该是直截了当的。请记住，用户具有不同的打印机，驱动程序和分辨率，您可能无法产生相同的交叉结果，因为您也依赖于浏览器自己的打印实施。

Answer 2

提供打印预览特殊的CSS：

<link rel="stylesheet" type="text/css" media="print" href="print.css" /> 

中的一切你不想打印使用类似：

#qqq, .#aaa, #header, ...., ...., .banner{ 
    display: none; 
    height: 0; 
    width: 0; 
} 

，所以你只留下内容，您希望看到打印出来。在这种情况下，访问者或者你不需要使用特殊的打印弹出版本。只需点击打印。

示例：http://viliusle.github.io/miniPaint/ - 仅打印画布。