博客
关于我
强烈建议你试试无所不能的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/

你可能感兴趣的文章
Java程序内存的简单分析
查看>>
Javascript单例模式概念与实例
查看>>
SQL NULL 函数
查看>>
多例设计模式
查看>>
WebView的JavaScript与本地代码三种交互方式
查看>>
WebView的JavaScript与本地代码三种交互方式
查看>>
Android Studio里面配置Tesseract
查看>>
深入浅出JavaScript之this
查看>>
Android include标签的使用注意事项
查看>>
final成员变量和final局部变量
查看>>
Android数据加密之异或加密算法
查看>>
greenDao好的示例网址
查看>>
SDK无埋点技术在百分点的探索和实践
查看>>
Android自定义控件--仿安全卫士中的一键加速
查看>>
微信小程序快速入门
查看>>
Android EditText被软键盘遮盖处理
查看>>
JavaScript 中变量、作用域和内存问题的学习
查看>>
Android Tools Attributes,让布局设计所见即所得
查看>>
FlipDotView——磁翻点阵显示效果
查看>>
浅析回话技术之Session和Cookie
查看>>