Vue 使用Lodop進行標簽（條碼）打印

一、使用到的插件：vue-barcode（vue條形碼插件），Lodop打印控件（我這里使用windows64版，所以以此進行舉例說明。）。

詳述：前者（指vue-barcode）針對在前端界面上觀察到的效果。

　　　使用：

　　　　1.安裝：npm install @xkeshi/vue-barcode vue

　　　　2.main.js中引入注冊組件：import VueBarcode from '@xkeshi/vue-barcode';　　 Vue.component('barcode', VueBarcode);

　　　　3.相應界面中使用：（注：這里僅提供簡單使用的流程，具體有關barcode使用中的其它屬性的設置請自行百度查詢。）

　　　　　　　　<barcode

                                value="1234567890"

                                :options="{ widht:100,height:50, background:'rgba(255,255,255,.0)'}"

                                style="width: 100%;height: 100%;">

                            </barcode>

　　    后者（指Lodop）在打印時需要使用到其專用的打印代碼。（決定最終打印出來的條碼）

　　　說明：　

　　　　　1.Lodop官網：http://www.lodop.net/

　　　　　2.Lodop官網下載中心（下載自己所需的相應版本）：http://www.lodop.net/download.html

　　　　　3.Lodop在線樣例：http://www.lodop.net/LodopDemo.html

　　 　使用：

　　　　1.先去下載中心下載Lodop打印組件發行包。如圖所示：

　　　　　　

　　　　2.項目中創建LodopFun.js文件，該文件內容就是上一步中下載的安裝包中的LodopFuncs.js文件。

　　　　　注意：記得在該文件的最后 導出getLodop函數。例如：export default getLodop

　　　　3.在相應文件引入getLodop。如：import getLodop from '@/utils/LodopFuncs';

　　　　4.代碼舉例：

　　　　　　

　　　　　　　　　　　　<div class="dayinID" v-for="(item,index) in goodCodeList" :key="item.uid" :id="'dayinID_'+index">

                        <div class="row5"> 品牌：{{ item.brandName }}</div>

                        <div class="row1">{{ item.goodName }}</div>

                        <div class="row2">{{ item.skuName }}</div>

                        <div class="row3">

                            價格：￥{{ item.price }}  

                        </div>

                        <div class="row4">

                            <barcode

                                :value="item.code"

                                :options="{ widht:100,height:50, background:'rgba(255,255,255,.0)'}"

                                style="width: 100%;height: 100%;">

                            </barcode>

                        </div>

                        <div class="tiaoma-space"></div>

                    </div>

                    <el-button class="btnClass" type="primary" plain @click="toClick" >打印</el-button>

style:

 　　.dayinID{width: 237px;height: 155px;border: 1px solid #000;margin-top: 10px;}

    .row5,.row1{ width: 100%;height: 20px;line-height: 20px;color: #000;text-align: center;font-weight: 700;font-size: 0.8rem;}

    .row2{ width: 100%;height: 25px;text-align: center;color: #000;font-weight: 700;font-size: 1.2rem;line-height: 25px;}

    .row3{ width: 100%;height: 20px;line-height: 20px;text-align: center;font-size: 0.8rem;}

    .row4{ width: 100%;height: 60px;}

    .tiaoma-space{width: 100%;height: 10px;margin-top: 20px;}

 

data中:

　　

　　　　　　　　　goodCodeList:[  

　　　　　　　　　　　　{uid: 1, brandName: '蘋果',goodName: 'iphone13 Pro',code: '11112222333',price: 900, unit:'個', skuName: '8+526G', num: 3},

                ],

methods中:

　　　　　　toClick() {        // 商品條碼

                const LODOP = getLodop()

                if (LODOP) {

                    this.goodCodeList.forEach( (item,index) => {　　 // 這里為打印的商品條碼

                       　　 // 反之，則以商品的數量作為打印份數依據。（注：這里是該商品條碼打印的份數）

                            for( let i=0; i<item.num; i++) {

                                var strBodyStyle = '<style>'

                                strBodyStyle += '.dayinID { width: 200px;height: 155px;border: 1px solid #000;margin-top: 10px;}'

                                strBodyStyle += '.row5,.row1 { width: 100%;height: 20px;line-height: 20px;color: #000;text-align: center;font-weight: 700;font-size: 0.8rem;}'

                                // strBodyStyle += '.row1>span { width: 50%;height: 100%;text-align: center;line-height: 30px;color: #000;float: left;}'

                                strBodyStyle += '.row2 { width: 100%;height: 25px;text-align: center;color: #000;font-weight: 700;font-size: 1.2rem;line-height: 25px;}'

                                strBodyStyle += '.row3 { width: 100%;height: 20px;line-height: 20px;text-align: center;font-size: 0.8rem;}'

                                strBodyStyle += '.row4 { width: 100%;height: 60px;}'

                                strBodyStyle += '.tiaoma-space{width: 100%;height: 10px;margin-top: 20px;}'

                                strBodyStyle += '</style>' // 設置打印樣式

                                var strFormHtml = strBodyStyle + '<body>' + document.getElementById('dayinID_'+index).innerHTML + '</body>'   // 獲取打印內容

                           

                                LODOP.PRINT_INIT('')  //初始化

                                LODOP.SET_PRINT_PAGESIZE(3, 790, 0, '')  // 設置橫向(四個參數：打印方向及紙張類型（0(或其它)：打印方向由操作者自行選擇或按打印機缺省設置；1：縱向打印,固定紙張；2：橫向打印，固定紙張；3：縱向打印，寬度固定，高度按打印內容的高度自適應。），紙張寬(mm)，紙張高(mm),紙張名(必須紙張寬等於零時本參數才有效。))

                           

                                LODOP.ADD_PRINT_HTM('1%', '1%', '98%', '98%', strFormHtml)        // 設置打印內容

                                // LODOP.ADD_PRINT_TEXT('1%', '1%', '98%', '98%', strFormHtml)    // 設置打印內容

                                LODOP.ADD_PRINT_BARCODE( 85, 55, 230, 60, '128Auto', item.code);   // 條碼（六個參數：Top,Left,Width,Height,BarCodeType,BarCodeValue）

                                // LODOP.SET_PREVIEW_WINDOW(2, 0, 0, 800, 600, '')  // 設置預覽窗口模式和大小

                                // LODOP.PREVIEW()  // 預覽。（這里可以進行預覽，注意這里打開時記得把下面的print先注釋。）另外，這里的預覽只顯示單個商品 打印出來的效果即該預覽效果。

                                LODOP.PRINT();　　// 打印

                            }

                    });

                }

            },  

　　5.注：

　　　　1.我這里的代碼沒有默認設置打印機相關的代碼。有需要的可自行去百度。當然我這里沒有的情況下就需要去控制面板的設備和打印機中 將相應的打印機設為默認。

　　　　2.在設備和打印機中 右鍵打印機（設為默認的打印機）--->>>打印首選項。在其中設置自己相應的信息。

　　　　例如（我的：）

　　　　　　

 

　　　　　

 　　END：如果最后打印出來的出現樣式不一致問題，請自己參考官網案例調整自己的代碼。

　　　　　 如果打印機出現連續走紙情況，首先可以先進行虛擬打印（舉例：可使用windows的導出為 WPS PDF查看），要是沒問題則就需要對打印機進行相關設置，即上面兩個圖中的信息。

　　　　　　最后，以上信息僅供參考，具體問題具體分析。最終還是需要自己進行相應的分析。