1. 程式人生 > >WEB中前臺JS控制列印PDF檔案

WEB中前臺JS控制列印PDF檔案

最近遇到專案中需要在瀏覽器中一鍵列印 遠端PDF檔案,經過網上搜集資料最終選擇了在客戶端安裝adobe reader後,實現上從伺服器端下載一個pdf檔案流,在IE中用adobe外掛開啟(在前臺頁面中隱藏Object標籤),然後用adobe的列印選單通過printWithDialog()列印。
原始碼如下:

<input type="button" value="toPrinter" onclick="directpdfprint('')">
<div id="createPDFDIV" style="text-align:center;margin:0 auto;height:1px;width:1px"
></div> /** * PDF檔案直接列印 需安裝adobe reader,並在瀏覽器載入項中啟用Adobe載入項adobe PDF Reader; * 可以列印帶有漢字名稱的PDF檔案 */ function directpdfprint(srcFile) { debugger; var pdfprint = document.getElementById("createPDF"); if (pdfprint != undefined && pdfprint != null
) { var parentNode = pdfprint.parentNode; parentNode.removeChild(pdfprint); } var pdfprintdiv = document.getElementById("createPDFDIV"); var p = document.createElement("object"); try { p.id = "createPDF"; p.classid = "CLSID:CA8A9780-280D-11CF-A24D-444553540000"
; p.width = 1; p.height = 1; p.src = encodeURI(encodeURI(srcFile));// 處理中文名稱 pdfprintdiv.appendChild(p); p.printWithDialog();// 帶列印視窗的直接列印 // p.printAll();//直接列印 } catch (e) { // alert(e); $.messager.alert("提示", '請確保已安裝Adobe,並開啟Adobe載入項!' + e, "warning"); } }
  1. 開啟瀏覽器視窗,頁面中進行列印,開始點選列印時,彈出一個新的視窗window.open(url,”_blank”);//url為生成PDF的url,在這個新的頁面中有PDF檔案的內容,而且網頁上也剛剛有列印的功能,這種看起來是最簡單的,但是對使用者而言,需要點選二次按鈕才能真正列印。所以,使用者體驗不會太好。
  2. adobe reader外掛的方法,獲取遠端PDF檔案URL,如果使用者安裝了PDF的瀏覽器支援,開啟後用戶的瀏覽器可以直接在瀏覽器中執行adobe reader載入項。然後由使用者選擇是否列印(一鍵列印PrintAll()或者PrintwithDialog())。實現簡單,但需安裝Adobe,在安裝中一定程度上相當影響使用者體驗。本文最終選擇這種方法。
  3. 百度文庫的方法,使用flash製作一個PDF閱讀器,在flash上面加上列印按鈕,不用使用者安裝了adobe reader閱讀器,實現的技術卻很高,而且使用者要求不進行預覽。
  4. 瀏覽器window.print()的方法,利用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
        $("#printIframe")[0].contentWindow.print();//不知為什麼在IE中一直無法列印檔案

}

不知為什麼我在IE中一直無法列印PDF檔案,此外要使用瀏覽器自帶的列印功能,還需要去掉那些頁首頁尾資訊。
一、通過JavaScript 程式來設定,其實主要是用ActiveX控制元件來實現,出於安全方面的考慮,現在大多數瀏覽器已經禁用了“對未標記為可安全執行指令碼的ActiveX控制元件初始化並執行指令碼”這一功能。如下圖所示,
這個是以IE 8為例說明的,具體位置在:工具->Internet 選項->安全(最上面一排標籤的第二個)->選中“Internet”圖示時,單擊“自定義級別”

因為這一功能是禁用的,所以通常JavaScript或者其他指令碼都無法生效,即無法通過程式直接實現,需要先解除這一禁止項,程式才能起作用,但解除禁止項後會帶來安全方面的隱患。

相關JavaScript程式碼:

<script language="javascript">
<!--
var HKEY_Path = "HKEY_CURRENT_USER\\Software\\Microsoft\\Internet Explorer\\PageSetup\\"; // 定義登錄檔位置
// name的值可為header(頁首),footer(頁尾),margin_bottom(下邊距margin_left(左邊距),margin_right(右邊距),margin_top(上邊距)。
function PageSetup(name,value) {
try {
   var Wsh = new ActiveXObject("WScript.Shell");
   Wsh.RegWrite(HKEY_Path+name,value); // 修改登錄檔值
}catch(e) {
   //alert(e.name+" "+e.message);
   //alert('需要執行ActiveX物件後,才能進行列印設定。');
}
}
function setit() {
PageSetup("footer","");
PageSetup("header","");
window.print();
}
//-->
</script>

二、直接修改瀏覽器的設定,還是以IE8為例來進行說明

開啟要列印的網頁後,單擊“檔案”->“列印預覽”->頁面設定(圖示,如下圖所示)->頁首和頁尾都設定為空,這樣設定後,列印的時候就不會出現頁首頁尾資訊了。

三、直接修改登錄檔

開啟記事本,複製下面的程式

Windows Registry Editor Version 5.00

[HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer\PageSetup]
"footer"=""
"header"=""

另存為“去掉頁首頁尾.reg”,然後雙擊執行,確認即可。
收藏一個JS 實現簡單的頁面區域性列印的方法 :

function preview(oper)  
...{  
if (oper < 10)...{  
bdhtml=window.document.body.innerHTML;//獲取當前頁的html程式碼  
sprnstr="<!--startprint"+oper+"-->";//設定列印開始區域  
eprnstr="<!--endprint"+oper+"-->";//設定列印結束區域  
prnhtml=bdhtml.substring(bdhtml.indexOf(sprnstr)+18); //從開始程式碼向後取html  

prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr));//從結束程式碼向前取html  
window.document.body.innerHTML=prnhtml;  
window.print();  
window.document.body.innerHTML=bdhtml;  


} else ...{  
window.print();  
}  

}  

使用很簡單 將頁面內要列印的內容加入中間XXXXX
再加個列印按紐 onclick=preview(1)

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Test.aspx.cs" Inherits="WebApplication2.Test" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" language="javascript">
        function printdiv() {
            var newstr = document.getElementById("PrintContentDiv").innerHTML;   //獲得需要列印的內容
            // alert(newstr);
            var oldstr = document.body.innerHTML;   //儲存原先網頁的程式碼
            document.body.innerHTML = newstr; //將網頁內容更改成需要列印
            window.print();
            document.body.innerHTML = oldstr;   //將網頁還原
            return false;
        }

        //列印頁面預覽
        function printpreview() {
            var WebBrowser = '<OBJECT ID="WebBrowser1" WIDTH=0 HEIGHT=0 CLASSID="CLSID:8856F961-340A-11D0-A96B-00C04FD705A2"></OBJECT>';
            document.getElementById("divButton").style.display = "none";//隱藏列印及其列印預覽頁面
            document.body.insertAdjacentHTML('beforeEnd', WebBrowser); //在body標籤內加入html(WebBrowser activeX控制元件)
            WebBrowser1.ExecWB(7, 1); //列印預覽
        }