前言：
最近electron-vue项目中遇到打印功能,但是利用浏览器原生的打印功能(window.print())又无法预览打印界面，用户体验极差。后来偶然发现lodop这个神奇的web打印插件，通过把lodop打印插件整合到项目中,解决了问题。不足的是为此用户需要增加一步安装lodop.exe文件的操作。
- 先生成图片:
- lodop的预览功能:
正文开始，接下来说以下具体操作吧。
1. 前往lodop官网下载插件
下载解压后复制LodopFuncs.js到自己的electron-vue项目中(我是复制到了utils目录下面)前往lodop官网
可以看到里面有3个函数，需要在每个函数前面加上export 导出使用：
在getLodop函数中，将图中的代码注释，不然当用户没安装打印插件时直接在body页面插入这些元素，影响页面布局，然后return false 根据这个值去自定义一些提示用户安装插件的操作:
到目前为止LodopFuncs.js文件已经修改完成，可以在需要打印的页面使用了
2. 打印页面引入LodopFuncs.js使用
首先要做的就是组件中引入getLodop函数方法:
现在开始使用由于我的项目中需要打印两个地方，分别是二维码和发货清单，所以打印一系列操作单独写一个方法，这里取名为setLodop
/**
* @param {string} ref
*/
setLodop(ref) {
// 调用getLodop函数，如果用户未安装打印插件则会返回false
let LODOP = getLodop();
// 如果返回false 用户未安装打印插件，弹出dialog提示引导用户跳转到安装页面
if (!LODOP) {
this.errorTip='打印控件未安装,请先将安装包根目录打印控件安装!'
// 显示去安装按钮
this.showInstall=true
return this.tipDialog=true
}
// 设置元素的打印html打印样式，样式可以像1.二维码打印写行内样式也可以像2.清单打印写在style标签内
// 个人认为调打印样式是最麻烦的，所以调样式时一定要仔细
// 1.二维码打印的html及样式
let QrcodeHtml = `<div
style=" width: 100%;
height:100%;
display: flex;
align-items:center;">
<div style=" width: 100%;
position: relative;
display: flex;
justify-content: center;
flex-wrap: wrap;">${this.$refs[ref].innerHTML}</div></div>`; // 通过ref获取打印元素html
// 2. 打印清单
let adressListHtml = `
<html>
<head>
<style>
html,body {
height:100%;
width:100%;
}
.printlist_right {
position: relative;
width:100%;
height:100%;
color: #000;
}
.button_opt {
display:none;
}
</style>
</head>
<body>
<div class="printlist_right"> ${this.$refs[ref].innerHTML}</div>
</body>
</html>`;
// 设置打印方向 1.纵向 2.横向 这里判断是打印二位码还是打印发货单，因为发货单内容多所以设置横向打印
let direction = ref === "qrcode" ? 1 : 2;
// 打印初始化
LODOP.PRINT_INIT("发货单");
// 打印方向 及纸张大小设置 这里是a4纸的尺寸
LODOP.SET_PRINT_PAGESIZE(direction, "210mm", "297mm");
// 设置打印字体大小及粗细
LODOP.SET_PRINT_STYLE("FontSize", 18);
LODOP.SET_PRINT_STYLE("Bold", 1);
///参数按顺序分别为，上下间距，左右间距，宽度，高度
// 这里根据形参判断是打印二维码 还是发货清单
ref === "qrcode" && LODOP.ADD_PRINT_HTML(0, 0, "100%", "100%", QrcodeHtml);
ref === "printlist" && LODOP.ADD_PRINT_HTML(0, 0, "100%", "100%", adressListHtml);
// 最后弹出打印预览界面
LODOP.PREVIEW();
},
3. 打印预览功能基本就完成了，最后就是如何更好引导用户安装了，这里说一下我的思路吧
先是回到第一步，把下载的lodop插件文件解压后全部复制到根目录下的static文件夹里面去
在组件中未安装提示框中添加去安装按钮，给去安装按钮绑定事件跳转事件
弹出错误提示
去安装按钮绑定的事件
跳转打开浏览器 加载static目录下PrintSample1.html文件
// 跳转安装打印控件
goInstall() {
let path = __static+'/Lodop6.226_Clodop4.127/PrintSample1.html'
shell.openExternal(path);
}
跳转到这个页面让用户通过这个页面检测下载安装CLodop_Setup_for_Win32NT.exe文件，可以根据需要自定义修改PrintSample1.html
其他更高级的功能大家可以自行移步lodop官网查看学习。
原文地址：https://blog.csdn.net/weixin_49258413/article/details/117586405
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。