Question

我目前正在使用http://www.flotcharts.org/作为图表插件。我试图实现从内容包围的页面打印flot图形的能力。我正在尝试打开一个新窗口并打印一个画布对象，这样我就可以打印出flot图，我已经成功完成了。但是，为了做到这一点，我需要使画布成为一个图像，这样我就可以在一个新窗口中打开它，因为我无法让flot在新窗口上工作。

canvas.toDataURL();

在Internet Explorer 8中，我收到错误，即没有方法toDataURL（）。我相信这是因为Internet Explorer 8不支持canvas标签，而flot必须使用变通方法。那么如何从新浏览器和Internet Explorer 8中的页面打印刚才的flot图？

Answer 1

当我尝试打印flot图表时遇到了同样的问题。打开新窗口的另一种方法是将画布移动到页面顶部并隐藏其他所有内容，打印，然后将所有内容放回原处。这应该适用于现代浏览器以及IE8。此外，这将保持您的外部样式和库（jquery / flot）被引用，因为它位于同一页面上。

使用html结构：

<body>
    <div id="wrapper">
        <div id="some-element></div>
        <canvas id="my-canvas"></canvas>
        <button type="button" id="print-button">PRINT</button>
        <div id="some-other-element></div>
    </div>
</body>

和javascript函数：

function printContent(whatToPrint, priorSibling, afterSibling) 
{

    $('#wrapper').hide();//hide content wrapper inside of body

    //take what to print out of wrapper and place directly inside body
    $(whatToPrint).appendTo('body');

    window.print();//print the window

    //put everything back
    $('#wrapper').show();

    if (priorSibling != null) 
    {
        $(whatToPrint).insertAfter(priorSibling);
    }
    else if (afterSibling != null)
    {
        $(whatToPrint).insertBefore(afterSibling);
    }

}

和javascript打印按钮事件

$('#print-button').click(function(){

    printContent($('#my-canvas'), $('#some-element'), null);

});

注意：在不使用系统对话框打印的情况下使用chrome进行打印可能会使您的样式混乱。这只是铬。如果有人有解决方法，请告诉我。

Answer 2

您可能还想尝试使用Flashcanvas（flashcanvas.net）而不是Excanvas;它应该支持toDataURL。

在8中打印flot graph

2 个答案: