是否可以只打印画布元素

Is it possible to print just the canvas element?

本文关键字：元素 布元素 打印 是否      更新时间：2023-09-26

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

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

更新：

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

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


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

你可以尝试这样的事情：

@media print {
  * {
    display:none;
  }
  #SOME-CANVAS-ID {
    display:block;
  }
}

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

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

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

但是，这可能会导致

和 标签被隐藏，从而有效地隐藏您的画布......

>我不是 100% 确定支持，但您可以使用 CSS 并在 <link> 标签中放置一个属性以进行media="print"。在此CSS文件中，只需隐藏打印时不想显示的元素：display:none;

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

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();
}
相关文章：