js實現網頁列印功能

『壹』 js調用瀏覽器的列印功能

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

原型圖如下：

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

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

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

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

『貳』 JS-列印word的程序

JS-列印word的模板程序

我們在做項目中經常遇到“列印表格”的功能，在此介紹一下我所用過的列印方法。

一、比較簡單的做法，word另存轉化為html文件的方式。分析如下：

1、首先我們需要在office中用wrod畫好文件的模板，然後將其另存為thm網頁形式。

2、將其改為jsp頁面，這樣我們就可以文件中使用後來傳過來的變數值。此時就是我們傳統的jsp方式，後台定義參數，然後前台獲取，將變數值寫在我們需要顯示的地方。

3、對於表格，我們可以用循環來控制。

4、這樣做打比較簡單，缺點word模板不能修改，一旦表格做個微小的變化，那我們的工作量也不小，因為word轉化後的代碼很難讀懂，要在代碼上控制其樣式，是相當的困難，所以不推薦這種做法。

（註：1、 在做模板時，我們可以先在需要顯示變數值的地方首先定義好值，然後在jsp中直接替換就行。

2、在jsp頁面中，在首先加入“<%@ page contentType="application/msword;charset=UTF-8"%>”， 以標識此頁面為word文件。

3、如果需要點擊時直接打開word文件，而非彈出“保存、打開”對話框，則需要刪除“xmlns:w="urn:schemas-microsoft-com:office:office"”代碼即可。

下面我們介紹另一種更常用的方法，此方法的有點是：修改word模板文件，不會影響程序。

二、用JS控制的列印方式，具體如下：

1、首先畫word模板，在需要動態顯示內容的地方插入“標簽”。方法如下：在word中，選中需要被替換的內容-->插入-->書簽，為其定義好名字即可，其它類似。

2、將做好的模板文件另存為模板dot文件。

做到這基本就差不多了，接下來就是後台代碼發揮的時候了。

3、在後台封裝參數值。

4、調用JS函數列印。

為了更為直觀的介紹，下面用一完整的例子介紹。

先把代碼貼出來：

1、JS模板文件，適用范圍：

a. 根據文檔文件，所有要顯示的內容都定義為書簽。

b. 純表格文件。如果為多個表格或表格中嵌套表格，則需要稍加修改。

c. 文檔、表格混搭型。

代碼如下：

/** * 得到 文件模板的目錄 * @param {} fileName * @return {} */ function getFileTemplatePath(fileName){ var path = "/page/printTemplate/" + fileName + ".dot"; var url="http://"+window.location.hostname + ":" + window.location.port+ this.getContextPath() + path; return url; } /** * 調出word模板，並為標簽賦值 * @param {} jsonObj json對象 * @param {} fileName 所要打開的word文件名 */ function printWord(jsonObj,fileName){ var word=new ActiveXObject("Word.Application"); word.Visible=true; var url= this.getFileTemplatePath(fileName); word.Documents.add(url) for(i=0;i<jsonObj.length;i++){ if ((jsonObj[i].text)!="list"){ range=word.ActiveDocument.Bookmarks(jsonObj[i].text).Range; range.text=jsonObj[i].value; }else{ var myTable=word.ActiveDocument.Tables(1); var rowsCount = myTable.Rows.Count; var iRow=2; for(j=0;j<jsonObj[i].value.length;j++){ if (iRow > rowsCount){ myTable.Rows.Add(); } var length = jsonObj[i].value[j].length; for(var k=0; k<length; k++){ myTable.Rows(iRow).Cells(k + 1).Range.Text=jsonObj[i].value[j][k].value; } iRow ++; } } } word.Visible=true; }

2、看到代碼就會明白，這段代碼需要一個JSON類型的參數。

下一步我們所做的工作就是要在JSON上做文章了。 附後台代碼（封裝JSON，java)

類：PrintJSONObjectSet

import org.json.JSONArray; import org.json.JSONObject; public class PrintJSONObjectSet { private JSONArray ja; public PrintJSONObjectSet(){ ja = new JSONArray(); } public JSONArray getJSONArray(){ return ja; } public JSONObject json(Object key, Object value) throws Exception{ JSONObject jo = new JSONObject(); value = "".equals(value) || value == null "" : value; jo.put("text", key); jo.put("value", value); return jo; } public void put(Object key, Object value) throws Exception{ ja.put(json(key,value)); } public void put(Object obj){ ja.put(obj); } }

列印封裝的方法：

/** * 列印出國(境)證明 * @return * @throws Exception */ public String printChuGuoJingZhengMing() throws Exception{ JSONArray ja = new JSONArray(); GroupInfo group = this.getGroupInfo(); String[] countrys = this.getCountrys(); if(countrys != null){ for(int c=0; c<countrys.length; c++){ PrintJSONObjectSet js = new PrintJSONObjectSet(); SeedGroupRef seed = seedImpl.getCzcz(getGroupInfoId(),countrys[c]); js.put("year", seed.getFileYear()); js.put("fileNum", seed.getFileNum()); js.put("leader",group.getLeader()); js.put("groupCount", group.getGroupCount()); js.put("country",countrys[c]); js.put("dispCode",getDispCode()); js.put("printYear", DateFunc.getPrintYear()); js.put("printMonth", DateFunc.getPrintMonth()); js.put("printDay", DateFunc.getPrintDay()); PrintJSONObjectSet js2 = new PrintJSONObjectSet(); List<MemberInfo> memberList = this.getIsSefMembers(); MemberInfo member; for(int i=0; i<memberList.size(); i++){ PrintJSONObjectSet js3 = new PrintJSONObjectSet(); member = memberList.get(i); js3.put("name1",member.getName()); js3.put("passportNum1",member.getPassportNum()); if(++i < memberList.size()){ member = memberList.get(i); js3.put("name2",member.getName()); js3.put("passportNum2",member.getPassportNum()); } js2.put(js3.getJSONArray()); } js.put("list", js2.getJSONArray()); ja.put(js.getJSONArray()); } } PrintWriter out; System.out.println(ja.toString()); try{ out = response.getWriter(); out.print(ja.toString()); out.close(); }catch(Exception e){ e.printStackTrace(); } return null; }

對於JSON的說明：

1、最外層為一個JSONArray，這個JSON中包含多個JSONArra，其控制文檔的數量。

2、在第二層JSONArray中，包含多個JSONObject。其中每個JSONObject包含一個JSONObject對象。

每個JSONObject對象以{"text":"name","value":"張三"}的形式存儲。

3、遇到表格時，則在第二個JSONArray中，封裝類型{"text":"list","value":[[{"text":"","value:""}]]}形式。

也就是說此時的JSONObject的值必須為list,只有這樣，JS中才能將其作為表格來輸入。

其中在名為 list 的JSONObject對象中，包含多個JSONArray，用來控制行數。

每個JSONArray中包含多個類型第2條中形式的JSONObject對象，用來控制列數。

調用方法：（採用aJax）

Ext.Ajax.request({ url : href, success : function(response, options) { var responseText = response.responseText; var jsonObj=eval('(' + responseText + ')'); for(var i=0; i<jsonObj.length; i++){ printWord(jsonObj[i],'chuGuoJingZhengMing'); } }, failure : function(response, options) { alert("fail!"); } });

例子中的word文件：

如果國家為多個時，則會列印出多個文件。

對於代碼的說明：

在後台代碼封裝中，我們將 書簽名 和 值 封裝為一個JSON對象，這樣JS處理中，我們就方便了，不用再逐個寫出每個書簽的`名字，供其查找、然後賦值。

在後台代碼中，我這里在列印時需要根據國家來確定所要列印的文檔數量，如果為多個國家則要列印出多個文檔，所以在後台封裝，最外層又加了一個JSONArray，JS中也多了一道循環，這個可以根據需要自己調整。

特殊情況下，需要我們單獨處理，如多個表格的情況下，或者表格嵌套表格。

這里說一下表格嵌套的情況下，如果獲得被嵌套的表格對象。

如：var myTable=word.ActiveDocument.Tables(1).Rows(1).Cells(1).Tables(1);

這里得到的是文檔中第一個表格的第一行的每一列中的每一個表格對象，其它類似。

range=word.ActiveDocument.Bookmarks("name").Range 的意思是 得到文檔中 書簽名為“name”的對象。

range.text=“張三” 為其賦值為 張三。

這里採用的是dot文件，因為dot文件存在於伺服器上，如果使用doc文件作為模板文件的話，在多人訪問時，會出現線程鎖死的情況，故採用dot文件。

附加一段生成好的JSON串：

[ [ {"text":"year","value":2011}, {"text":"fileNum","value":5}, {"text":"leader","value":"彭瓚"}, {"text":"groupCount","value":5}, {"text":"country","value":"俄羅斯"}, {"text":"dispCode","value":"dispCode"}, {"text":"printYear","value":"2011"}, {"text":"printMonth","value":"04"}, {"text":"printDay","value":"07"}, {"text":"list","value":[[ {"text":"name1","value":"彭瓚"}, {"text":"passportNum1","value":""}, {"text":"name2","value":"郭沁明"}, {"text":"passportNum2","value":""} ], [ {"text":"name1","value":"張三五"}, {"text":"passportNum1","value":""}, {"text":"name2","value":"彭瓚"}, {"text":"passportNum2","value":""} ], [ {"text":"name1","value":"郭沁明"}, {"text":"passportNum1","value":""}, {"text":"name2","value":"張三五"}, {"text":"passportNum2","value":""} ] ] } ], [ {"text":"year","value":2011}, {"text":"fileNum","value":7}, {"text":"leader","value":"彭瓚"}, {"text":"groupCount","value":5}, {"text":"country","value":"韓國"}, {"text":"dispCode","value":"dispCode"}, {"text":"printYear","value":"2011"}, {"text":"printMonth","value":"04"}, {"text":"printDay","value":"07"}, {"text":"list","value":[ [ {"text":"name1","value":"彭瓚"}, {"text":"passportNum1","value":""}, {"text":"name2","value":"郭沁明"}, {"text":"passportNum2","value":""} ], [ {"text":"name1","value":"張三五"}, {"text":"passportNum1","value":""}, {"text":"name2","value":"彭瓚"}, {"text":"passportNum2","value":""} ], [ {"text":"name1","value":"郭沁明"}, {"text":"passportNum1","value":""}, {"text":"name2","value":"張三五"}, {"text":"passportNum2","value":""} ] ] } ] ]

;

『叄』 js 怎麼實現列印頁面的一部分內容

<table width="100%" align="center" style="border-collapse: collapse">
<tbody>
<tr class="no_print" height="20" bgcolor="#f7f7f7" align="center">
<td height="25" colspan="3">
<input type="button" name="print" value="列印" onclick="preview('PrintContentDiv')" />
</td>
</tr>
</tbody>
</table>
<div id="PrintContentDiv">
<!--這里寫內版容權-->
</div>

『肆』 js控制橫向列印web網頁內容

用這個Lodop插件 兼容IEChromeFirefox ····

支持橫向列印，票據列印，修改頁眉頁腳等等，定製性很強大··

關鍵是免費的·做Web列印神器,

LODOP.SET_PRINT_PAGESIZE(1,4500,1600,"證書列印");//第一個參數設置為1是橫向，2是縱向

『伍』 JS調用瀏覽器的列印功能

最近做一個後台管理系統，其中有個用戶需求要求調用 瀏覽器列印 的功能去列印訂單，本來以為需要用戶手動（ Ctrl+P ）、或者打開 右鍵菜單 ，再選擇列印功能。後來經過查詢文檔，JS提供了調用瀏覽器列印功能的API。

頁面（全屏彈窗）內容設計如上圖所示：

其中頁面右下方有兩個按鈕：

這樣可以調用瀏覽器列印功能，但是列印預覽頁面上會出現右下方的兩個按鈕，這肯定是用戶不想看到的。
因此還需要根據 CSS媒體查詢 來區分：

歡迎訪問： 個人博客地址

『陸』 請教一個在網頁中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,"&w&b頁碼，&p/&P")hkey_key="footer"
RegWsh.RegWrite(hkey_root+hkey_path+hkey_key,"&u&b&d")
}catch(e){}
}
</script >
<input type="button" value="清空頁碼" onclick=pagesetup_null() >
<input type="button" value="恢復頁碼" onclick=pagesetup_default() >

復制出去，看下效果就可以了

『柒』 如何利用JS控制列印某頁面內某些內容

樓主看這里，把分給我啊。
引用的網路專地址屬：
地址：http://hi..com/vhook/item/63c63e179f347821f6625cd9

『捌』 js如何實現頁面列印

<HTML><HEAD><TITLE>javascript列印-列印頁面設置-列印預覽代碼</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>

『玖』 使用Javascript怎樣自動列印頁面

1、js實現（可實現局部列印）
[html] view plain
<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>
<p>XXXXX</p>
<!--startprint1-->要列印的內容<!--endprint1-->
再加個列印按紐 onclick=preview(1)
2、調用windows底層列印，報安全警告，不建議使用（不支持局部列印）
[html] view plain
<HTML>
<HEAD>
<TITLE>javascript列印-列印頁面設置-列印預覽代碼</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
<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>

『拾』 javascript JS 實現列印頁面功能 支持多瀏覽器,兼容IE,火狐,谷歌

您好！很高興為您答疑。
在B/S結構下，web頁面列印是一個非常專難以解決的問題，目前如果希屬望通過js實現兼容性的列印，基本是不可能的。採用對css依賴度較低的表格布局，然後作為隱藏層，在列印時通過js調用是目前最有效的手段，而scriptx之類，是無法跨瀏覽器平台使用的。
如果對我們的回答存在任何疑問，歡迎繼續問詢。