天天看點

利用JQuery在網頁上列印PDF

項目需求是這樣的,在HTML網頁上點選列印,然後彈出chrome列印視窗,視窗中是背景生成的PDF檔案。其中PDF檔案是由背景servlet生成的。

第一種想法是,點選列印時,彈出一個新的視窗

在這個新的頁面中有PDF檔案的内容,而且網頁上也剛剛有列印的功能,這種看起來是最簡單的,但是對使用者而言,需要點選二次按鈕才能真正列印。是以,使用者體驗不會太好。

第二種想法是利用iframe,将PDF檔案的内容包含其中,這個時候調用window.print()來彈出列印視窗。

//建立一個空的iframe,因為如果每次請求都生成PDF,那麼是不必要的。
<iframe style="display:none" id="printIframe"></iframe>

$(document).ready(function(){
    ....
    $("#printIframe").load(function(){//等待iframe加載完成後再執行doPrint.每次iframe設定src之後都會重新執行這部分代碼。
        doPrint();
    });
    ....
});
//點選列印按鈕,觸發事件】
function printPDF(){
    var src = $("#printIframe").attr("src");
    if(!src){//當src為空,即第一次加載時才指派,如果是需要動态生成的話,那麼條件要稍稍變化一下
        $("#printIframe").attr("src","./attachment/Images.pdf");//暫時靜态PDF檔案
    }else
        doPrint();
}
function doPrint(){
    $("#printIframe")[].contentWindow.print(); 
}
           

一般的用法是使用window.print()方法來列印,但是當調用window.print()方法時将會顯示的是網頁正文的内容,而不是iframe的過程,有的網友說把網頁的focus置為iframe即可,但是我調研了半天沒找到一個好方法。

于是我想window隻是一個對象,那麼如果我能擷取到iframe的window對象不就可以了?于是用了contentWindow的方法,果然好使。

這種方法看起來會更清爽一些,然後使用者體驗也還行。