當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

前端实现自动打印批量打印

發布時間：2023/12/15 HTML 32 豆豆

生活随笔收集整理的這篇文章主要介紹了前端实现自动打印批量打印小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

歡迎關注微信公眾號：【全棧攻略】

眾所周知，前端打印的API只有window.print()，而我們要實現自動打印和批量打印，甚至連獲取本地電腦的打印機有哪些都無法獲取到。難道，前端對此真的無能為力嗎？答案是否定！

Lodop 由此誕生，有人說她是Web打印控件的“終結者”，因為接觸“她”后再不想別的“她”。那我們就來揭開這神秘都面紗！

一，首先我們要改造Lodpo的源代碼文件為適合Vue/React/Angular等框架如下：

LodopFuncs.js

二，獲取本地電腦連接都有哪些打印機

先上效果圖：

代碼如下：

// 先導入getLodop方法 import { getLodop } from "plugin/LodopFuncs.js";// 獲取打印機列表getPrintList() {let LODOP = getLodop();if (!LODOP)return// 獲取打印機個數let count = LODOP.GET_PRINTER_COUNT()let printValue = LODOP.GET_PRINTER_NAME(-1) //獲取默認打印機this.printList = Array(count).fill(null).map((...args) => {if (printValue === LODOP.GET_PRINTER_NAME(args[1])){this.printDefault = args[1]}return {value: args[1], // args[1]為數組索引label: LODOP.GET_PRINTER_NAME(args[1]) // 獲取打印機名稱}})},

三，實現自動打印和批量打印

自動打印沒法上效果圖了，自己試一下就可以了 ^?_?^

不過可以上，我們倉儲系統的場景圖：

代碼如下：

// 多選handleSelectionChange(val) {this.multipleSelection = val;},// 批量打印async batchPrint() {if(!this.multipleSelection.length){this.$utils.commonUtils.tip('請選擇','warning')return}for await(const key of this.multipleSelection) {this.getPrintData(key.printUrl)}},// 打印handleReview(index, row) {this.getPrintData(row.printUrl)},// 獲取面單信息數組數據async getPrintData(url) {if(url) {this.printUrlList = url.split(';')this.printInfo()}},// 打印面單 async printInfo() {for await (const item of this.printUrlList) {this.printEveryItem(item)}},// 打印每項printEveryItem(item) {let self = this;let LODOP = getLodop(); //調用getLodop獲取LODOP對象return new Promise(function (resolve) {setTimeout(() => {LODOP.PRINT_INIT("");let strStyleCSS = `<style type='text/css' rel='stylesheet'>.img1{display:block;margin:10px;width:360;height:360}</style>`let html = `<head>${strStyleCSS}</head><body><div class='print-card'><img src=${item} class='img1' /></div><body>`LODOP.ADD_PRINT_HTM(0,0,380,380,html);LODOP.SET_PRINT_PAGESIZE(1,1000,1000,""); LODOP.PRINT();}, 1000);});}

單個打印和批量打印實現了，自動打印就簡單了，滿足條件調用打印方法即可，如倉儲系統實際業務需求，當播種完成自動打印

至此，前端實現了自動打印批量打印功能，更多功能可自行擴展，Lodop 等你探索！

轉載于：https://blog.csdn.net/weixin_45115705/article/details/102717637

總結

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

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

批量

上一篇：关于Windsocket脚本运行报错Er
下一篇：紫禁繁花服务器维护,紫禁繁花跨服活动内容

HTML

前端实现自动打印 批量打印

總結

前端实现自动打印批量打印