Javascript 使用js打印canvas.js图表_Javascript_Jquery_Canvas

Javascript 使用js打印canvas.js图表

javascript jquery canvas

Javascript 使用js打印canvas.js图表,javascript,jquery,canvas,Javascript,Jquery,Canvas,我想使用javascript打印canvas.js图表。打印代码当我单击“打印”按钮时，浏览器中的打印弹出窗口将显示为“无打印预览” 我如何解决这个问题 var html = "<html>"; html += document.getElementById("chartContainerInPT").innerHTML; html += "</html>"; var printWin = window.open('','','left=0,top=0,width=1

我想使用javascript打印canvas.js图表。打印代码

当我单击“打印”按钮时，浏览器中的打印弹出窗口将显示为“无打印预览”

我如何解决这个问题

var html = "<html>";
html += document.getElementById("chartContainerInPT").innerHTML;
html += "</html>";
var printWin = window.open('','','left=0,top=0,width=1,height=1,toolbar=0,scrollbars=0,status  =0');
printWin.document.write(html);
printWin.document.close();
printWin.focus();
printWin.print();
printWin.close();

如何在浏览器中打印图表？

作为解决方案，您可以将画布另存为图像

var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
window.location.href=image;

更新至2021年

js图表现在添加了打印（pdf、png、jpg）格式的功能。启用导出选项，如下所示

            title: {
                text: "Alarm Statistics",
              },
            **exportEnabled: true**,// enable print option for the chart 

            data: [{...},{...}]


window.onload=函数（）{
var chart=new CanvasJS.chart（“chartContainer”，
{
标题：{
文本：“启用导出功能的图表”，
},
exportEnabled:true，
axisX：{
最低：-900，
间隔时间:100,，
},
数据：[
{
类型：“区域”，
不透明度：.4，
线宽：3，
数据点：[
{x:-100，y:71}，
{x:-200，y:55}，
{x:-300，y:50}，
{x:-400，y:65}，
{x:-500，y:105，markerType:“圆圈”，markerSize:9，markerColor:“棕色”，indexLabel:“最高”}，
{x:-600，y:68}，
{x:-700，y:28}，
{x:-800，y:34}，
{x:-900，y:14}
]
}
]
});
chart.render（）；
}

控制台是否告诉您任何错误？控制台没有任何错误。何时以及如何启动printWin？因为首先div元素是空的，然后

newcanvasjs.Chart

render它。因此，只有在这之后才会有任何innerHtml内容。实际上，js代码来自ajax响应，因此响应会将数据绑定到图表。通过转换为图像，我应该可以使用浏览器打印它吗？运行此代码后，您将在空页上看到图像。然后，您可以使用默认浏览器功能打印它。菜单->使用jquery打印（或Ctrl+P）任何其他选项？？

var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
window.location.href=image;

            title: {
                text: "Alarm Statistics",
              },
            **exportEnabled: true**,// enable print option for the chart 

            data: [{...},{...}]