引用 Lodop 插件实现打印以及另存excel
下面展示一些 内联代码片
。
// 给个jsp,引入插件js
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en" class="no-js">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>hellow 打印</title>
<style type="text/css">
body {
padding: 15px !important;
}
.show {
border-collapse: collapse;
margin-top: 15px;
width: 100%;
}
.show td, th {
border: 1px solid;
font-size: 10px;
font-weight: bold;
vertical-align: middle;
}
.title td {
font-size: 10px;
text-align: center;
padding: 3px 5px;;
}
.confirm td {
border-left-color: white;
border-bottom-color: white;
border-right-color: white;
}
.statement td {
border-left-color: white;
border-top-color: white;
border-right-color: white;
}
</style>
</head>
<body style="padding: 0px; margin: 0px">
<object width="0" height="0" classid="clsid:2105C259-1E0C-4534-8141-A753534CB4CA" id="LODOP_OB">
<embed width="0" height="0" pluginspage="install_lodop.exe" type="application/x-print-lodop" id="LODOP_EM">
</object>
<div class="printbtn">
<button onclick="myPreview();">打印预览</button>
<button onclick="myPrint();">打印</button>
<button onclick="myPrintDesign();">打印设计</button>
</div>
<div id="print_content">
<div class="printbtn">
<input type="button" onclick="saveAsFile()" value="另存为Excel文件">
</div>
<table class="show" width="100%">
<tbody>
<tr class="statement">
<td colspan="11" align="center">
<font size="6">
<fmt:formatDate pattern="yyyy" value="${domain.statementAccount.accountItems[0].purchaseCreationDate}" /> 年 ${domain.statementAccount.monthStr} 月 对账单
</font>
</td>
</tr>
<tr class="title">
<td width="10%">仓库</td>
<td width="15%">采购单号</td>
<td>采购单创建日期</td>
<td>入库时间</td>
<td>采购单完成时间</td>
<td width="7%">状态</td>
<td>运费</td>
<td>采购总金额</td>
<td>入库金额</td>
<th>建议退运费</th>
</tr>
<tr>
</tbody>
</table>
<script type="text/javascript" language="javascript">
var LODOP; //声明为全局变量
function saveAsFile() {
LODOP = getLodop(document.getElementById('LODOP_OB'), document.getElementById('LODOP_EM'));
LODOP.PRINT_INIT("");
// ADD_PRINT_TABLE(Top,Left,Width,Height,strHtml)
LODOP.ADD_PRINT_TABLE(0, 0, 1400, 0, document.getElementById('print_content').innerHTML);
// LODOP.SET_SAVE_MODE("QUICK_SAVE",true);//快速生成(无表格样式,数据量较大时或许用到)
var name = document.getElementById('supplierNumber').innerHTML;
LODOP.SAVE_TO_FILE(name + ".xls");
};
</script>
</div>
<object id="LODOP_OB" classid="clsid:2105C259-1E0C-4534-8141-A753534CB4CA" width="0" height="0">
<embed id="LODOP_EM" type="application/x-print-lodop" width="0" height="0">
</object>
<app:include type="javascript" />
<script type="text/javascript" src="${CUSTOM_THEME_PATH }js/Lodop/CCLodopFuncs.js"></script>
<script type="text/javascript">
var LODOP; //声明为全局变量
$(function() {
});
function CheckIsInstall() {
try {
var LODOP = getLodop(document.getElementById('LODOP_OB'), document.getElementById('LODOP_EM'));
if ((LODOP != null) && (typeof (LODOP.VERSION) != "undefined"))
return LODOP.VERSION;
} catch (err) {
//alert("Error:本机未安装或需要升级!");
}
return false;
}
function myPrint() {
CreatePrintPage();
LODOP.PRINT();
};
function myPreview() {
CreatePrintPage();
LODOP.PREVIEW();
};
function myPrintDesign() {
CreatePrintPage();
LODOP.PRINT_DESIGN();
};
function CreatePrintPage() {
LODOP = getLodop(document.getElementById('LODOP_OB'), document.getElementById('LODOP_EM'));
LODOP.PRINT_INIT("打印");
try {
if (typeof (eval(CreatePrintPageWithImage)) == 'function') {
return CreatePrintPageWithImage();
}
} catch (e) {
}
LODOP.ADD_PRINT_HTM(0, 0, "100mm", "100mm", document.getElementById('print_content').innerHTML);
};
//表格打印对账单详情处使用
function myPrinttable() {
CreatePrintpagetable();
LODOP.PRINT();
};
function myPreviewtable() {
CreatePrintpagetable();
LODOP.PREVIEW();
};
function CreatePrintpagetable() {
LODOP = getLodop(document.getElementById('LODOP_OB'), document.getElementById('LODOP_EM'));
LODOP.PRINT_INIT("打印");
try {
if (typeof (eval(CreatePrintPageWithImage)) == 'function') {
return CreatePrintPageWithImage();
}
} catch (e) {
}
LODOP.ADD_PRINT_HTM(0, 0, "210mm", "297mm", document.getElementById('print_content').innerHTML);
LODOP.SET_PRINT_PAGESIZE('2', "", "", '')
}
</script>
</body>
</html>
CCLodopFuncs.js 如下
var CreatedOKLodop7766=null;
//====判断是否需要安装CLodop云打印服务器:====
function needCLodop(){
try{
return true;
} 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 );
};
//====获取LODOP对象的主过程:====
function getLodop(oOBJECT,oEMBED){
var strHtmInstall="<br><font color='#FF00FF'>打印控件未安装!点击这里<a href='install_lodop32.exe' target='_self'>执行安装</a>,安装后请刷新页面或重新进入。</font>";
var strHtmUpdate="<br><font color='#FF00FF'>打印控件需要升级!点击这里<a href='install_lodop32.exe' target='_self'>执行升级</a>,升级后请重新进入。</font>";
var strHtm64_Install="<br><font color='#FF00FF'>打印控件未安装!点击这里<a href='install_lodop64.exe' target='_self'>执行安装</a>,安装后请刷新页面或重新进入。</font>";
var strHtm64_Update="<br><font color='#FF00FF'>打印控件需要升级!点击这里<a href='install_lodop64.exe' target='_self'>执行升级</a>,升级后请重新进入。</font>";
var strHtmFireFox="<br><br><font color='#FF00FF'>(注意:如曾安装过Lodop旧版附件npActiveXPLugin,请在【工具】->【附加组件】->【扩展】中先卸它)</font>";
var strHtmChrome="<br><br><font color='#FF00FF'>(如果此前正常,仅因浏览器升级或重安装而出问题,需重新执行以上安装)</font>";
var strCLodopInstall="<br><font color='#FF00FF'>CLodop云打印服务(localhost本地)未安装启动!点击这里<a href='CLodop_Setup_for_Win32NT.exe' target='_self'>执行安装</a>,安装后请刷新页面。</font>";
var strCLodopUpdate="<br><font color='#FF00FF'>CLodop云打印服务需升级!点击这里<a href='CLodop_Setup_for_Win32NT.exe' target='_self'>执行升级</a>,升级后请刷新页面。</font>";
var LODOP;
try{
var isIE = (navigator.userAgent.indexOf('MSIE')>=0) || (navigator.userAgent.indexOf('Trident')>=0);
if (true) {
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.6.2") {
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.0.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("上海谷马信息技术有限公司","452586780837383919278901905623","","");
//===========================================================
return LODOP;
} catch(err) {alert("getLodop出错:"+err);};
};
效果如下图:
先去官网下个安装包,CLodop32位的和64位的,安装完双击运行:
运行失败一般是版本不兼容,具体可以查阅官网,下载适应的版本就可以了,有时候浏览器升级后,打印插件会失效,要重新安装。或者更换版本。页面数据太多,用插件比较卡,有时候会反应比较久,总体可以满足大多需求