0

我在我们正在开发的一个相当大的网站上打印时遇到了很多问题。

问题是 FF、IE 等中存在仅在打印时出现的问题。

工作流程是这样的：我单击页面上的打印按钮，打开一个带有不同模板和样式的弹出窗口，并触发 window.print 命令。

我可能的解决方案：

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

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

4

2 回答 2

1

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

浏览器扩展

为浏览器（至少是 Chrome 和 FireFox）编写扩展将允许您将当前内容作为位图获取，您可以将其与画布一起使用。

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

模拟 DOM 树

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

有几点需要注意：

  • 它相对较慢
  • 您可能会遇到与图像相关的跨域限制（解决方法是使用图像代理）
  • 您无法获取“外来对象”（Flash、Java 等）的内容
  • 它不是 100% 准确的（如果这很重要）

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

于 2013-09-05T19:20:37.907 回答
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/ - 只打印画布。

于 2013-09-06T08:41:22.137 回答