WEB打印分页类(JS)

最新推荐文章于 2024-05-27 21:50:54 发布

weixin_30736301

最新推荐文章于 2024-05-27 21:50:54 发布

阅读量185

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/ttyp/archive/2005/12/13/296528.html

版权

< 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 >

< script language ="javascript" >

<!--

/**//**

** ==================================================================================================

** 类名：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;

}

---------------------------------------------------------------------------------------------------

** 作者：ttyp

** 邮件：ttyp@21cn.com

** 日期：2006-11-10

** ==================================================================================================

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(/\<\!--ct-->/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';

if(page.length>1)

{

me.board.innerHTML = page.join("\n<div class='pageNext'></div>");

}else

{

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

}

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

< table border =0 width ="95%" align =center id ="tabHeader" >

< tr >

< td align ="center" > 元件列表 </ td >

</ tr >

< tr >

< td > 日期:2005年12月12日 </ td >

</ tr >

</ table >

< table border =1 width ="95%" style ="border-collapse:collapse;" align =center cellpadding =3 id ="tabDetail" >

< tr bgcolor ='#e8f4ff' >

< td align ="center" width ="35" > 序号 </ td >

< td width ="160" > 产品名称 </ td >

< td > 规格型号 </ td >

< td align ="center" > 品牌 </ td >

< td align ="right" > 数量 </ td >

< td width ="125" > 供应商 </ td >

< td align ="right" > 实际数量 </ td >

< td align ="center" > 包装 </ td >

< td align ="center" > 需用日期 </ td >

</ tr >

< 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 >

< td align ="right" > 5000 </ td >

< td align ="center" > 5000 </ td >

< td align ="center" > 2005-11-04 </ td >

</ tr >

< tr >

< td align ="center" > 14

</ td >

< td >

磁珠

</ td >

< td >

B62

</ td >

< td align ="center" > JONES </ td >

< td align ="right" > 2000 </ td >

< td width ="125" > 北京中石伟业技术有限公司 </ td >

< td align ="right" > 5000 </ td >

< td align ="center" > 5000 </ td >

< td align ="center" > 2005-11-04 </ td >

</ tr >

< tr >

< td align ="center" > 15

</ td >

< td >

晶振

</ td >

< td >

CFS206 32.768kHz 20ppm/12.5pf

</ td >

< td align ="center" > CITIZEN </ 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" > 16

</ td >

< td >

贴片电阻

</ td >

< td >

RC0805JR-071K2

</ td >

< td align ="center" > YAGEO </ td >

< td align ="right" > 1000 </ td >

< td width ="125" > 上海衡谦贸易有限公司 </ td >

< td align ="right" > 5000 </ td >

< td align ="center" > 5000 </ td >

< td align ="center" > 2005-11-04 </ td >

</ tr >

< tr >

< td align ="center" > 17

</ td >

< td >

贴片电阻

</ td >

< td >

RC0805FR-071K2

</ td >

< td align ="center" > YAGEO </ td >

< td align ="right" > 2000 </ td >

< td width ="125" > 上海衡谦贸易有限公司 </ td >

< td align ="right" > 5000 </ td >

< td align ="center" > 5000 </ td >

< td align ="center" > 2005-11-04 </ td >

</ tr >

< tr >

< td align ="center" > 18

</ td >

< td >

贴片电阻

</ td >

< td >

RC0805JR-0710R

</ td >

< td align ="center" > YAGEO </ td >

< td align ="right" > 1000 </ td >

< td width ="125" > 上海衡谦贸易有限公司 </ td >

< td align ="right" > 5000 </ td >

< td align ="center" > 5000 </ td >

< td align ="center" > 2005-11-04 </ td >

</ tr >

< tr >

< td align ="center" > 19

</ td >

< td >

贴片电阻

</ td >

< td >

RC0805JR-0710K

</ td >

< td align ="center" > YAGEO </ td >

< td align ="right" > 1000 </ td >

< td width ="125" > 上海衡谦贸易有限公司 </ td >

< td align ="right" > 5000 </ td >

< td align ="center" > 5000 </ td >

< td align ="center" > 2005-11-04 </ td >

</ tr >

< tr >

< td align ="center" > 20

</ td >

< td >

贴片电阻

</ td >

< td >

RC0805JR-07150K

</ td >

< td align ="center" > YAGEO </ td >

< td align ="right" > 1000 </ td >

< td width ="125" > 上海衡谦贸易有限公司 </ td >

< td align ="right" > 5000 </ td >

< td align ="center" > 5000 </ td >

< td align ="center" > 2005-11-04 </ td >

</ tr >

< tr >

< td align ="center" > 21

</ td >

< td >

贴片电阻

</ td >

< td >

RC0805FR-071K

</ td >

< td align ="center" > YAGEO </ td >

< td align ="right" > 2000 </ td >

< td width ="125" > 上海衡谦贸易有限公司 </ td >

< td align ="right" > 5000 </ td >

< td align ="center" > 5000 </ td >

< td align ="center" > 2005-11-04 </ td >

</ tr >

< tr >

< td align ="center" > 22

</ td >

< td >

贴片电阻

</ td >

< td >

RC0805JR-072K4

</ td >

< td align ="center" > YAGEO </ td >

< td align ="right" > 1000 </ td >

< td width ="125" > 上海衡谦贸易有限公司 </ td >

< td align ="right" > 5000 </ td >

< td align ="center" > 5000 </ td >

< td align ="center" > 2005-11-04 </ td >

</ tr >

< tr >

< td align ="center" > 23

</ td >

< td >

贴片电阻

</ td >

< td >

RC0805JR-0720K

</ td >

< td align ="center" > YAGEO </ td >

< td align ="right" > 1000 </ td >

< td width ="125" > 上海衡谦贸易有限公司 </ td >

< td align ="right" > 5000 </ td >

< td align ="center" > 5000 </ td >

< td align ="center" > 2005-11-04 </ td >

</ tr >

< tr >

< td align ="center" > 24

</ td >

< td >

贴片电阻

</ td >

< td >

RC0805JR-072K

</ td >

< td align ="center" > YAGEO </ td >

< td align ="right" > 1000 </ td >

< td width ="125" > 上海衡谦贸易有限公司 </ td >

< td align ="right" > 5000 </ td >

< td align ="center" > 5000 </ td >

< td align ="center" > 2005-11-04 </ td >

</ tr >

< tr >

< td align ="center" > 25

</ td >

< td >

贴片电阻

</ td >

< td >

RC0805JR-07390K

</ td >

< td align ="center" > YAGEO </ td >

< td align ="right" > 3000 </ td >

< td width ="125" > 上海衡谦贸易有限公司 </ td >

< td align ="right" > 5000 </ td >

< td align ="center" > 5000 </ td >

< td align ="center" > 2005-11-04 </ td >

</ tr >

< tr >

< td align ="center" > 26

</ td >

< td >

贴片电阻

</ td >

< td >

RC0805JR-0739K

</ td >

< td align ="center" > YAGEO </ td >

< td align ="right" > 1000 </ td >

< td width ="125" > 上海衡谦贸易有限公司 </ td >

< td align ="right" > 5000 </ td >

< td align ="center" > 5000 </ td >

< td align ="center" > 2005-11-04 </ td >

</ tr >

< tr >

< td align ="center" > 27

</ td >

< td >

贴片电阻

</ td >

< td >

RC0805JR-074K7

</ td >

< td align ="center" > YAGEO </ td >

< td align ="right" > 1000 </ td >

< td width ="125" > 上海衡谦贸易有限公司 </ td >

< td align ="right" > 5000 </ td >

< td align ="center" > 5000 </ td >

< td align ="center" > 2005-11-04 </ td >

</ tr >

</ table >

< table width ="95%" border =0 id ="tabFooter" align =center cellpadding =4 >

< tr >

< td >  </ td >< td align =right > 上海市XXX有限公司 </ td >

</ tr >

</ table >

< div id ="divPrint" ></ div >

< table width ="95%" align =center >

< tr >

< td align =right >

< input type =button id ="bp" onclick ="pp.beforePrint();this.disabled = true;document.getElementById('ap').disabled = false;" value ="打印前" style ="border:1px solid #000000" >   < input id ="ap" type =button onclick ="pp.afterPrint();this.disabled = true;document.getElementById('bp').disabled = false;" value ="打印后" style ="border:1px solid #000000" disabled =true >   < input type =button value ='打印' onclick ="window.print()" style ="border:1px solid #000000" >

</ td >

</ tr >

</ table >

</ BODY >

</ HTML >

转载于:https://www.cnblogs.com/ttyp/archive/2005/12/13/296528.html

weixin_30736301

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
WEB打印分页类(JS)

<HTML><HEAD><TITLE>print</TITLE><metahttp-equiv="content-type"content="text/html;charset=gb2312"><style>/**//***打印相关*/@mediaprint{}{.notprint{...
复制链接

扫一扫