如何在VUE項(xiàng)目中使用LODOP打印控件？
當(dāng)前位置：點(diǎn)晴教程→知識(shí)管理交流
→『 技術(shù)文檔交流 』
 ：如何在VUE項(xiàng)目中使用LODOP打印控件？ 作者：程序員茶葉蛋 鏈接：https://www.zhihu.com/question/64045126/answer/3427353474 來(lái)源：知乎 著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。 前言上面文章《Vue快速接入菜鳥(niǎo)打印組件》講了vue3如何快速集成菜鳥(niǎo)打印組件，這篇講講vue3如何集成lodop組件。一、下載并修改LodopFuncs.js在官網(wǎng) Lodop 官網(wǎng) 下載入門案例，其中有LodopFuncs.js <img src="https://picx.zhimg.com/50/v2-492132b1fd88034d8c241275555dc165_720w.jpg?source=2c26e567" data-size="normal" data-rawwidth="1943" data-rawheight="1089" data-original-token="v2-4f09fca603f7627539c624ba1c513f89" class="origin_image zh-lightbox-thumb" width="1943" data-original="https://picx.zhimg.com/v2-492132b1fd88034d8c241275555dc165_r.jpg?source=2c26e567"/>在這里插入圖片描述 我們需要的文件 LodopFuncs.js ，其他案例也可以稍微運(yùn)行看看。 <img src="https://picx.zhimg.com/50/v2-dbbeaac93db7becec8feced3fe03f9a5_720w.jpg?source=2c26e567" data-size="normal" data-rawwidth="1498" data-rawheight="619" data-original-token="v2-a19eadefa1b7ff553a99df9dc35f5d71" class="origin_image zh-lightbox-thumb" width="1498" data-original="https://pica.zhimg.com/v2-dbbeaac93db7becec8feced3fe03f9a5_r.jpg?source=2c26e567"/>在這里插入圖片描述1.1 調(diào)整LodopFuncs.js代碼， 暴露 getLodop詳細(xì)見(jiàn)官網(wǎng)-常見(jiàn)問(wèn)題-vue使用lodop 我們?cè)谖膊考由弦幌麓a，暴露Lodop的初始化函數(shù)。export { getLodop } <img src="https://pic1.zhimg.com/50/v2-bef920910ad423698f2c97d6ffd2567c_720w.jpg?source=2c26e567" data-size="normal" data-rawwidth="675" data-rawheight="253" data-original-token="v2-7b21477132022db83a6b07bad67a3b7a" class="origin_image zh-lightbox-thumb" width="675" data-original="https://picx.zhimg.com/v2-bef920910ad423698f2c97d6ffd2567c_r.jpg?source=2c26e567"/>在這里插入圖片描述二、自定義useLodop hooks抽取共用的lodop邏輯在項(xiàng)目的hooks 文件夾下創(chuàng)建一個(gè)hook。根據(jù)自己的項(xiàng)目，按實(shí)際情況命名。 這里是 useLodop.ts// 引入上一步驟創(chuàng)建的lodopfuns import { getLodop } from '@/utils/lodop/LodopFuncs' import { reactive } from 'vue' import { ElMessage } from 'element-plus' export function useLodop() { const variable = reactive({ printerArr: [] }) let LODOP = null const CheckLodopIsOk = async () => { try { LODOP = getLodop() if (LODOP.VERSION) { if (LODOP.CVERSION) { return true } else { return true } } } catch (err) { return false } } const printLabel = async (options: { strBASE64Code: string xxxx: string rawRow: { paperType: PaperTypeEnum } }) => { LODOP = getLodop() if (!LODOP) { return ElMessage.warning('請(qǐng)安裝/啟動(dòng)Lodop 打印插件') } LODOP.PRINT_INIT('') // 根據(jù)打印的類型，獲取設(shè)置的打印機(jī)字符串。根據(jù)自己的實(shí)際業(yè)務(wù)修改 const printerStr = await getPrinter(options?.xxx, options?.rawRow?.paperType) if (!LODOP.SET_PRINTER_INDEX(printerStr)) { return Promise.resolve(false) } if ((options.rawRow.paperType ) == 'Label_4X6') { LODOP.SET_PRINT_PAGESIZE(1, '100mm', '152.4mm', '') // 紙張方向大小 } else { LODOP.SET_PRINT_PAGESIZE(3, '', '', 'A4') // 紙張方向大小 } LODOP.ADD_PRINT_IMAGE(0, 0, '100%', '100%', options?.strBASE64Code) // 設(shè)置打印的顯示比例 LODOP.SET_PRINT_STYLEA(0, 'Stretch', 1) // LODOP.PREVIEW(); const isPrintSuccess = LODOP.PRINT() return Promise.resolve(!!isPrintSuccess ) } const printA4Paper = async (options: { rawObj: Object xxxx: string TableId: string }) => { LODOP = getLodop() if (!LODOP) { return ElMessage.warning('請(qǐng)安裝/啟動(dòng)Lodop 打印插件') } LODOP.PRINT_INIT('') const printerStr = await getPrinter(options?.xxxx, 'A4') if (!LODOP.SET_PRINTER_INDEX(printerStr)) { return Promise.resolve(false) } // 條形碼 LODOP.ADD_PRINT_BARCODE('20mm', 32, '40%', 100, '128B', `${options.rawObj?.barcode}`) LODOP.SET_PRINT_STYLEA(0, 'ItemType', 1) // LODOP.ADD_PRINT_BARCODE(5,734,168,146,"QRCode","1234567890版本7的最大值是122個(gè)字符123123"); LODOP.SET_PRINT_STYLE('FontSize', 12) LODOP.SET_PRINT_PAGESIZE(3, 0, 0, 'A4') // 紙張方向大小 LODOP.SET_PRINT_STYLEA(0, 'TableHeightScope', 3) //高度包含頁(yè)尾 // ADD_PRINT_HTM(intTop,intLeft,intWidth,intHeight,strHtml)增加超文本項(xiàng) LODOP.SET_PRINT_COPIES(1) // 份數(shù) // LODOP.SET_PRINT_STYLE('Bold', 1) LODOP.SET_PRINT_STYLE('FontSize', '12') LODOP.ADD_PRINT_TEXT( '20mm', '115mm', '100mm', '5mm', `Warehouse:${options.rawObj?.baseWarehouseVo?.name}` ) // 放在某處后面表示每一頁(yè)都有這個(gè)內(nèi)容 , 類似頁(yè)眉頁(yè)腳用法 LODOP.SET_PRINT_STYLEA(0, 'ItemType', 1) } // 注意?。。?！ 這里ADD_PRINT_HTM 不會(huì)分頁(yè) ADD_PRINT_TABLE 會(huì)自動(dòng)分頁(yè) if ( xxxx == '多個(gè)表格的情況') { // 表格部分 LODOP.ADD_PRINT_HTM( '59mm', '0mm', 'RightMargin:2mm', '100%', document.getElementById(`${options.TableId}`).innerHTML ) } else { LODOP.ADD_PRINT_TABLE( '59mm', '0mm', '198mm', '275mm', document.getElementById(`${options.TableId}`)?.innerHTML ) } // 頁(yè)碼 LODOP.ADD_PRINT_HTM( '6mm', '90%', '100mm', 20, "<span tdata='pageNO'>##</span> of <span tdata='pageCount'> ##</span>" ) LODOP.SET_PRINT_STYLEA(0, 'ItemType', 1) const isPrintSuccss = LODOP.PRINT() // 直接打印 return Promise.resolve(!!isPrintSuccss) } const getPrinterArr = () => { variable.printerArr = [] if (!CheckLodopIsOk()) { ElMessage.warning('請(qǐng)安裝/啟動(dòng)Lodop打印插件') return false } let counter = LODOP.GET_PRINTER_COUNT() // 獲取打印機(jī)個(gè)數(shù) for (let i = 0; i < counter; i++) { var curPrintName = LODOP.GET_PRINTER_NAME(i) variable.printerArr.push({ name: curPrintName, label: curPrintName }) } localStorage.setItem('PRINTER_ARR', JSON.stringify(variable.printerArr || [])) return true } return { getPrinterArr, printLabel, printA4Paper, CheckLodopIsOk } } 上述代碼大概暴露4個(gè)方法分別為CheckLodopIsOkCheckLodopIsOk ： 判斷l(xiāng)odop 插件是否安裝、啟動(dòng)了，相應(yīng)的邏輯處理，一般插件都沒(méi)開(kāi)啟直接提示就好getPrinterArrgetPrinterArr ：這個(gè)是判斷有沒(méi)有可以用打印機(jī)，需要安裝了lodop插件后，調(diào)用他的api 獲取。這里獲取后儲(chǔ)存了起來(lái)方便其他頁(yè)面調(diào)用printLabelprintLabel ： 這個(gè)方法用來(lái)處理base64 數(shù)據(jù)，打印標(biāo)簽， 其中 LODOP.SET_PRINT_STYLEA(0, 'Stretch', 1) 用來(lái)調(diào)整顯示比例printA4PaperprintA4Paper： 這個(gè)是打印A4紙質(zhì)的表單，常見(jiàn)的倉(cāng)庫(kù)里的揀貨單等 該文章在 2025/10/28 8:35:30 編輯過(guò) |
關(guān)鍵字查詢
相關(guān)文章
正在查詢... 
|
400 186 1886
