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

StackOverflow https://stackoverflow.com/questions/172365

  •  05-07-2019
  •  | 
  •  

题

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

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

更新

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

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



    @media print {
           form {
         display:none;
       }
    }
有帮助吗？

解决方案

您可以尝试这样的事情：

@media print {
  * {
    display:none;
  }

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

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

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

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

然而，这可能会导致<！> lt; html <！> gt;和<！> lt; body <！> gt;隐藏的标签，有效隐藏你的画布......

其他提示

我不是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();
}
许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top