在IE 8中打印浮点图表

Question

在IE 8中打印浮点图表

4

我目前正在使用用于绘图插件的http://www.flotcharts.org/。我想要实现在页面上打印包含内容的flot图形。我试图在新窗口中打开并打印画布对象，以便只打印flot图表，并且我已经成功地做到了。然而，为了这样做，我需要将画布转换为图像，以便我可以在新窗口中打开它，因为我不能让flot在新窗口中工作。

canvas.toDataURL();

在 Internet Explorer 8 中，我收到错误提示，指出没有 toDataURL() 方法。我认为这是因为 Internet Explorer 8 不支持 canvas 标签，flot 必须使用一种解决方法。那么，在新的浏览器和 Internet Explorer 8 中，如何只打印页面中的 flot 图形呢？

- jacksonfiverniner

2个回答

1

您可能想尝试使用Flashcanvas (flashcanvas.net)而不是Excanvas；它应该支持toDataURL。

- DNS

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- itsstephyoutrick · Accepted Answer

在我尝试打印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中打印时，如果不使用系统对话框打印，可能会影响您的样式。这只是Chrome的问题。如果有人有解决方法，请告诉我。