js控制網頁列印（js調用瀏覽器列印功能）

本文目錄一覽：

• 1、js瀏覽器列印設置列印次數
• 2、js調用瀏覽器的列印功能
• 3、請教一個在網頁中js控制默認橫向列印的問題
• 4、使用Javascript怎樣自動列印頁面
• 5、js如何實現頁面列印

js瀏覽器列印設置列印次數

普通報表工具欄上有列印按鈕，點擊該按鈕會彈出列印頁面。

思路一：通過工具欄中的列印按鈕，進行控制。設置全局變數–列印次數，如果列印次數為0，則直接列印，不再跳轉到列印頁面。或者在參數欄中新增一個列印按鈕，在裡面寫JS腳本。不通過工具欄中的列印按鈕實現這個功能。

思路二：在跳轉的列印頁面，只要點擊一次列印按鈕，則一方面執行列印指令，另一方面自動關閉列印頁面。同時主模板自動刷新數據，重新載入列印次數為1。

思路三：在跳轉的列印頁面，獲取全局變數–列印次數，如果為0，則列印按鈕有效。否則列印按鈕不可用，為灰色狀態。

js調用瀏覽器的列印功能

最近做了個運用瀏覽器列印合同的功能，之前沒做過，記錄一下其中遇到的問題，列印頁面建議使用新開窗口

原型圖如下：

頁面內容不多說，表格直接用table繪製，在頁面頂部加一個懸浮的列印按鈕。點擊列印按鈕調用印表機(ctrl+p)

實現的列印預覽效果如下圖：

谷歌瀏覽器可在列印預覽-更多設置-選項中去除頁眉和頁腳的勾選

列印的頁面不可出現橫向滾動條，否則會出現列印出來的內容顯示不全的問題。

請教一個在網頁中js控制默認橫向列印的問題

列印

一、普通列印（整頁打）

這個不用多說，直接按CTRL+P或引用window.print();

二、列印網頁內部分內容（自定義）

分三種方法實現

1、用css控制

引用:

@media print

.a {display:block}

.b {display:hidden}

把你不想列印的部分class設為b

首先在網頁中添加：

引用:

OBJECT id=”WebBrowser” height=”0″ width=”0″ classid=”CLSID:8856F961-340A-

11D0-A96B-00C04FD705A2″　VIEWASTEXT /OBJECT

然後就可以依次加入功能按鈕了：

引用:

input type=”button” value=”列印” input type=”button” value=”直接列印”

input type=”button” value=”頁面設置”

input type=”button” value=”列印預覽” INPUT type=”button” value=”關閉窗口”

將這兩塊東西放到 center class=noprint /center 就不會列印這些按鈕了。當然要定義noprint了：

style media=”print” .Noprint { DISPLAY: none } /style 只要把不想列印的東西的css設置成noprint就可以了。

現在就實現了基本的web列印，需要注意的情況如下：

a. 必須將ie的internet選項的安全設置中對於沒有標記為安全的ActiveX控制項進行…設置成提示或者啟用，否則會報錯，導致不可用。

b. 如果在vs.net編輯環境下編輯該頁面，它經常自動的給object添加多餘的參數，有了這些東西，列印就會出錯，所以要記得最後保存的時候刪除它們。

2、用javascript列印固定標籤內的內容

a、在頁面的代碼頭部處加入JavaScript：

引用:

script language=javascript

function doPrint() {

bdhtml=window.document.body.innerHTML;

sprnstr=” !–startprint– “;

eprnstr=” !–endprint– “;

prnhtml=bdhtml.substr(bdhtml.indexOf(sprnstr)+17);

prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr));

window.document.body.innerHTML=prnhtml;

window.print();

}

/script

b、在頁面正文處加上 !–startprint– 與 !–endprint– 標識。

也就是在需要用戶列印保存的正文所對應的html處附加上。同時，如果採用小偷程序獲得遠程數據並需列印，可將此等數據置於該定義標籤之內即可。

c、截取內容部分已完成，現在加個「列印」的鏈接：

a href=”javascript:;” 列印 /a

3、windows自帶功能

按住滑鼠的左鍵，將你想要列印的內容選定，然後單擊右鍵選擇「列印」，在彈出的列印對話框中的「頁面範圍」中選擇「選定範圍」就可以只列印你選擇的內容了。

（三）列印去掉/添加頁眉頁腳

引用:

script language=”JavaScript”

var hkey_root,hkey_path,hkey_key

hkey_root=”HKEY_CURRENT_USER”

hkey_path=”\\Software\\Microsoft\\Internet Explorer\\PageSetup\\”

//設置網頁列印的頁眉頁腳為空

function pagesetup_null(){

try{

var RegWsh = new ActiveXObject(“WScript.Shell”)

hkey_key=”header”

RegWsh.RegWrite(hkey_root+hkey_path+hkey_key,””)

hkey_key=”footer”

RegWsh.RegWrite(hkey_root+hkey_path+hkey_key,””)

}catch(e){}

}

//設置網頁列印的頁眉頁腳為默認值

function pagesetup_default(){

try{

var RegWsh = new ActiveXObject(“WScript.Shell”)

hkey_key=”header”

RegWsh.RegWrite(hkey_root+hkey_path+hkey_key,”wb頁碼，p/P”)hkey_key=”footer”

RegWsh.RegWrite(hkey_root+hkey_path+hkey_key,”ubd”)

}catch(e){}

}

/script

input type=”button” value=”清空頁碼” onclick=pagesetup_null()

input type=”button” value=”恢復頁碼” onclick=pagesetup_default()

複製出去，看下效果就可以了

使用Javascript怎樣自動列印頁面

1、js實現（可實現局部列印）

[html] view plain copy

input id=”btnPrint” type=”button” value=”列印” onclick=”javascript:window.print();” /

input id=”btnPrint” type=”button” value=”列印預覽” onclick=preview(1) /

style type=”text/css” media=print

.noprint{display : none }

/style

p class=”noprint”不需要列印的地方/p

script

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();

}

}

/script

pXXXXX/p

!–startprint1–要列印的內容!–endprint1–

再加個列印按紐 onclick=preview(1)

2、調用windows底層列印，報安全警告，不建議使用（不支持局部列印）

[html] view plain copy

HTML

HEAD

TITLEjavascript列印-列印頁面設置-列印預覽代碼/TITLE

META http-equiv=Content-Type content=”text/html; charset=gb2312″ /

SCRIPT language=javascript

function printsetup(){

// 列印頁面設置

wb.execwb(8,1);

}

function printpreview(){

// 列印頁面預覽

wb.execwb(7,1);

}

function printit()

{

if (confirm(‘確定列印嗎？’)) {

wb.execwb(6,6);

}

}

/SCRIPT

/HEAD

BODY

DIV align=center

OBJECT id=wb height=0 width=0

classid=CLSID:8856F961-340A-11D0-A96B-00C04FD705A2 name=wb/OBJECT

INPUT onclick=javascript:printit() type=button value=列印 name=button_print /

INPUT onclick=javascript:printsetup(); type=button value=列印頁面設置 name=button_setup /

INPUT onclick=javascript:printpreview(); type=button value=列印預覽 name=button_show /

一按開始的減肥了卡時間段

/DIV

/BODY

/HTML

3、jQuery實現（支持局部列印）

[html] view plain copy

script type=”text/javascript” src=”jquery-1.4.2.min.js”/script

script type=”text/javascript” src=”jquery.PrintArea.js”/script

script

$(document).ready(function(){

$(“input#biuuu_button”).click(function(){

$(“div#myPrintArea”).printArea();

});

});

/script

input id=”biuuu_button” type=”button” value=”列印”/input

div id=”myPrintArea”…..文本列印部分…../div

js如何實現頁面列印

HTMLHEADTITLEjavascript列印-列印頁面設置-列印預覽代碼/TITLE

META http-equiv=Content-Type content=”text/html; charset=gb2312″ /

SCRIPT language=javascript

function printsetup(){

// 列印頁面設置

wb.execwb(8,1);

}

function printpreview(){

// 列印頁面預覽

wb.execwb(7,1);

}

function printit()

{

if (confirm(‘確定列印嗎？’)) {

wb.execwb(6,6)

}

}

/SCRIPT

/HEAD

BODY

DIV align=center

OBJECT id=wb height=0 width=0

classid=CLSID:8856F961-340A-11D0-A96B-00C04FD705A2 name=wb/OBJECT

INPUT onclick=javascript:printit() type=button value=列印 name=button_print /

INPUT onclick=javascript:printsetup(); type=button value=列印頁面設置 name=button_setup /

INPUT onclick=javascript:printpreview(); type=button value=列印預覽 name=button_show /

/DIV

/BODY

/HTML