vue-print打印条形码出现空白、样式丢失_v-print打印样式丢失

vue-print打印条形码出现空白、样式丢失

1.安装插件

npm install vue-print-nb --save  //安装打印插件

cnpm install jsbarcode --save  //安装条形码插件
1
2
3

2.main.js引入

import Print from 'vue-print-nb'
Vue.use(Print);
1
2

需要条形码的页面

import JsBarcode from 'jsbarcode' //条形码
1

3.给需要打印的区域添加id，然后再添加一个打印按钮为按钮添加 v-print 属性

<el-button type="primary"  v-print="printArea" style="margin-right:40px">打 印</el-button>
<div id="printMe">
   <div style="padding:0;display:inline-block;width:50%;"  v-for="item in list.bar_code" :key="item.dak_number">
     <canvas class="bar_codes" style="width:100%;height:95px;"></canvas>
   </div>
</div>
1
2
3
4
5
6

data里标注 v-print设置打印的id和打印的标题

printArea:{
  id:"printMe",
  popTitle:'条形码',
}
1
2
3
4

4.生成条形码
打印后的条形码样式我通过style定义不了，以为失去样式
后来在JsBarcode渲染时调整的样式

 for(let i=0;i<_this.list.bar_code.length;i++){
                        let serviceurl = 'yz' + _this.list.bar_code[i].shelf_number
                        let serviceurll =  _this.list.bar_code[i].dak_number
    
                        //二维码 加_this.$nextTick可渲染
                        // _this.$nextTick(()=>{
                        //     // let serviceurl = serviceur //测试
                        //     let canvas = document.getElementsByClassName('bar_codeqr')[i]
                        //     QRCode.toCanvas(canvas, serviceurl, function (error) {
                        //     if (error) console.error(error)

                        //     })
                        // })

                        //条形码
                        _this.$nextTick(()=>{
                            let canvass = document.getElementsByClassName('bar_codes')[i]
                            JsBarcode(canvass, serviceurll,{
                              displayValue: false, // 是否在条形码下方显示文字
                               format: "CODE39",//选择要使用的条形码类型
                                width:4.3,//设置条之间的宽度
                                height:75,//高度
                                displayValue:true,//是否在条形码下方显示文字
                                // text:"456",//覆盖显示的文本
                                fontOptions:"bold",//使文字加粗体或变斜体  italic
                                // font:"fantasy",//设置文本的字体
                                textAlign:"center",//设置文本的水平对齐方式
                                // textPosition:"top",//设置文本的垂直位置
                                textMargin:5,//设置条形码和文本之间的间距
                                fontSize:30,//设置文本的大小
                                // background:"#eee",//设置条形码的背景
                                lineColor:"#000",//设置条和文本的颜色。
                                // margin:15//设置条形码周围的空白边距
                            }
                        )
                        })

                    }

                }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

我在for循环渲染多个时，出现闪退。
最后发现是画布定义为undefined，提前把画布定义好即可
打印时可能出现条形码空白，加上 this.$nextTick即可