2013-04-04 60 views
4

我目前使用http://www.flotcharts.org/作爲圖形插件。我正嘗試實現從內容包圍的頁面打印頁面圖的功能。我試圖打開一個新窗口並打印一個畫布對象,這樣我只能打印flot圖形,而且我已經成功完成了該操作。但是,要做到這一點,我需要將畫布製作爲一個圖像,以便我可以在新窗口中打開它,因爲我無法讓該窗口在新窗口上工作。在ie 8中打印flot圖

canvas.toDataURL(); 

在Internet Explorer 8中,我得到錯誤,沒有方法toDataURL()。我相信這是因爲Internet Explorer 8不支持canvas標籤,flot必須使用解決方法。那麼如何才能在新瀏覽器和Internet Explorer 8中打印頁面上的浮動圖?

回答

4

當我試圖打印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); 

}); 

注:印刷在鍍鉻,不使用系統對話框打印,可能會混淆你的風格。這只是鉻。如果有人有解決辦法,讓我知道。

+0

這工作!我不得不把這個包裝器放在我的標記中,但這是一個很小的代價來支付它的工作! – jacksonfiverniner 2013-04-04 21:21:42

1

您可能還想嘗試Flashcanvas(flashcanvas.net)而不是Excanvas;它應該支持DataURL。