Question

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

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

更新

答案很简单。我在考虑更复杂的解决方案。

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



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

Answer 1

您可以尝试这样的事情：

@media print {
  * {
    display:none;
  }

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

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

编辑：如果CSS3（特别是negation pseudo-class）有更多支持，您的规则可能就像这样简单：

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

但是，这可能导致＆lt; html＆gt;和＆lt; body＆gt;隐藏的标签，有效隐藏你的画布......

Answer 2

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

Answer 3

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

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();
}

是否可以只打印画布元素？

3 个答案: