web打印,使用lodop实现打印和导出emf图以及生成word。
作者:互联网
这两天需要打印一些报表和生成对应的word
网上也有不少工具,帆软,lodop等许多中间件。
但是帆软收费,所以就选择了lodop。
使用lodop就要先安装他的环境。
去官网下载zip
附上官网的下载链接
直接下载就行
下载之后解压到一个文件夹(最好新建一个)
然后32和64位看着安装就行,
然后再安装2的CLODOP,全是傻瓜式安装,安装完自动启动。
然后去官网看是否安装成功
进入在线样例,然后往下滑,找到样例清单,点击样例一
点击查看本机是否安装web打印服务,如果出现这个弹框就可以了
没出现的会有提示根据提示操作就行,一般没什么问题。
这样准备工作就做完了,当然,现在就可以看着他的样例进行操作了,毕竟是国语,所以按F12去看js也应该能看懂,简单粗暴。
根据说明
需要在html或者jsp中引入这些东西
<script type="text/javascript" language="javascript" src="你的路径/LodopFuncs.js"></script>
<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"></embed>
</object>
LodopFuncs.js就是你下载压缩包的js
实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格</title>
<script type="text/javascript" language="javascript" src="你的路径/LodopFuncs.js"></script>
<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"></embed>
</object>
<style>
body{
width: 940px;
height:380px;
border:2px dimgray solid
}
table{
width: 800px;
height: 300px;
text-align: center;
/* 表边框合并 两个单元格之间的边框进行合并 */
border-collapse: collapse;
margin: 0 auto;
}
table td, th{
border:1px black solid;
background-color: white;
height:20px;
width: 100px;
}
.a{
border:none;
text-align: right;
}
.b{
text-align: left;
padding-left: 10px;
}
.c{
text-align:center
}
.d{
border:none;
text-align: center;
padding-top:5px ;
}
</style>
</head>
<body>
<h2>演示如何打印当前页面的内容:</h2>
<input type="button" value="打印预览" οnclick="prn1_preview()">
<input type="button" value="直接打印" οnclick="prn1_print()">
<input type="button" value="选择打印机" οnclick="prn1_printA()">
<!-- 将要打印的内容通过div赋值-->
<div id="printDiv">
Lodop打印测试Lodop打印测试
</div>
width: 940px;
height:380px;
border:2px dimgray solid
<div id="d1" style="width: 940px;height: 380px;border: 2px dimgrey solid">
<table style="width: 800px;height: 300px;text-align: center;border-collapse: collapse;margin: 0 auto;">
<caption>
<h2>费用报销单</h2>
</caption>
<tr>
<td style="border: 1px black solid;background-color: white;height: 20px;width: 100px" colspan="4" class="a">报销日期 年 月 日</td>
<td style="border: 1px black solid;background-color: white;height: 20px;width: 100px" colspan="2"class="a">附件 张 </td>
</tr>
<tr>
<td style="border: 1px black solid;background-color: white;height: 20px;width: 100px" colspan="1">报销项目</td>
<td style="border: 1px black solid;background-color: white;height: 20px;width: 100px" colspan="2">摘要</td>
<td style="border: 1px black solid;background-color: white;height: 20px;width: 100px" colspan="1">金额</td>
<td style="border: 1px black solid;background-color: white;height: 20px;width: 100px" rowspan="2">负责人(签章)</td>
<td style="border: 1px black solid;background-color: white;height: 20px;width: 100px" rowspan="2"> </td>
</tr>
<tr>
<td style="border: 1px black solid;background-color: white;height: 20px;width: 100px" colspan="1"></td>
<td style="border: 1px black solid;background-color: white;height: 20px;width: 100px" colspan="2"></td>
<td style="border: 1px black solid;background-color: white;height: 20px;width: 100px" colspan="1"></td>
</tr>
<tr>
<td style="border: 1px black solid;background-color: white;height: 20px;width: 100px" colspan="1"></td>
<td style="border: 1px black solid;background-color: white;height: 20px;width: 100px" colspan="2"></td>
<td style="border: 1px black solid;background-color: white;height: 20px;width: 100px" colspan="1"></td>
<td style="border: 1px black solid;background-color: white;height: 20px;width: 100px" class="c" rowspan="2">审查意见</td>
<td style="border: 1px black solid;background-color: white;height: 20px;width: 100px" rowspan="2"></td>
</tr>
<tr>
<td style="border: 1px black solid;background-color: white;height: 20px;width: 100px" colspan="1"></td>
<td style="border: 1px black solid;background-color: white;height: 20px;width: 100px" colspan="2"></td>
<td style="border: 1px black solid;background-color: white;height: 20px;width: 100px" colspan="1"></td>
</tr>
<tr>
<td style="border: 1px black solid;background-color: white;height: 20px;width: 100px" colspan="1"></td>
<td style="border: 1px black solid;background-color: white;height: 20px;width: 100px" colspan="2"></td>
<td style="border: 1px black solid;background-color: white;height: 20px;width: 100px" colspan="1"></td>
<td style="border: 1px black solid;background-color: white;height: 20px;width: 100px" rowspan="2">报销人(签章)</td>
<td style="border: 1px black solid;background-color: white;height: 20px;width: 100px" rowspan="2"></td>
</tr>
<tr>
<td style="border: 1px black solid;background-color: white;height: 20px;width: 100px" colspan="1"></td>
<td style="border: 1px black solid;background-color: white;height: 20px;width: 100px" colspan="2"></td>
<td style="border: 1px black solid;background-color: white;height: 20px;width: 100px" colspan="1"></td>
</tr>
<tr>
<td style="border: 1px black solid;background-color: white;height: 20px;width: 100px" colspan="4"> 合 计 </td>
<#--<td style="border: 1px black solid;background-color: white;height: 20px;width: 100px"></td>-->
<#--<td style="border: 1px black solid;background-color: white;height: 20px;width: 100px"></td>-->
<td style="border: 1px black solid;background-color: white;height: 20px;width: 100px;text-align: left;padding-left: 10px" class="b">¥</td>
<td style="border: 1px black solid;background-color: white;height: 20px;width: 100px;text-align: left;padding-left: 10px"></td>
</tr>
<tr>
<td style="border: 1px black solid;background-color: white;height: 20px;width: 100px" class="c" colspan="6">核实金额(大写) 佰 拾 万 仟 佰 拾 元 角 分 </td>
</tr>
<tr>
<td style="border: 1px black solid;background-color: white;height: 20px;width: 100px">借款额</td>
<td style="border: 1px black solid;background-color: white;height: 20px;width: 100px"></td>
<td style="border: 1px black solid;background-color: white;height: 20px;width: 100px">应退金额</td>
<td style="border: 1px black solid;background-color: white;height: 20px;width: 100px"></td>
<td style="border: 1px black solid;background-color: white;height: 20px;width: 100px">应补金额</td>
<td style="border: 1px black solid;background-color: white;height: 20px;width: 100px"></td>
</tr>
<tr>
<td style="border: 1px black solid;background-color: white;height: 20px;width: 100px;border: none;text-align: center;padding-top: 5px" colspan="2" class="d">会计主管:</td>
<td style="border: 1px black solid;background-color: white;height: 20px;width: 100px;border: none;text-align: center;padding-top: 5px" colspan="2" class="d">审核:</td>
<td style="border: 1px black solid;background-color: white;height: 20px;width: 100px;border: none;text-align: center;padding-top: 5px" colspan="2" class="d">出纳:</td>
</table>
</div>
</body>
<script>
var LODOP=document.getElementById("LODOP_OB");
//打印预览
function prn1_preview() {
CreateOneFormPage();
LODOP.PREVIEW();
//打印设计
//LODOP.PRINT_DESIGN()
}
//直接打印
function prn1_print() {
CreateOneFormPage();
LODOP.PRINT();
}
//选择打印机
function prn1_printA() {
CreateOneFormPage();
LODOP.PRINTA();
}
function CreateOneFormPage(){
LODOP=getLodop(document.getElementById('LODOP_OB'),document.getElementById('LODOP_EM'));
LODOP.PRINT_INITA('20mm','20mm','100mm','70mm','test');
LODOP.SET_PRINT_STYLE("FontSize",18);
LODOP.SET_PRINT_STYLE("Bold",1);
LODOP.SET_PRINT_PAGESIZE(2,'7cm','10cm','手动收费记录列表');
LODOP.SET_SHOW_MODE("LANDSCAPE_DEFROTATED",1)//横向时的正向显示
//参数100表示距离左侧100px;88表示距离顶部88px
LODOP.ADD_PRINT_HTM(0,0,'80%','80%',document.getElementById("d1").innerHTML);
}
</script>
</html>
引入你下载的js后启动就是这样
点击打印浏览,
当然拉,你也可以直接打印,也就是后面两个按钮。
最后执行什么都跟LODOP.PREVIEW();LODOP.PRINT();LODOP.PRINTA();最后的这几个函数有关。
如果要打印设计就是这个 LODOP.PRINT_DESIGN();
上面是一个报销单的实例,你可以修改<table>标签从后台传值就可以实现动态效果,LODOP的api就不一一介绍了,样例里比较多还有图文并茂。
//保存为emf图片
function SaveAsEmfFile(str){
LODOP.PRINT_INIT("");
LODOP.SET_PRINT_PAGESIZE(2,'7cm','10cm','');
LODOP.ADD_PRINT_HTM(0,0,"100%","100%",str);
LODOP.SET_SAVE_MODE("SAVEAS_IMGFILE_EXENAME",".emf");
LODOP.SAVE_TO_FILE("新的矢量图片文件.emf");
};
//写入到word
//参数
//intWriteMode:编码
//strFilename:文件全路径(D:\\test.doc)
//strText:数据体,就是上面那个html中的table那种
function writefile(intWriteMode,strFilename,strText) {
if (LODOP.CVERSION) CLODOP.On_Return=function(TaskID,Value){alert(Value);};
var strResult=LODOP.WRITE_FILE_TEXT(intWriteMode,strFilename,strText);
if (!LODOP.CVERSION){if (strResult=="ok") alert("写入成功!");else alert(strResult);};
};
当然上面那个例子也有bug,就是我已经设置了页面LODOP.SET_PRINT_PAGESIZE(2,'7cm','10cm','');但是只有2也就是横板实现了,后面那两个7CM和10CM没有实现,不知道为什么。在打印设计中LODOP.PRINT_INITA('20mm','2.5mm','1000mm','700mm','test');
这个初始化可以用,但是在打印浏览中就不可以用。
刚用一两天,还是有很多不足,草草实现了业务功能,但并不美观。lodop的功能挺强大,但是需要慢慢去看。
最后附上一个大佬的使用实例,他对lodop的api介绍比较多
https://blog.csdn.net/hello_world_qwp/article/details/78125642
同时也附上lodop的环境zip。
Lodop6.226_Clodop3.083
链接:https://pan.baidu.com/s/1KRxPePShjRoVEUa10LZQQQ
提取码:o5uf
CLodop_Setup_for_Win32NT
链接:https://pan.baidu.com/s/1OKpmlupPujc4jxDMdl_NhA
提取码:0c6j
标签:function,web,emf,打印,lodop,nbsp,PRINT,LODOP 来源: https://blog.csdn.net/qq_41755287/article/details/99715861