国产一级a片免费看高清,亚洲熟女中文字幕在线视频,黄三级高清在线播放,免费黄色视频在线看

打開APP
userphoto
未登錄

開通VIP,暢享免費(fèi)電子書等14項(xiàng)超值服

開通VIP
Web表格打印頁面的生成 - amp@java - BlogJava

要把一個(gè)長(zhǎng)表格打印出來,要做到正確分頁,直接用HTML生成表格是不能滿足要求的:
1、如果把整個(gè)表格放在一頁,在打印時(shí)再自動(dòng)分頁,則有可能在某一表格行中間分頁,而且只能有一個(gè)表格頭,不能每頁一個(gè),因?yàn)槟悴恢罆?huì)在哪里分頁;
2、如果按照固定的行數(shù)分頁,由于每行的高度不一樣,就會(huì)造成有的頁不能填滿,有的卻太滿自動(dòng)分頁了。

原來考慮過一種方法:
利用Javascript動(dòng)態(tài)生成表格,每次往表格的最后插入一行,然后檢查表格高度,如果高度超過了一頁的最大高度,則把這一行刪除,新建一個(gè)表格,把這一行插入到新的表格里面,如此循環(huán),直到全部行插入完畢。但是,利用table的height屬性、style.height屬性都得不到表格的實(shí)際高度(只有設(shè)置了height屬性、style的height屬性才能取得這兩個(gè)值,但只是設(shè)置值,并不是實(shí)際值),于是就只能放棄了。

后來仔細(xì)查看了table的dom屬性,才知道它還有clientHeight,offsetHeight等屬性,這兩個(gè)才是表格的真正高度,它們之間的區(qū)別可看這里:
http://developer.mozilla.org/cn/docs/DOM:element.clientHeight
http://developer.mozilla.org/en/docs/DOM:element.offsetHeight
更直觀的可以看這里:
http://msdn.microsoft.com/library/default.asp?url=/workshop/author/om/measuring.asp



簡(jiǎn)單地說,clientHeight就是不包含border的高度,offsetHeight就是連border的高度。對(duì)于要打印的表格,border一般只有2px,所以用clientHeight和offsetHeight區(qū)別不大。

構(gòu)建這個(gè)頁面需要用到的:

table的insertRow(),deleteRow()方法,用來給表格增加、刪除一行(tr);
tr的insertCell()方法,用來給一行加入一格(td);
td的innerText屬性,用來給一格加入內(nèi)容。

CSS分頁要用到page-break-before:always(或page-break-after:aways)的樣式,遇到使用了該樣式的標(biāo)簽,就會(huì)在標(biāo)簽前面(或后面)強(qiáng)制分頁,于是可以在兩個(gè)表格之間加一個(gè)這樣的分頁。
為了顯示而不打印,還要用到<style>標(biāo)簽的media屬性,當(dāng)設(shè)置
<style media="print">
.noprint {display:none}
</style>
時(shí),用了noprint作為class的標(biāo)簽就只會(huì)顯示而不打印出來。

對(duì)于IE,還可以使用WebBrowser控件,彈出“頁面設(shè)置”窗口、“打印預(yù)覽”窗口、直接打印等功能。對(duì)于其他瀏覽器,則只能調(diào)用window.print()函數(shù)了。

JSF生成的中文都是用&#unicode;來表示的,其中unicode是中文字符的UNICODE編碼,通過innerText生成表格內(nèi)容時(shí),必須把這些東西轉(zhuǎn)換成真正的中文,否則會(huì)直接把這些符號(hào)插入到表格中,慘不忍睹。javascript里有個(gè)String.fromCharCode()函數(shù)可以把Unicode編碼轉(zhuǎn)換成字符。另外,通過innerHTML加入內(nèi)容也可把這些編碼正常顯示出來,但需要escape XML,以免把內(nèi)容當(dāng)作HTML標(biāo)簽渲染。


posted on 2006-11-07 10:11 amp@java 閱讀(318) 評(píng)論(5)  編輯 收藏 引用 收藏至365Key 所屬分類: JSF

評(píng)論

# re: Web表格打印頁面的生成 2006-11-08 02:18 emu
1、如果把整個(gè)表格放在一頁,在打印時(shí)再自動(dòng)分頁,則有可能在某一表格行中間分頁,而且只能有一個(gè)表格頭,不能每頁一個(gè),因?yàn)槟悴恢罆?huì)在哪里分頁;
2、如果按照固定的行數(shù)分頁,由于每行的高度不一樣,就會(huì)造成有的頁不能填滿,有的卻太滿自動(dòng)分頁了。

ie在打印的時(shí)候不但可以在每頁自動(dòng)添加,還可以自動(dòng)添加表腳,當(dāng)然還可以自動(dòng)判斷長(zhǎng)度分頁,實(shí)現(xiàn)這些都不需要半點(diǎn)腳本。請(qǐng)看這個(gè)例子(使用了內(nèi)置打印控件來預(yù)覽,如果被瀏覽器禁止了需要手工使用打印預(yù)覽功能或者打印出來)

<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function pageSetup(){try{WB.ExecWB(8,1)}catch(e){alert("您的瀏覽器不支持此功能")}}
function preview(){try{WB.ExecWB(7,1)}catch(e){alert("您的瀏覽器不支持此功能")}}
</SCRIPT>
<style>
td,th{border-bottom:1px solid black;width:70px}
thead{display:table-header-group}
tfoot{display:table-footer-group}
</style>
</HEAD>
<BODY>
<OBJECT classid=CLSID:8856F961-340A-11D0-A96B-00C04FD705A2 height=0 id=WB width=0 VIEWASTEXT></OBJECT>
<TABLE cellspacing=0 align=center>
<thead><th> 姓 名 </th><th> 地 址 </th><th> 籍 貫 </th><th>畢業(yè)學(xué)校</th><th> 年 齡 </th><th> 性 別 </th><th> 婚 否 </th></thead>
<tbody align=center>
<SCRIPT LANGUAGE="JavaScript">
<!--
var n=100;
for(var i=0;i<n;i++){
document.write("<tr>");
for(var j=0;j<7;j++)
document.write("<td>"+Math.round(Math.random()*10000)+
(Math.random()>.05?"":"<br>"+Math.round(Math.random()*10000))+
(Math.random()>.02?"":"<br>"+Math.round(Math.random()*10000))+
(Math.random()>.01?"":"<br>"+Math.round(Math.random()*10000))+
"</td>");
document.write("</tr>");
}
//-->
</SCRIPT>
</tbody>
<tfoot><th colspan=7 align=center style="width:100%">這 是 一 個(gè) 測(cè) 試</th></tfoot>
</TABLE>
</BODY>
<SCRIPT LANGUAGE="JavaScript">
preview();
</SCRIPT>
</HTML>

例子中特意使用腳本構(gòu)造了隨機(jī)高度的行。  回復(fù)
  

# re: Web表格打印頁面的生成 2006-11-08 02:25 emu
這個(gè)例子在firefox下面使用的時(shí)候頁腳有顯示不完整的現(xiàn)象。不知道是否firefox的打印預(yù)覽功能的bug。為tbody添加上display: table-row-group樣式后有一些改觀但是沒有完全解決。  回復(fù)
  

# re: Web表格打印頁面的生成 2006-11-08 22:04 amp@java
謝謝,我現(xiàn)在才知道還有display:table-header-group這個(gè)樣式。

不過不用腳本生成表格的話還是有可能會(huì)把行攔腰截?cái)?,上面那個(gè)不截?cái)啵且驗(yàn)樾懈弑容^小,我稍稍改了一下每行的內(nèi)容,就出現(xiàn)了:

<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function pageSetup(){try{WB.ExecWB(8,1)}catch(e){alert("您的瀏覽器不支持此功能")}}
function preview(){try{WB.ExecWB(7,1)}catch(e){alert("您的瀏覽器不支持此功能")}}
</SCRIPT>
<style>
td, th{border-bottom:1px solid black;width:70px}
thead{display:table-header-group}
tfoot{display:table-footer-group}
</style>
</HEAD>
<BODY>
<OBJECT classid=CLSID:8856F961-340A-11D0-A96B-00C04FD705A2 height=0 id=WB width=0 VIEWASTEXT></OBJECT>
<TABLE cellspacing=0 align=center border=1>
<thead><th> 姓 名 </th><th> 地 址 </th><th> 籍 貫 </th><th>畢業(yè)學(xué)校</th><th> 年 齡 </th><th> 性 別 </th><th> 婚 否

</th></thead>
<tbody align=center>
<SCRIPT LANGUAGE="JavaScript">
<!--
var n=100;
for(var i=0;i<n;i++){
document.write("<tr>");
for(var j=0;j<7;j++)
document.write("<td>有可能在某一表格行中間分頁在某一表格行中間分頁</td>");
document.write("</tr>");
}
//-->

</SCRIPT>
</tbody>
<tfoot><th colspan=7 align=center style="width:100%">這 是 一 個(gè) 測(cè) 試</th></tfoot>
</TABLE>
</BODY>
<SCRIPT LANGUAGE="JavaScript">
preview();
</SCRIPT>
</HTML>  回復(fù)
  

# re: Web表格打印頁面的生成 2006-11-09 01:27 emu
實(shí)際應(yīng)用當(dāng)中,就要考慮行高是否真的這么自由,分行是否真的這么不可接受了了。比如說,行高超過了一頁怎么辦,不得不分行的時(shí)候是否還需要保持每頁的表頭表腳,不用樣式而用腳本的話,表頭表腳要如何正確的呈現(xiàn)?

<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function pageSetup(){try{WB.ExecWB(8,1)}catch(e){alert("您的瀏覽器不支持此功能")}}
function preview(){try{WB.ExecWB(7,1)}catch(e){alert("您的瀏覽器不支持此功能")}}
</SCRIPT>
<style>
td, th{border-bottom:1px solid black;width:70px}
thead{display:table-header-group}
tfoot{display:table-footer-group}
</style>
</HEAD>
<BODY>
<OBJECT classid=CLSID:8856F961-340A-11D0-A96B-00C04FD705A2 height=0 id=WB width=0 VIEWASTEXT></OBJECT>
<TABLE cellspacing=0 align=center border=1>
<thead><th> 姓 名 </th><th> 地 址 </th><th> 籍 貫 </th><th>畢業(yè)學(xué)校</th><th> 年 齡 </th><th> 性 別 </th><th> 婚 否 </th></thead>
<tbody align=center>
<SCRIPT LANGUAGE="JavaScript">
document.write("<tr>");
for(var j=0;j<7;j++)
document.write("<td>"+(new Array(10).join("有可能在某一表格行中間分頁在某一表格行中間分頁"))+"</td>");
document.write("</tr>");
</SCRIPT>
</tbody>
<tfoot><th colspan=7 align=center style="width:100%">這 是 一 個(gè) 測(cè) 試</th></tfoot>
</TABLE>
</BODY>
<SCRIPT LANGUAGE="JavaScript">
preview();
</SCRIPT>
</HTML>   回復(fù)
  

# re: Web表格打印頁面的生成 2006-11-09 09:32 amp@java
行高超過一頁的情況是極少的,但一般3-4行文字的高度是經(jīng)常有的,這樣的高度就足以造成一行分兩頁,我的應(yīng)用中就遇到過,打印出來有點(diǎn)奇怪。使用腳本生成表格之后,每頁一個(gè)完整的表格,而且基本能滿一頁,看起來舒服點(diǎn)。

腳本可以生成任意HTML,當(dāng)判斷表格高度滿一頁的時(shí)候,就利用 page-break-before:always 樣式生成一個(gè)分頁符,再新建一個(gè)表格,這個(gè)表格就在下一頁了,可以通過腳本往里面加入新的內(nèi)容,表格的表頭和表腳都可以用腳本生成。另外,用innerHTML就可以在某標(biāo)簽范圍內(nèi)加入任意HTML語句,所以還可以生成其他的內(nèi)容。 
本站僅提供存儲(chǔ)服務(wù),所有內(nèi)容均由用戶發(fā)布,如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容,請(qǐng)點(diǎn)擊舉報(bào)。
打開APP,閱讀全文并永久保存 查看更多類似文章
猜你喜歡
類似文章
HTML表格概念、語法、操作、案例
JavaScript動(dòng)態(tài)生成表格
Bootstrap5 表格 | 菜鳥教程
bootstrap-table表格插件之服務(wù)器端分頁實(shí)例
四個(gè)好看的CSS樣式表格
bootstrap 基本表格
更多類似文章 >>
生活服務(wù)
分享 收藏 導(dǎo)長(zhǎng)圖 關(guān)注 下載文章
綁定賬號(hào)成功
后續(xù)可登錄賬號(hào)暢享VIP特權(quán)!
如果VIP功能使用有故障,
可點(diǎn)擊這里聯(lián)系客服!

聯(lián)系客服