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

總結

以上是生活随笔為你收集整理的vue实现二维码批量打印功能的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。