2

我创建了一个网页，让您输入一些信息，然后根据该信息在画布元素中绘制图像。除了打印之外，我几乎可以按照我想要的方式工作。

有没有办法打印出画布元素或创建一个新的窗口来绘制，这是唯一的方法吗？

更新：

答案很简单。我在想一个更复杂的解决方案。

我希望我可以选择超过 1 个答案。当我使用 * 禁用显示时，我无法打印画布。最简单的解决方案是关闭我用于输入的表单，在@media print{} 内的 CSS 中使用表单 {display:none;}。感谢您及时的回复。



    @media print {
           form {
         display:none;
       }
    }
4

3 回答 3

5

你可以尝试这样的事情：

@media print {
  * {
    display:none;
  }

  #SOME-CANVAS-ID {
    display:block;
  }
}

我不确定画布是否默认是块状的，但你可以尝试一些类似的东西，看看它是否有效。这个想法是它将隐藏打印媒体的所有内容（*），只要规则的优先级更高（这就是我使用 ID 选择器的原因），除了一些其他任意元素。

编辑：如果 CSS3 （特别是否定伪类）有更多的支持，你的规则可以像这样简单：

*:not(canvas) {
  display:none;
}

但是，这可能会导致 <html> 和 <body> 标签被隐藏，从而有效地隐藏您的画布......

于 2008-10-05T18:10:58.233 回答
1

我不能 100% 确定是否支持，但您可以使用 CSS 并<link>在media="print". 在这个 CSS 文件中，只需隐藏您不想在打印时显示的元素：display:none;

于 2008-10-05T18:10:34.523 回答
0

您可以尝试创建仅用于打印的画布：

this.Print = function () {
    var printCanvas = $('#printCanvas');
    printCanvas.attr("width", mainCanvas.width);
    printCanvas.attr("height", mainCanvas.height);
    var printCanvasContext = printCanvas.get(0).getContext('2d');
    window.print();
}
于 2012-11-23T15:19:20.423 回答