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查看），要是没问题则就需要对打印机进行相关设置，即上面两个图中的信息。

　　　　　　最后，以上信息仅供参考，具体问题具体分析。最终还是需要自己进行相应的分析。