[轉]關于打印

每頁都有的表頭和打印分頁

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>無標題文檔</title>
<style>
@media print{
INPUT {display:none}
}
</style>
</head>

<body>

<TABLE border="0" style="font-size:9pt;" width="300px" align="center">
<THEAD style="display:table-header-group;font-weight:bold">
<TR><TD colspan="2" align="center" style="font-weight:bold;border:3px double red">每頁都有的表頭</TD></TR>
</THEAD>
<TBODY style="text-align:center"">
<TR><TD>表格內容</TD><TD>表格內容</TD></TR>
<TR><TD>表格內容</TD><TD>表格內容</TD></TR>
<TR><TD>表格內容</TD><TD>表格內容</TD></TR>
<TR><TD>表格內容</TD><TD>表格內容</TD></TR>
<TR><TD>表格內容</TD><TD>表格內容</TD></TR>
<TR><TD>表格內容</TD><TD>表格內容</TD></TR>
<TR style="page-break-after:always;"><TD>表格內容</TD><TD>表格內容</TD></TR>
<TR><TD>表格內容</TD><TD>表格內容</TD></TR>
<TR><TD>表格內容</TD><TD>表格內容</TD></TR>
<TR><TD>表格內容</TD><TD>表格內容</TD></TR>
<TR><TD>表格內容</TD><TD>表格內容</TD></TR>
<TR><TD>表格內容</TD><TD>表格內容</TD></TR>
<TR><TD>表格內容</TD><TD>表格內容</TD></TR>
<TR style="page-break-after:always;"><TD>表格內容</TD><TD>表格內容</TD></TR>
<TR><TD>表格內容</TD><TD>表格內容</TD></TR>
<TR><TD>表格內容</TD><TD>表格內容</TD></TR>
<TR><TD>表格內容</TD><TD>表格內容</TD></TR>
<TR><TD>表格內容</TD><TD>表格內容</TD></TR>
<TR><TD>表格內容</TD><TD>表格內容</TD></TR>
<TR><TD>表格內容</TD><TD>表格內容</TD></TR>
<TR style="page-break-after:always;"><TD>表格內容</TD><TD>表格內容</TD></TR>
</TBODY>
<TFOOT style="display:table-footer-group;font-weight:bold">
<TR>
<TD colspan="2" align="center" style="font-weight:bold;border:3px double blue">每頁都有的表尾</TD>
</TR>
</TFOOT>
</TABLE>
<input type=button value=" 打? 印 " onclick=javascript:window.print()>
</body>
</html>

在 WEB 中實現打印分頁

?

要動態生成一個頁面,ASP從數據庫中生成, 要根據具體情況分頁打印,請問改怎么實現分頁打印?

解答:

page-break-after版本：CSS2　 ?兼容性：IE4+　繼承性：無?

參數：

auto: 假如需要在對象之后插入頁分割符

always: 始終在對象之后插入頁分割符

avoid:避免在對象后面插入頁分割符

left:在對象后面插入頁分割符直到它到達一個空白的左頁邊

right: 在對象后面插入頁分割符直到它到達一個空白的右頁邊

null:空值。IE5用來取消頁分割符設置

說明：

檢索或設置對象后出現的頁分割符。IE5僅支持always值和空白值（null）。

在IE4中此屬性不作用于br對象，但是IE5作用。

對應的腳本特性為pageBreakAfter。請參閱我編寫的其他書目。

示例：

p ?{ ?page-break-after: ?always;}???

另一實例:
<HTML>
<HEAD>
<TITLE>print</TITLE>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<style>
/**//*
?*??? 打印相關
*/
@media print
{}{
??? .notprint
??? {
??????? display:none;
??? }
??? .PageNext
??? {}{
??????? page-break-after:always;
??? }????
}

@media screen
{}{
??? .notprint
??? {
??????? display:inline;
??????? cursor:hand;
??? }
}

.text1
{}{
??? width: 120px;
??? overflow: hidden;
??? text-overflow:ellipsis;
}
.text2
{}{
??? width: 80px;
??? overflow: hidden;
??? text-overflow:ellipsis;
}
</style>

/**//*?
**??? ==================================================================================================?
**??? 類名：CLASS_PRINT?
**??? 功能：打印分頁?
**??? 示例：?
??? ---------------------------------------------------------------------------------------------------?
?
??????? var pp = new CLASS_PRINT();

??????? window.onload = function(){
??????????? pp.header = document.getElementById("tabHeader");
??????????? pp.content= document.getElementById("tabDetail");
??????????? pp.footer = document.getElementById("tabFooter");

??????????? pp.hideCols("5,7");???
??????????? pp.hideRows("3,15");
??????????? pp.pageSize = 10;???
??????? }

??????? <BODY onbeforeprint="pp.beforePrint()" onafterprint="pp.afterPrint()">

?
??? ---------------------------------------------------------------------------------------------------?
**??? 作者：ttyp?
**??? 郵件：ttyp@21cn.com?
**??? 日期：2005-12-13?
**??? ==================================================================================================?
*/
function CLASS_PRINT()
{
??? this.header??????? = null;
??? this.content??? = null;
??? this.footer??????? = null;
??? this.board??????? = null;
??? this.pageSize??? = 10;

??? var me??????????? = this;

??? //哈希表類
??? function Hashtable()
??? {
??????? this._hash??????? = new Object();
??????? this.add??????? = function(key,value){
??????????????????????????? if(typeof(key)!="undefined"){
??????????????????????????????? if(this.contains(key)==false){
??????????????????????????????????? this._hash[key]=typeof(value)=="undefined"?null:value;
??????????????????????????????????? return true;
??????????????????????????????? } else {
??????????????????????????????????? return false;
??????????????????????????????? }
??????????????????????????? } else {
??????????????????????????????? return false;
??????????????????????????? }
??????????????????????? }
??????? this.remove??????? = function(key){delete this._hash[key];}
??????? this.count??????? = function(){var i=0;for(var k in this._hash){i++;} return i;}
??????? this.items??????? = function(key){return this._hash[key];}
??????? this.contains??? = function(key){return typeof(this._hash[key])!="undefined";}
??????? this.clear??????? = function(){for(var k in this._hash){delete this._hash[k];}}

??? }

??? //字符串轉換為哈希表
??? this.str2hashtable = function(key,cs){
???????
??????????? var _key??? = key.split(/,/g);
??????????? var _hash??? = new Hashtable();
??????????? var _cs??????? = true;

???????
??????????? if(typeof(cs)=="undefined"||cs==null){
??????????????? _cs = true;
??????????? } else {
??????????????? _cs = cs;
??????????? }

??????????? for(var i in _key){
??????????????? if(_cs){
??????????????????? _hash.add(_key[i]);
??????????????? } else {
??????????????????? _hash.add((_key[i]+"").toLowerCase());
??????????????? }

??????????? }
??????????? return _hash;
??????? }

??? this._hideCols??? = this.str2hashtable("");
??? this._hideRows??? = this.str2hashtable("");

??? this.hideCols = function(cols){
??????? me._hideCols = me.str2hashtable(cols)
??? }

??? this.isHideCols = function(val){???
??????? return??? me._hideCols.contains(val);
??? }

??? this.hideRows = function(rows){
??????? me._hideRows = me.str2hashtable(rows)
??? }

??? this.isHideRows = function(val){???
??????? return??? me._hideRows.contains(val);
??? }

??? this.afterPrint = function()
??? {
??????? var table = me.content;???????
???????
??????? if(typeof(me.board)=="undefined"||me.board==null){???????
??????????? me.board = document.getElementById("divPrint");
??????????? if(typeof(me.board)=="undefined"||me.board==null){
??????????????? me.board = document.createElement("div");
??????????????? document.body.appendChild(me.board);
??????????? }
??????? }

??????? if(typeof(table)!="undefined"){
??????????? for(var i =0;i<table.rows.length;i++){
??????????????? var tr = table.rows[i];
??????????????? for(var j=0;j<tr.cells.length;j++){
??????????????????? if(me.isHideCols(j)){
??????????????????????? tr.cells[j].style.display = "";
??????????????????? }
??????????????? }
??????????? }
??????? }

??????? me.content.style.display??? = '';
??????? me.header.style.display??????? = '';
??????? me.footer.style.display??????? = '';
??????? me.board.innerHTML??????????? = '';

??? }

??? this.beforePrint = function(){

??????? var table = me.content;???

??????? if(typeof(me.board)=="undefined"||me.board==null){???????
??????????? me.board = document.getElementById("divPrint");
??????????? if(typeof(me.board)=="undefined"||me.board==null){
??????????????? me.board = document.createElement("div");
??????????????? document.body.appendChild(me.board);
??????????? }
??????? }

??????? if(typeof(table)!="undefined"&&this.hideCols.length>0){???????
???????????
??????????? for(var i =0;i<table.rows.length;i++){
??????????????? var tr = table.rows[i];
??????????????? for(var j=0;j<tr.cells.length;j++){
??????????????????? if(me.isHideCols(j)){???????????????????
??????????????????????? tr.cells[j].style.display = "none";
??????????????????? }
??????????????? }
??????????? }
??????? }
???
???????
??????? ///開始分頁???
??????? var pageSize = this.pageSize;
???????
??????? var head??? = me.header;
??????? var foot??? = me.footer;
???????
??????? var page??? = new Array();
??????? var rows??? = "";???
??????? var rowIndex= 1;

??????? var cp??????? = 0;
??????? var tp??????? = 0;
???????
???????
??????? for(i=1;i<table.rows.length;i++){???????????????
??????????? if(this.isHideRows(i)==false){
??????????????? if((((rowIndex-1)%pageSize)==0&&rowIndex>1)||i==table.rows.length){???????????????????????????????
??????????????????? page[page.length] = getTable(head,table,rows,foot);
???????????????????????????????????????????????????
??????????????????? rows??? = getOuterHTML(table.rows[i]) + "\n" ;
??????????????????? rowIndex= 2;
???????????????????????????????????????????????????????????????????????????
??????????????? } else {
??????????????????? rows??? += getOuterHTML(table.rows[i]) + "\n";
??????????????????? rowIndex++;
??????????????? }
??????????? }
??????? }
???????
??????? if(rows.length>0){
??????????? page[page.length] = getTable(head,table,rows,foot);
??????? }

??????? tp = page.length;

??????? for(var i=0;i<page.length;i++){
??????????? page[i] = page[i].replace(/\/g,(i+1)+'/' + tp).replace(/\<!--cp--\>/g,i+1).replace(/\<!--tp--\>/g,tp);
??????? }
???????
???????????????????
??????? head.style.display??????? = 'none';
??????? foot.style.display??????? = 'none';
??????? table.style.display??????? = 'none';
???????
??????? me.board.innerHTML = page.join("");
??? }

function getOuterHTML (node) {

??? if(typeof(node)!="undefined"&&typeof(node.outerHTML)!="undefined"){
??????? return node.outerHTML;
??? }

??? var emptyElements = {
????? HR: true, BR: true, IMG: true, INPUT: true
??? };
??? var specialElements = {
????? TEXTAREA: true
??? };

??? var html = '';
??? switch (node.nodeType){
??????? case Node.ELEMENT_NODE:
??????????? html += '<';
??????????? html += node.nodeName;
??????????? if (!specialElements[node.nodeName]) {
??????????????? for (var a = 0; a < node.attributes.length; a++)
??????????????????? html += ' ' + node.attributes[a].nodeName.toUpperCase() + '="' + node.attributes[a].nodeValue + '"';
??????????????? html += '>';
??????????????? if (!emptyElements[node.nodeName]){
??????????????????? html += node.innerHTML;
??????????????????? html += '<\/' + node.nodeName + '>';
??????????????? }
??????????? }
??????????? else
??????????????? switch (node.nodeName){
??????????????????? case 'TEXTAREA':
??????????????????????? var content = '';
??????????????????????? for (var a = 0; a < node.attributes.length; a++)
??????????????????????????? if (node.attributes[a].nodeName.toLowerCase() != 'value')
??????????????????????????????? html += ' ' + node.attributes[a].nodeName.toUpperCase() + '="' + node.attributes[a].nodeValue + '"';
??????????????????????????? else
??????????????????????????????? content = node.attributes[a].nodeValue;
??????????????????????????? html += '>';
??????????????????????????? html += content;
??????????????????????????? html += '<\/' + node.nodeName + '>';
??????????????????????? break;
??????????????? }
??????????? break;
??????? case Node.TEXT_NODE:
??????????? html += node.nodeValue;
??????????? break;
??????? case Node.COMMENT_NODE:
??????????? html += '<!' + '--' + node.nodeValue + '--' + '>';
??????????? break;
??? }
??? return html;
}

??? function getTable(header,table,content,footer){
??????? var htm = "";

??????? if(typeof(header)!="undefined"){
??????????? htm += getOuterHTML(header);
??????? }

??????? if(typeof(table)!="undefined"){???????
??????????? htm += "\n<" + table.tagName;
???????????
??????????? for(var i =0;i<table.attributes.length;i++){
??????????????? if(table.attributes[i].specified){
??????????????????? if(table.attributes[i].name=="style")
??????????????????????? htm += " style='" + table.style.cssText + "'";
??????????????????? else
??????????????????????? htm += " " + table.attributes[i].nodeName + "='" + table.attributes[i].nodeValue + "'";
??????????????? }???????
??????????? }???
???????????
??????????? if(table.rows.length>0){
??????????????? htm += ">\n" + getOuterHTML(table.rows[0]) + content + "</" + table.tagName + ">";
??????????? } else {
??????????????? htm += ">\n" + content + "</" + table.tagName + ">\n";
??????????? }???????
??????? }

??????? if(typeof(footer)!="undefined"){
??????????? htm += getOuterHTML(footer);
??????? }

??????? htm += "\n<div class='pageNext'></div>"
???????
??????? return htm;
??? }

??? if(!window.attachEvent){
??????? window.attachEvent = function(){window.addEventListener(arguments[0].substr(2),arguments[1],arguments[2]);}
??? }
}

var pp = new CLASS_PRINT();

window.onload = function()
{

??? pp.header = document.getElementById("tabHeader");
??? pp.content= document.getElementById("tabDetail");
??? pp.footer = document.getElementById("tabFooter");

??? pp.hideCols("5,7");???
??? pp.hideRows("3,15");
??? pp.pageSize = 10;???
}

//-->
</script>
</HEAD>
<BODY onbeforeprint="pp.beforePrint()" onafterprint="pp.afterPrint()">

??? <tr>
??? <td align="center">1</td>
??? <td>
??? 貼片電路
??? 
??? </td>
??? <td>
??? 
??? 
??? ADE7755ARS
??? 
??? </td>
??? <td align="center">ADI</td>
??? <td align="right">1000</td>
??? <td width="125">世健國際貿易（上海）有限公司</td>
??? <td align="right">1003</td>
??? <td align="center">59</td>
??? <td align="center">2005-11-04</td>
??? </tr>

??? <tr>
??? <td align="center">2
??? </td>
??? <td>
??? 
??? 貼片電容
??? 
??? </td>
??? <td>
???
??? 
??? 
??? C2012X7R1H104KT
??? 
??? </td>
??? <td align="center">TDK</td>
??? <td align="right">8000</td>
??? <td width="125">南京商絡電子有限公司</td>
??? <td align="right">8000</td>
??? <td align="center">4000</td>
??? <td align="center">2005-11-04</td>
??? </tr>

??? <tr>
??? <td align="center">3
??? </td>
??? <td>
??? 
??? 貼片電容
??? 
??? </td>
??? <td>
???
??? 
??? 
??? C2012COG1H200JT
??? 
??? </td>
??? <td align="center">TDK</td>
??? <td align="right">2000</td>
??? <td width="125">南京商絡電子有限公司</td>
??? <td align="right">4000</td>
??? <td align="center">4000</td>
??? <td align="center">2005-11-04</td>
??? </tr>

??? <tr>
??? <td align="center">4
??? </td>
??? <td>
??? 
??? 貼片電容
??? 
??? </td>
??? <td>
???
??? 
??? 
??? C2012X7R1H333KT
??? 
??? </td>
??? <td align="center">TDK</td>
??? <td align="right">4000</td>
??? <td width="125">南京商絡電子有限公司</td>
??? <td align="right">4000</td>
??? <td align="center">4000</td>
??? <td align="center">2005-11-04</td>
??? </tr>

??? <tr>
??? <td align="center">5
??? </td>
??? <td>
??? 
??? 壓敏電阻
??? 
??? </td>
??? <td>
???
??? 
??? 
??? GND20D681K
??? 
??? </td>
??? <td align="center">中普</td>
??? <td align="right">1000</td>
??? <td width="125">蘇州中普電子有限公司</td>
??? <td align="right">1000</td>
??? <td align="center">1000</td>
??? <td align="center">2005-11-04</td>
??? </tr>

??? <tr>
??? <td align="center">6
??? </td>
??? <td>
??? 
??? 晶振
??? 
??? </td>
??? <td>
???
??? 
??? 
??? HC-49U/S 3.579545MHz 20pf 帶墊片
??? 
??? </td>
??? <td align="center">海創</td>
??? <td align="right">1000</td>
??? <td width="125">武漢海創電子有限公司</td>
??? <td align="right">1000</td>
??? <td align="center">200</td>
??? <td align="center">2005-11-04</td>
??? </tr>

??? <tr>
??? <td align="center">7
??? </td>
??? <td>
??? 
??? 安規電容
??? 
??? </td>
??? <td>
???
??? 
??? 
??? 275V-X2-0.47μF
??? 
??? </td>
??? <td align="center">昱電</td>
??? <td align="right">1000</td>
??? <td width="125">上海昱電電子有限公司</td>
??? <td align="right">1000</td>
??? <td align="center">1000</td>
??? <td align="center">2005-11-04</td>
??? </tr>

??? <tr>
??? <td align="center">8
??? </td>
??? <td>
??? 
??? 電解電容
??? 
??? </td>
??? <td>

??? 
??? 
??? CD112 16V 33μF
??? 
??? </td>
??? <td align="center">Samyoung</td>
??? <td align="right">2000</td>
??? <td width="125">上海文得貿易有限公司</td>
??? <td align="right">2000</td>
??? <td align="center">2000</td>
??? <td align="center">2005-11-04</td>
??? </tr>

??? <tr>
??? <td align="center">9
??? </td>
??? <td>
??? 
??? 電解電容
??? 
??? </td>
??? <td>
???
??? 
??? 
??? CD112S 16V 220μF
??? 
??? </td>
??? <td align="center">Samyoung</td>
??? <td align="right">1000</td>
??? <td width="125">上海文得貿易有限公司</td>
??? <td align="right">2000</td>
??? <td align="center">2000</td>
??? <td align="center">2005-11-04</td>
??? </tr>

??? <tr>
??? <td align="center">10
??? </td>
??? <td>
??? 
??? 電解電容
??? 
??? </td>
??? <td>
???
??? 
??? 
??? CD112S 35V 470μF
??? 
??? </td>
??? <td align="center">Samyoung</td>
??? <td align="right">1000</td>
??? <td width="125">上海文得貿易有限公司</td>
??? <td align="right">1000</td>
??? <td align="center">1000</td>
??? <td align="center">2005-11-04</td>
??? </tr>

??? <tr>
??? <td align="center">11
??? </td>
??? <td>
??? 
??? 插件電阻
??? 
??? </td>
??? <td>
???
??? 
??? 
??? RSF2BJ 470Ω
??? 
??? </td>
??? <td align="center">KOA</td>
??? <td align="right">1000</td>
??? <td width="125">上海凡元電子有限公司</td>
??? <td align="right">1000</td>
??? <td align="center">100</td>
??? <td align="center">2005-11-04</td>
??? </tr>

??? <tr>
??? <td align="center">12
??? </td>
??? <td>
??? 
??? 發光二極管
??? 
??? </td>
??? <td>
???
??? 
??? 
??? L-314LRC-A-SS
??? 
??? </td>
??? <td align="center">HUADING</td>
??? <td align="right">1000</td>
??? <td width="125">上海滬鼎電子有限公司</td>
??? <td align="right">1000</td>
??? <td align="center">1000</td>
??? <td align="center">2005-11-04</td>
??? </tr>

??? <tr>
??? <td align="center">13
??? </td>
??? <td>
??? 
??? 插件二、三極管
??? 
??? </td>
??? <td>
???
??? 
??? 
??? 1N4744A
??? 
??? </td>
??? <td align="center">MCC</td>
??? <td align="right">1000</td>
??? <td width="125">勵智電子（上海）有限公司</td>