Bootstrap

vue+lodop实现web端打印功能

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(); 直接打印

;