vue+lodop实现web端打印功能_clodop vue

lodop官网下载地址：http://www.c-lodop.com/download.html

1、下载插件（如果只是想实现打印功能，下载红框里的即可）

2、解压缩，然后根据自己的操作系统安装控件

32位系统安装：install_lodop32.exe；

64位系统安装：install_lodop64.exe；

然后安装云打印插件：CLodop_Setup_for_Win32NT.exe；

3、 测试打印功能

安装包中的html文件为打印实例，点击其中一个用浏览器打开，点击红框如果出现下图弹窗，说明插件安装成功了。

4、 打开安装包把LodopFuncs.js放到项目中

 5、页面引入并使用

<el-button type="primary" @click="btnClickPrint">打印</el-button>

import { getLodop } from '@/utils/LodopFuncs';
 
// 打印快递单
    btnClickPrint() {
      const LODOP = getLodop(); // 调用getLodop获取LODOP对象
      LODOP.PRINT_INIT('');
      LODOP.SET_PRINT_PAGESIZE(1, '70mm', '50mm', '');
      LODOP.ADD_PRINT_TEXT(
        20,
        10,
        250,
        20,
        `${this.tempInfo[0].label}：${this.tempInfo[0].value}`
      );
      LODOP.ADD_PRINT_TEXT(
        50,
        10,
        250,
        20,
        `${this.deliveryInfo[0].label}：${this.deliveryInfo[0].value}`
      ); // // 设置打印内容
      LODOP.ADD_PRINT_TEXT(
        80,
        10,
        250,
        20,
        `${this.deliveryInfo[1].label}：${this.deliveryInfo[1].value}`
      ); // // 设置打印内容
      LODOP.ADD_PRINT_TEXT(
        110,
        10,
        250,
        20,
        `${this.deliveryInfo[2].label}：${this.deliveryInfo[2].value}`
      ); // // 设置打印内容
      LODOP.PREVIEW();
    },

LODOP.PREVIEW();  打印并预览

LODOP.PRINT(); 直接打印