WEB打印分页类(JS)

<HTML>

<HEAD>

<TITLE>print</TITLE>

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

}

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

** 作者：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>

<tr>

</tr>

<tr>

</tr>

</table>

</tr>

<tr>

<td>

贴片电路

</td>

<td>

ADE7755ARS

</td>

<td width="125">世健国际贸易（上海）有限公司</td>

</tr>

<tr>

<td align="center">2

</td>

<td>

贴片电容

</td>

<td>

C2012X7R1H104KT

</td>

<td width="125">南京商络电子有限公司</td>

</tr>

<tr>

<td align="center">3

</td>

<td>

贴片电容

</td>

<td>

C2012COG1H200JT

</td>

<td width="125">南京商络电子有限公司</td>

</tr>

<tr>

<td align="center">4

</td>

<td>

贴片电容

</td>

<td>

C2012X7R1H333KT

</td>

<td width="125">南京商络电子有限公司</td>

</tr>

<tr>

<td align="center">5

</td>

<td>

压敏电阻

</td>

<td>

GND20D681K

</td>

<td width="125">苏州中普电子有限公司</td>

</tr>

<tr>

<td align="center">6

</td>

<td>

晶振

</td>

<td>

HC-49U/S 3.579545MHz 20pf 带垫片

</td>

<td width="125">武汉海创电子有限公司</td>

</tr>

<tr>

<td align="center">7

</td>

<td>

安规电容

</td>

<td>

275V-X2-0.47μF

</td>

<td width="125">上海昱电电子有限公司</td>

</tr>

<tr>

<td align="center">8

</td>

<td>

电解电容

</td>

<td>

CD112 16V 33μF

</td>

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

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

</tr>

<tr>

<td align="center">9

</td>

<td>

电解电容

</td>

<td>

CD112S 16V 220μF

</td>

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

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

</tr>

<tr>

<td align="center">10

</td>

<td>

电解电容

</td>

<td>

CD112S 35V 470μF

</td>

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

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

</tr>

<tr>

<td align="center">11

</td>

<td>

插件电阻

</td>

<td>

RSF2BJ 470Ω

</td>

<td width="125">上海凡元电子有限公司</td>

</tr>

<tr>

<td align="center">12

</td>

<td>

发光二极管

</td>

<td>

L-314LRC-A-SS

</td>

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

<td width="125">上海沪鼎电子有限公司</td>

</tr>

<tr>

<td align="center">13

</td>

<td>

插件二、三极管

</td>

<td>

1N4744A

</td>

</tr>

<tr>

<td align="center">14

</td>

<td>

磁珠

</td>

<td>

B62

</td>

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

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

</tr>

<tr>

<td align="center">15

</td>

<td>

晶振

</td>

<td>

CFS206 32.768kHz 20ppm/12.5pf

</td>

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

<td width="125">上海创邦国际贸易有限公司</td>

</tr>

<tr>

<td align="center">16

</td>

<td>

贴片电阻

</td>

<td>

RC0805JR-071K2

</td>

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

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

</tr>

<tr>

<td align="center">17

</td>

<td>

贴片电阻

</td>

<td>

RC0805FR-071K2

</td>

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

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

</tr>

<tr>

<td align="center">18

</td>

<td>

贴片电阻

</td>

<td>

RC0805JR-0710R

</td>

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

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

</tr>

<tr>

<td align="center">19

</td>

<td>

贴片电阻

</td>

<td>

RC0805JR-0710K

</td>

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

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

</tr>

<tr>

<td align="center">20

</td>

<td>

贴片电阻

</td>

<td>

RC0805JR-07150K

</td>

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

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

</tr>

<tr>

<td align="center">21

</td>

<td>

贴片电阻

</td>

<td>

RC0805FR-071K

</td>

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

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

</tr>

<tr>

<td align="center">22

</td>

<td>

贴片电阻

</td>

<td>

RC0805JR-072K4

</td>

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

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

</tr>

<tr>

<td align="center">23

</td>

<td>

贴片电阻

</td>

<td>

RC0805JR-0720K

</td>

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

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

</tr>

<tr>

<td align="center">24

</td>

<td>

贴片电阻

</td>

<td>

RC0805JR-072K

</td>

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

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

</tr>

<tr>

<td align="center">25

</td>

<td>

贴片电阻

</td>

<td>

RC0805JR-07390K

</td>

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

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

</tr>

<tr>

<td align="center">26

</td>

<td>

贴片电阻

</td>

<td>

RC0805JR-0739K

</td>

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

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

</tr>

<tr>

<td align="center">27

</td>

<td>

贴片电阻

</td>

<td>

RC0805JR-074K7

</td>

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

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

</tr>

</table>

<tr>

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

</tr>

</table>

<tr>

</td>

</tr>

</table>

</BODY>

</HTML>

欢迎访问江西搜才网

posted on 2005-12-13 21:04 ttyp 阅读(5619) 评论(16) 编辑收藏网摘所属分类: 脚本

#1楼 2006-05-01 16:59 华新坤[未注册用户]

怎样设定才能不打印打印前和打印后及打印?
回复引用

#2楼 [楼主] 2006-05-01 22:03 ttyp

说什么啊
回复引用查看

#3楼 2006-05-04 15:54 华新坤[未注册用户]

就是在页面上不打印出"打印前"和"打印后"及"打印"按钮
回复引用

#4楼 2006-11-09 20:11 leo[匿名][未注册用户]

分页打印后，为什么到最后要打印多一张空白纸的？
回复：华新坤：你用css="notprint"就能不打印出来了
回复引用

#5楼 [楼主] 2006-11-09 23:03 ttyp

@leo[匿名]
还以为没什么人用呢,改进了2个BUG没上传

1.多打空白分页
2.IE中,分页数宏的BUG

现在已经是最新的了
回复引用查看

#6楼 2006-11-10 20:36 leo[匿名][未注册用户]

@media print
{}{}{}{
.notprint
{
display:none;
}
.PageNext
{}{}{}{
page-break-after:always;
}
}

请问:
1.{}{}{}样式这几个括号有什么作用的?
2.如果每页都增加打印时间,又如何设置?
3.如果数据的表头是多层,如两层,在第一页表头显示不正常,多显示一行,用pp.hideRows("1");就可以解决,这又为什么?
有个好奇怪的现象:我将上面的代码变成HTML文件后,按"打印"数据有分开,但是不能分页打印,但是我把打印类用到其它地方就可以用.

回复引用

#7楼 2006-11-10 20:47 leo[匿名][未注册用户]

还有一个问题:
如果数据只有一页时,这个问题还存在:1.多打空白分页
回复引用

#8楼 [楼主] 2006-11-10 20:50 ttyp

1.{}是多于的,是blog里程序着色的BUG,可以删除
2.打印时间的,你可以参考

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

做一个宏,如作为时间宏,然后替换

3.多行表头暂时没有考虑到,抱歉
回复引用查看

#9楼 2006-11-10 22:24 leo[匿名][未注册用户]

谢谢了！
请问这个又是什么原因呀：
如果数据只有一页时,这个问题还存在:1.多打空白分页
回复引用

#10楼 [楼主] 2006-11-11 00:39 ttyp

谢谢测试,做个判断吧
把
me.board.innerHTML = page.join("\n<div class='pageNext'></div>");

换成

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

回复引用查看

#11楼 2006-11-11 17:14 leo[匿名][未注册用户]

不用谢！
按你的做法，还是出现:如果数据只有一页时,这个问题还存在:1.多打空白分页
回复引用

#12楼 2007-06-14 11:34 web报表

强大的web打印及套打的解决方案,在: http://www.fcsoft.com.cn" target="_new">http://www.fcsoft.com.cn
回复引用查看

#13楼 2007-08-10 13:01 阿林[未注册用户]

能不能不用天参数，能自动分页打印
回复引用

#14楼 2007-09-29 14:24 黑火[未注册用户]

问个问题啊，你这个打印分页类，我使用的时候，为什么打印时，不按分页走呢？
比如：分页的时候，分了4页，打印出来为3页，第一页上面打印出来分页的1和2的一部分，第二页也是这样的，打印出来2和3的一部分！
怎么会出现这个问题呢？
还有打印的时候，页头和页尾都打印出来了，貌似这个打印分页没有起作用，为什么呢？我就是把你这个例子分别给存成HTML 和ASP ，又添加的一些数据（添加数据的时候，发现，必须有序号，而且序号还不能一样，不然打印不出来！），测试就是这个问题，老大，你这个类，还更新吗？能不能帮我一下，看看怎么会出现这个问题，我对JS不太懂！谢谢
我的信箱：heihuo@126.com
回复引用