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

时间:2013-09-05 14:47:30

标签: javascript dom canvas printing

我在一个我们正在研究的庞大网站上遇到很多问题。

问题是FF,IE等存在问题......仅在打印时出现。

工作流程如下:我点击页面上的打印按钮,弹出一个不同模板和样式的弹出窗口,触发window.print命令。

我可能的解决方案:

当弹出窗口打开时,我将在canvas元素中渲染整个DOM,然后将其作为png文件放回页面,然后触发打印操作。

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

2 个答案:

答案 0 :(得分:1)

您可以通过两种方式解决此问题:

浏览器扩展程序

为浏览器编写扩展程序(至少Chrome和FireFox)将允许您将当前内容作为可用于画布的位图获取。

这可能是内部创建屏幕快照的最快选项。但是,我不确定浏览器是否快照客户端窗口或完整文档,因此需要确定。

模拟DOM树

html2canvascanvas2image这样的库可以模拟DOM树并尝试渲染网页的近似表示。

有几点需要注意:

  • 它相对较慢
  • 您可能会遇到与图像相关的跨源限制(解决方法是使用图像代理)
  • 你无法获得“异物”(Flash,Java等)的内容。
  • 这不是100%准确(如果这很重要)

当你以某种方式获得快照时,其他事情应该是直截了当的。请记住,用户拥有不同的打印机,驱动程序和分辨率,您可能无法交叉生成相同的结果,因为您还依赖于浏览器自己的打印实现。

答案 1 :(得分:0)

为打印视图提供特殊的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/ - 仅打印画布。