博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
javaScript实现网页表格打印功能
阅读量:4290 次
发布时间:2019-05-27

本文共 6463 字,大约阅读时间需要 21 分钟。

一、首先,新建一个html文件,在html中导入js文件,如下:

js中的代码如下:

var CreatedOKLodop7766=null;//====判断是否需要安装CLodop云打印服务器:====function needCLodop(){    try{	var ua=navigator.userAgent;	if (ua.match(/Windows\sPhone/i) !=null) return true;	if (ua.match(/iPhone|iPod/i) != null) return true;	if (ua.match(/Android/i) != null) return true;	if (ua.match(/Edge\D?\d+/i) != null) return true;		var verTrident=ua.match(/Trident\D?\d+/i);	var verIE=ua.match(/MSIE\D?\d+/i);	var verOPR=ua.match(/OPR\D?\d+/i);	var verFF=ua.match(/Firefox\D?\d+/i);	var x64=ua.match(/x64/i);	if ((verTrident==null)&&(verIE==null)&&(x64!==null)) 		return true; else	if ( verFF !== null) {		verFF = verFF[0].match(/\d+/);		if ((verFF[0]>= 42)||(x64!==null)) return true;	} else 	if ( verOPR !== null) {		verOPR = verOPR[0].match(/\d+/);		if ( verOPR[0] >= 32 ) return true;	} else 	if ((verTrident==null)&&(verIE==null)) {		var verChrome=ua.match(/Chrome\D?\d+/i);				if ( verChrome !== null ) {			verChrome = verChrome[0].match(/\d+/);			if (verChrome[0]>=42) return true;		};	};        return false;    } catch(err) {return true;};};//====页面引用CLodop云打印必须的JS文件:====if (needCLodop()) {	var head = document.head || document.getElementsByTagName("head")[0] || document.documentElement;	var oscript = document.createElement("script");	oscript.src ="http://localhost:8000/CLodopfuncs.js?priority=1";	head.insertBefore( oscript,head.firstChild );	//引用双端口(8000和18000)避免其中某个被占用:	oscript = document.createElement("script");	oscript.src ="http://localhost:18000/CLodopfuncs.js?priority=0";	head.insertBefore( oscript,head.firstChild );};//====获取LODOP对象的主过程:====function getLodop(oOBJECT,oEMBED){     var strHtmInstall="
打印控件未安装!点击这里执行安装,安装后请刷新页面或重新进入。"; var strHtmUpdate="
打印控件需要升级!点击这里执行升级,升级后请重新进入。"; var strHtm64_Install="
打印控件未安装!点击这里执行安装,安装后请刷新页面或重新进入。"; var strHtm64_Update="
打印控件需要升级!点击这里执行升级,升级后请重新进入。"; var strHtmFireFox="
(注意:如曾安装过Lodop旧版附件npActiveXPLugin,请在【工具】->【附加组件】->【扩展】中先卸它)"; var strHtmChrome="
(如果此前正常,仅因浏览器升级或重安装而出问题,需重新执行以上安装)"; var strCLodopInstall="
CLodop云打印服务(localhost本地)未安装启动!点击这里执行安装,安装后请刷新页面。"; var strCLodopUpdate="
CLodop云打印服务需升级!点击这里执行升级,升级后请刷新页面。"; var LODOP; try{ var isIE = (navigator.userAgent.indexOf('MSIE')>=0) || (navigator.userAgent.indexOf('Trident')>=0); if (needCLodop()) { try{ LODOP=getCLodop();} catch(err) {}; if (!LODOP && document.readyState!=="complete") {alert("C-Lodop没准备好,请稍后再试!"); return;}; if (!LODOP) { if (isIE) document.write(strCLodopInstall); else document.documentElement.innerHTML=strCLodopInstall+document.documentElement.innerHTML; return; } else { if (CLODOP.CVERSION<"2.0.9.0") { if (isIE) document.write(strCLodopUpdate); else document.documentElement.innerHTML=strCLodopUpdate+document.documentElement.innerHTML; }; if (oEMBED && oEMBED.parentNode) oEMBED.parentNode.removeChild(oEMBED); if (oOBJECT && oOBJECT.parentNode) oOBJECT.parentNode.removeChild(oOBJECT); }; } else { var is64IE = isIE && (navigator.userAgent.indexOf('x64')>=0); //=====如果页面有Lodop就直接使用,没有则新建:========== if (oOBJECT!=undefined || oEMBED!=undefined) { if (isIE) LODOP=oOBJECT; else LODOP=oEMBED; } else if (CreatedOKLodop7766==null){ LODOP=document.createElement("object"); LODOP.setAttribute("width",0); LODOP.setAttribute("height",0); LODOP.setAttribute("style","position:absolute;left:0px;top:-100px;width:0px;height:0px;"); if (isIE) LODOP.setAttribute("classid","clsid:2105C259-1E0C-4534-8141-A753534CB4CA"); else LODOP.setAttribute("type","application/x-print-lodop"); document.documentElement.appendChild(LODOP); CreatedOKLodop7766=LODOP; } else LODOP=CreatedOKLodop7766; //=====Lodop插件未安装时提示下载地址:========== if ((LODOP==null)||(typeof(LODOP.VERSION)=="undefined")) { if (navigator.userAgent.indexOf('Chrome')>=0) document.documentElement.innerHTML=strHtmChrome+document.documentElement.innerHTML; if (navigator.userAgent.indexOf('Firefox')>=0) document.documentElement.innerHTML=strHtmFireFox+document.documentElement.innerHTML; if (is64IE) document.write(strHtm64_Install); else if (isIE) document.write(strHtmInstall); else document.documentElement.innerHTML=strHtmInstall+document.documentElement.innerHTML; return LODOP; }; }; if (LODOP.VERSION<"6.2.1.5") { if (needCLodop()) document.documentElement.innerHTML=strCLodopUpdate+document.documentElement.innerHTML; else if (is64IE) document.write(strHtm64_Update); else if (isIE) document.write(strHtmUpdate); else document.documentElement.innerHTML=strHtmUpdate+document.documentElement.innerHTML; return LODOP; }; //===如下空白位置适合调用统一功能(如注册语句、语言选择等):=== LODOP.SET_LICENSES("","13528A153BAEE3A0254B9507DCDE2839","",""); //=========================================================== return LODOP; } catch(err) {alert("getLodop出错:"+err);};};

二、在html中加入script,如下:

三、在html中点击按钮启动打印就好,html中的所有代码如下:

WEB打印控件LODOP的样例二:打印当前页面的内容

打印当前页面的内容

 《表单一》 
A B C
A01 中-001 C1x
A021 1111 7㎥
A03
有:1234567890
韩-111 C3x
《表单二》©
X Y等 Z等
þX001
Y001
  1. Z001
  2. Z002
  3. Z003
  4. Z004
  5. Z005
X002 Y002hidesome
X003 Y003
《表单三》©
X Y等 Z等
þX001
Y001
  1. Z001
  2. Z002
  3. Z003
  4. Z004
  5. Z005
X002 Y002hidesome
X003 Y003

1:若只打印《表单一》,看一下打印预览,可直接打印也可 选择打印机打印。

2:若《表单一》和《表单二》一起并列输出,看一下打印预览,其布局风格可打印维护调整。

3:若打印整个页面,看看打印预览

本例要点是用Document的innerHTML方法把打印目标的超文本送给控件。

有一个网站叫Lodop,里面提供了丰富的打印控件,打印样例,具体参考:

转载地址:http://bzqgi.baihongyu.com/

你可能感兴趣的文章
热点数据降级详解(storm+nginx+lua)
查看>>
加载更多功能实现
查看>>
React相关Dom约束性和非约束性操作
查看>>
Hystrix高可用架构介绍
查看>>
netty源码分析之-SimpleChannelInboundHandler与ChannelInboundHandlerAdapter详解(6)
查看>>
netty源码分析之-开发过程中重要事项分析(7)
查看>>
Sublime Text3插件详解
查看>>
netty源码分析之-ByteBuf详解(8)
查看>>
javascript函数定义三种方式详解
查看>>
javascript中this关键字详解
查看>>
javascript关于call与apply方法详解
查看>>
netty源码分析之-ReferenceCounted详解(9)
查看>>
javascript闭包详解
查看>>
javascript类的创建与实例对象
查看>>
javascript原型详解(1)
查看>>
netty源码分析之-处理器详解(9)
查看>>
javascript原型对象存在的问题(3)
查看>>
javascript原型继承(1)
查看>>
javascript原型继承-实现extjs底层继承(2)
查看>>
javascript设计模式-建立接口的方式(1)
查看>>