electron-vue 打印预览功能实现

2023-11-24 11:04:34

前言：

最近electron-vue项目中遇到打印功能,但是利用浏览器原生的打印功能(window.print())又无法预览打印界面，用户体验极差。后来偶然发现lodop这个神奇的web打印插件，通过把lodop打印插件整合到项目中,解决了问题。不足的是为此用户需要增加一步安装lodop.exe文件的操作。

先生成图片:
lodop的预览功能:

正文开始，接下来说以下具体操作吧。

1. 前往lodop官网下载插件
下载解压后复制LodopFuncs.js到自己的electron-vue项目中(我是复制到了utils目录下面)前往lodop官网

2. 回到项目查看LodopFuncs.js可以看到代码不多内容很简单，注释也很清晰，接下来就要改造这个js文件方便在electron-vue项目中使用
可以看到里面有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官网查看学习。

码农公寓

前言：

正文开始，接下来说以下具体操作吧。

相关文章