當我試圖打印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);
});
注:印刷在鍍鉻,不使用系統對話框打印,可能會混淆你的風格。這只是鉻。如果有人有解決辦法,讓我知道。
這工作!我不得不把這個包裝器放在我的標記中,但這是一個很小的代價來支付它的工作! – jacksonfiverniner 2013-04-04 21:21:42