今天在做项目的时候，需要实现一个功能，点击按钮的时候弹出打印页面，里面是我想打印的内容，下面是完成的效果：
这是主页面的按钮，点击：
弹出打印界面，注意，按钮并不在其中。
在这里，我设置的是A5纸张的大小，也就是148mm*210mm.也就是说，在这个过程中，我设置了点击触发，设置纸张大小，设置打印的范围，并且打开打印预览。
首先我使用的是Lodop打印控件，这是官网：
http://www.lodop/index.html
Lodop是什么呢？他是一个web打印控件，支持所有的浏览器，兼容ie8！
要在浏览器中使用它，，必须先安装Lodop，这是下载地址
可先下载第一个综合版，综合版里面还有很多肖demo，有兴趣可以自己多看看。
注意点：
install_lodop32.exe和install_lodop64.exe
这俩文件是安装和升级Lodop控件的主程序，对应32位和64位浏览器（注意浏览器位数不是操作系统位数）
安装完了之后，回到我们的工作上来，直接上代码：
HTML页面代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" http-equiv="Content-Type" content="text/html" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>门诊病历</title>
<script src="./js/LodopFuncs.js"></script>
<script defer src="./printJs.js"></script>
</head>
<body>
<button id="printHistory">点击打印</button>
</body>
</html>
JS代码
var stylePrint = '<style>'
+'*{padding:0;margin:0;list-style:none;}body{width:140mm;height:208mm;border:1px solid #000;text-align:center;}h1,h2{font-size:50px;}.header{height:50mm;}.header .nav_list{overflow:hidden;}.nav_list li{float:left;margin-top:20px;margin-left:50px;}.section{height:100mm;overflow:hidden;}.cont{color:#cccccc;font-size:30px;width:250px;height:300px;line-height:200px;border:1px solid #000;}.cont_1{float:left;border-left:none;background:brown;}.cont_2{float:right;border-right:none;background:yellow;}.footer{height:50mm;}.msg{margin-top:16px;border-top:2px solid #bbbbbb;border-bottom:2px solid #bbbbbb;}'
+'</style>'
var bodyPrint = '<div class="header"><h1>头部</h1><ul class="nav_list"><li>导航内容</li><li>导航内容</li><li>导航内容</li><li>导航内容</li></ul></div><div class="section"><h2>主体标题</h2><div class="cont cont_1">主体左部分</div><div class="cont cont_2">主体右部分</div></div><div class="footer"><h2>脚部</h2><p class="msg">这是脚部文字内容这是脚部文字内容这是脚部文字内容</p><p class="msg">这是脚部文字内容这是脚部文字内容这是脚部文字内容</p><p class="msg">这是脚部文字内容这是脚部文字内容这是脚部文字内容</p></div>'
window.onload = function () {
var oBtn = document.getElementById("printHistory");
oBtn.onclick= function (e) {
if (e && e.preventDefault) {
e.preventDefault();//防止浏览器默认行为(W3C)
} else {
window.event.returnValue = false;//IE中阻止浏览器行为
}
var LODOP;
LODOP = getLodop(document.getElementById('LODOP_OB'), document.getElementById('LODOP_EM'));
LODOP.PRINT_INIT("打印任务");
LODOP.SET_PRINT_PAGESIZE(0, 1480, 2100, "CreateCustomPage");
LODOP.SET_PRINT_MODE("CREATE_CUSTOM_PAGE_NAME", "门诊病历");
LODOP.ADD_PRINT_HTM(0, 8, "100%", "100%", stylePrint + bodyPrint);
LODOP.PREVIEW();
// LODOP.PRINT();
}
}
1.其中的getLodop过程根据浏览器类型检查是否安装、是否最新版本，然后引导用户对应下载执行install_lodopXX.exe文件或CLodop_Setup_for_Win32NT.exe。*
2. LODOP.PRINT_INIT(“打印任务”) ——初始化打印任务
3. LODOP.SET_PRINT_PAGESIZE(0, 1480, 2100, “CreateCustomPage”);——设置打印纸张的尺寸
4. LODOP.SET_PRINT_MODE(“CREATE_CUSTOM_PAGE_NAME”, “新的名字”) ——这一步是给我新创建的纸张设置一个名字，这种方式可以适应某些不能动态设置纸张大小的打印机。
5. LODOP.ADD_PRINT_HTM(0, 8, “100%”, “100%”, stylePrint + bodyPrint) ——设置打印的位置、样式等，
6. LODOP.PREVIEW() ——开启打印预览
7. LODOP.PRINT()—打印
下面是我写的过程中遇到的一些问题，已经解决告诉大家避免踩坑：
1.当你要打印文档并且包含样式时，请注意我的字符串拼接方式，<style></style>标签是必须的
2.兼容ie低版本时可能会提示错误信息：
因为我在html页面用的是button，需要取消button的默认点击事件，所以我在上面写了取消默认事件的兼容写法，加上去之后就不会报错啦。
3.ie8下的js代码，每条指令结束必须以；分号结束，否则会报错。
碎觉碎觉 /(ㄒoㄒ)/~~
更多推荐
构建lodop全浏览器支持的web打印控件（兼容ie8）,自动打印/预览想看到的内容
发布评论