vue-print打印条形码出现空白、样式丢失
1.安装插件
npm install vue-print-nb --save //安装打印插件cnpm install jsbarcode --save //安装条形码插件
2.main.js引入
import Print from 'vue-print-nb'Vue.use(Print);
需要条形码的页面
import JsBarcode from 'jsbarcode' //条形码
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>
data里标注 v-print设置打印的id和打印的标题
printArea:{id:"printMe",popTitle:'条形码',}
4.生成条形码
打印后的条形码样式我通过style定义不了，以为失去样式
后来在JsBarcode渲染时调整的样式
for(let i=0;i<_this.list.bar_code.length;i++){let serviceurl = 'yz' + _this.list.bar_code[i].shelf_numberlet 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//设置条形码周围的空白边距})})}}})
我在for循环渲染多个时，出现闪退。
最后发现是画布定义为undefined，提前把画布定义好即可
打印时可能出现条形码空白，加上 this.$nextTick即可
