jsBarCode生成条码并且打印的问题

前提：vue项目中，需要前端生成条码并且打印。

使用了jsBarCode去生成条码，废话不多说，上代码：

template部分：

<el-button type="text" icon="el-icon-printer" size="small" @click="dy(scope.row.id)">条码打印</el-button><div ref="printDiv" style="display:none;"><div v-for="item in selectedRows" :key="item.barCode"><div style="margin-top:7px;"><img :src="item.barCode | creatBarCode(item.barCode)" style="width:auto; height:150px"/></div></div>
</div>
<iframe ref="printIframe" frameborder="0" scrolling="no" style="margin: 0px;padding: 0px;width: 0px;height: 0px;"></iframe>

script部分：

import JsBarcode from 'jsbarcode'filters: {creatBarCode(barCodeData, printData) {console.log("触发条码生成事件");console.log(printData);let canvas = document.createElement("canvas");JsBarcode(canvas, barCodeData, {format: "CODE128",displayValue: true,margin: 10,height: 250,width: 3,fontSize: 30,textMargin: 10,});return canvas.toDataURL("image/png");}
},methods: {dy (id) {this.boxLoad = truethis.tbBarCodeService.list({'current': '1','size': '999999','produceConfirmId': id}).then(({data})=>{this.selectedRows = data.recordsif(this.selectedRows.length === 0){this.boxLoad = falsereturn this.$message.warning("该确认单无条码！")}this.printData.count = this.selectedRows.lengththis.$nextTick(()=>{this.boxLoad = falsevar printIframe = this.$refs.printIframevar html = this.$refs.printDiv.innerHTMLprintIframe.setAttribute('srcdoc', html)printIframe.onload = function () {console.log(printIframe.contentWindow)// 去掉iframe里面的dom的body的padding margin的默认数值printIframe.contentWindow.document.body.style.padding = '0px'printIframe.contentWindow.document.body.style.margin = '0px'// 开始打印printIframe.contentWindow.focus()printIframe.contentWindow.print()}})})},
}

问题描述：在vue单页面项目中，使用jsbarcode生成的条码并且在iframe中生成预览打印，然后切换路由，再回到打印的页面中，不点击打印按钮，会自动弹出打印预览。

解决思路：1.拦截iframe的生成 2.生成了iframe后把iframe流关闭掉

因为是在keep-alive中的所以我们需要在deactivated中去处理上代码

js部分：

deactivated () {var printIframe = this.$refs.printIframevar html = this.$refs.printDiv.innerHTMLprintIframe.setAttribute('srcdoc', html)printIframe.onload = function () {printIframe.contentWindow.focus()printIframe.contentWindow.close()}
},

jsBarCode生成条码并且打印的问题相关推荐

js 生成条码和打印
需求条形码上边显示汉字,下边显示码值,如下图. 研究条形码规范对条形码是否能显示汉字,不确定,只能研究规范了. 研究得知,条形码也就是一维码,有很多规范,所有的规范都不支持汉字,所以在条形码上边 ...
SAP Bar Code 开发(02) – 条码生成与输出打印
上篇文章中讲述了SAP Bar Code的几种解决方案: 而本文主要讲述条码的格式类型及其SAP提供的条码格式打印: 1. 条码类型与码制对于条码的类型估计都很熟悉,主要分为一维码和二维码: 然而, ...
用条码标签打印软件生成条码的校验码
一维码的类型有很多种,有些类型最后一个字符是校验码,根据前面的数据计算得出,作用是条码的正确性校验,如EAN-13\8.UPC-A\E等类型. 条码,英文名称barcode,又称条形码,常用种类分为一 ...
ZPL 打印条码、二维码及小票（中文/汉字），生成条码、二维码图片【Asp.Net】-含示例代码
生成条码(图1).二维码(图2)图片及打印出二维码标签(图3)效果图1 图2 ...
如何处理设计的条码与打印出来的不一样的问题
2019独角兽企业重金招聘Python工程师标准>>> 今日有用户在使用BarTender设计打印条码时发现自己设计出来的条码与打印显示的条码有不一样的地方,也就是BarTender ...
excel数据生成条码或者二维码并放在表格中（VBA）
最近做的项目要将一列数据生成条码和二维码,并打印这是一个简单的表格操作嵌入式脚本目的是生成二维码或条码直接上代码 Sub 批量生成二维码()Dim k As Long, i As Long, j ...
C++Builder下利用TImage制作二维条码PDF417打印控件（一）
PDF417二维条码的应用现代社会,由于条码的使用,极大地提高了数据采集和信息处理的速度,提高了工作效率,为管理的科学化和现代化作出了很大贡献. 受信息容量的限制,一维条码必须依赖于后台的数据库才能 ...
JAVA生成条码（jbarcode）
条码技术在现在的应用非常广泛,几乎所有的商品包装上都会印有条形码,这一篇将通过实例演示JAVA如何生成条码,需要使用的第三方包为:jbarcode import java.awt.image.Buff ...
PDA手持终端扫描条码开单打印一体结合后台电脑系统数据同步交互解决方案
PDA手持终端扫描条码开单打印一体结合后台电脑系统数据同步交互解决方案参考文章: (1)PDA手持终端扫描条码开单打印一体结合后台电脑系统数据同步交互解决方案 (2)https://www. ...
excel 批量生成条码
2019独角兽企业重金招聘Python工程师标准>>> 参考网站: https://jingyan.baidu.com/article/597a06434f1b12312b52430 ...

jsBarCode生成条码并且打印的问题

jsBarCode生成条码并且打印的问题相关推荐

最新文章

热门文章