vue实现二维码批量打印功能

vue实现二维码批量打印功能

业务需求：客户需要给每个商品贴上二维码，为了更加高效的完成这项工作需要配合热敏打印机实现批量打印二维码的需求，因为是web项目后端会部署到服务器上，因此只能通过js的方式在前端调用打印机。（技术难点js调打印机规划打印界面）

一、走过的弯路

• 通过先生成word文档的方式调用普通打印机实现打印功能（不能满足客户需求）。
• ActiveX控件，通过调用打印机动态的函数库来规划打印页面实现批量打印功能（仅在ie浏览器中可用）。
• lodop打印控件

二、使用lodop控件实现打印功能

1、在vue项目中引入lodop控件

http://note.youdao.com/s/FHKGmjlK

2、在需要调用的页面引入

    import { getLodop } from "./tools/lodop";

3、 使用lodop插件规划页面

           //调用打印机
            getPrint(opt) {

                let LODOP = getLodop();
                for (let i=0;i<opt.length;i++){
                    //打印初始化，
                    LODOP.PRINT_INIT("");

                    LODOP.SET_PRINT_PAGESIZE(1,800,600,"");
                    //设置打印模式PRINT_NOCOLLATE非逐份打印
                    LODOP.SET_PRINT_MODE("PRINT_NOCOLLATE",1);
                    LODOP.ADD_PRINT_TEXTA('标题','5mm','24mm','36mm','10mm',"测试");
                    LODOP.ADD_PRINT_BARCODE('15mm','5mm','39mm','39mm',"QRCode","goodsId="+opt[i].id);
                    LODOP.ADD_PRINT_TEXTA('商品名称','17mm','43mm','30mm',100,"商品名称");
                    LODOP.ADD_PRINT_TEXTA('名称内容','23mm','43mm','40mm',100,opt[i].productName);
                    LODOP.ADD_PRINT_TEXTA('商品货号','38mm','43mm','30mm',100,"商品货号");
                    LODOP.ADD_PRINT_TEXTA('货号内容','44mm','43mm','40mm',100,opt[i].productSn);
                    LODOP.ADD_PRINT_RECT('13mm', '0mm', '81mm', '38mm',1, 1);

                    LODOP.SET_PRINT_STYLEA(1,"FontSize",20);
                    LODOP.SET_PRINT_STYLEA(2,"FontSize",13);
                    LODOP.SET_PRINT_STYLEA(3,"FontSize",13);
                    LODOP.SET_PRINT_STYLEA(4,"FontSize",13);
                    LODOP.SET_PRINT_STYLEA(5,"FontSize",13);
                    LODOP.PRINT("");
                    // LODOP.PREVIEW();
                }
            },

lodop插件的主要功能就相当于动态函数库进行规划图像

附官网地址：http://www.lodop.net/

附参考文档下载地址：http://www.lodop.net/download.html