WEB中前臺JS控制列印PDF檔案
阿新 • • 發佈:2019-01-22
最近遇到專案中需要在瀏覽器中一鍵列印 遠端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");
}
}
- 開啟瀏覽器視窗,頁面中進行列印,開始點選列印時,彈出一個新的視窗window.open(url,”_blank”);//url為生成PDF的url,在這個新的頁面中有PDF檔案的內容,而且網頁上也剛剛有列印的功能,這種看起來是最簡單的,但是對使用者而言,需要點選二次按鈕才能真正列印。所以,使用者體驗不會太好。
- adobe reader外掛的方法,獲取遠端PDF檔案URL,如果使用者安裝了PDF的瀏覽器支援,開啟後用戶的瀏覽器可以直接在瀏覽器中執行adobe reader載入項。然後由使用者選擇是否列印(一鍵列印PrintAll()或者PrintwithDialog())。實現簡單,但需安裝Adobe,在安裝中一定程度上相當影響使用者體驗。本文最終選擇這種方法。
- 百度文庫的方法,使用flash製作一個PDF閱讀器,在flash上面加上列印按鈕,不用使用者安裝了adobe reader閱讀器,實現的技術卻很高,而且使用者要求不進行預覽。
- 瀏覽器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); //列印預覽
}