Canvas 标签的打印内容问题（Chrome、Opera）答案

【问题标题】：Problem printing contents of Canvas tag (Chrome, Opera)Canvas 标签的打印内容问题（Chrome、Opera）
【发布时间】：2009-10-19 16:49:36
【问题描述】：

这些浏览器（Windows 版本）可以正确打印在 img 标签图像上具有画布覆盖的网页：

IE6、IE7、IE8、火狐、Safari

但是 Chrome（我在 3.0.195.27 版本中输入时是最新的）和 Opera（在我输入时是最新的 10.0 版本1750）不要。 Chrome 完全忽略了画布渲染。 Opera 将整个画布渲染为一个白色矩形，使其后面的图像变得模糊。

我知道画布标签相当新，而且打印网页总是很冒险。我该如何处理？我是否缺少任何设置来完成这项工作？我可以从 JavaScript 中捕获“即将打印”事件以至少警告用户吗？

更新：它比看起来更奇怪。组合图像（覆盖 img 的画布）在我的 Brother 激光打印机上正确打印，但在我的 hp 喷墨打印机上打印不正确。

所以目前的情况是大多数浏览器都可以正确打印到我的喷墨打印机，但 Chrome 不能。 Opera 在两台打印机上都搞砸了。

这完全取决于打印机驱动程序以及各种浏览器如何与其通信？

更新：我注意到 Google Docs 构建了一个用于打印的 PDF。

【问题讨论】：

twiddla.com/test/ChromeCanvas.html 测试页，也许有助于找出问题所在！？
@powtac... 你让问题变得更有趣了。在 Chrome 中，您链接到的页面可以在我的黑白激光打印机上正确打印，但左侧的红色框不会在我的彩色喷墨打印机上打印（但右侧的两个红色数字——它们是位图——可以）。跨度>
如果我在 Chrome 4.0.222 (Beta) 上使用 PDF Creator 或 XPS writer（未在真实打印机上测试），文档打印效果很好。这可能已在此版本中修复。
@Fabien Menager：我不确定这能告诉我什么，因为问题取决于我选择作为输出的打印机。
我不知道这是否相关，但这篇博文提到了使用 Opera 打印 Canvas 元素时出现的问题，具体取决于用户设置：my.opera.com/OmegaJunior/blog/2009/08/13/…

【解决方案1】：

您可以使用PHP's PDF functions 以编程方式创建 PDF。真的很简单！

要创建一个新的 PDF：

$pdf = pdf_new();

打开文件：

pdf_open_file($pdf, "pdfName.pdf");

可以设置一些变量比如作者：

pdf_set_info($pdf, "Title", "pdf Title here");

现在您需要使用pdf_begin_page() 函数：

pdf_begin_page($pdf, 595, 842);

这些是 A4 的尺寸。

内容

然后关闭文件：

pdf_end_page($pdf);
pdf_close($pdf);

如需完整参考，请查看PHP's PDF manual。

【讨论】：

【解决方案2】：

我想知道，如果不是渲染到 <canvas> 元素：如果您要渲染到文档外的画布对象并在 <div> 上设置 CSS 样式以设置 background-image，它可能会正确打印到"url("+myCanvasObject.toDataUrl()+")"。

此外，您可以将新 <img /> 元素的 src 属性设置为相同的 myCanvasObject.toDataUrl()。这应该比我上面提到的方法处理得更好..

【讨论】：

【解决方案3】：

我建议将页面保存为 PDF 并尝试打印。要打印的 PDF 文档应该是所见即所得的。如果 PDF 呈现正确，任何打印机都可以正常打印。

【讨论】：

那么如何将页面保存为 PDF？我可以通过编程方式做到这一点吗？
对不起，如果我假设你有一个 mac。每当您尝试从 Mac 中的浏览器打印时，您都会在左下角看到一个 PDF 菜单。您可以使用其中的选项之一保存为 PDF。
在大多数 Linux 发行版（如 Ubuntu）上，您也可以打印为 PDF。我认为 Windows 上的 Adobe Acrobat Reader 也带有该选项，但我不确定。
我正在寻找一种我的网站用户可以做到的方式，而不是特定于操作系统的方式。不过是个好主意。