4

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

canvas.toDataURL();

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

4

2 回答 2

4

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

于 2013-04-04T21:08:29.800 回答
1

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

于 2013-04-05T04:09:49.863 回答