浏览器扩展程序

Question

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

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

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

我可能的解决方案：

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

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

Answer 1

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

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

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

模拟DOM树

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

有几点需要注意：

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

Answer 2

为打印视图提供特殊的css：

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

对于您不想打印的所有内容，请使用以下内容：

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

所以你只留下你想要看的内容。在这种情况下，访客或您不需要使用特殊的打印弹出版本。只需点击打印即可。