在 ie 8 中打印浮点图答案

【问题标题】：printing flot graph in ie 8在 ie 8 中打印浮点图
【发布时间】：2013-04-04 21:03:54
【问题描述】：

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

canvas.toDataURL();

在 internet explorer 8 中，我收到没有方法 toDataURL() 的错误。我相信这是因为 Internet Explorer 8 不支持 canvas 标签，并且 flot 必须使用解决方法。那么如何在新浏览器和 Internet Explorer 8 中仅打印页面中的浮动图？

【问题讨论】：

标签： javascript jquery html flot

【解决方案1】：

我在尝试打印流动图表时遇到了同样的问题。打开新窗口的另一种方法是将画布移动到页面顶部并隐藏其他所有内容，打印，然后将所有内容放回原处。这应该适用于现代浏览器以及 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 中打印，而不使用系统对话框打印，可能会弄乱您的样式。这只是铬。如果有人对此有解决方案，请告诉我。

【讨论】：

这成功了！我不得不将包装器放在我的标记中，但这是一个很小的代价！

【解决方案2】：

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

【讨论】：