Vue + JsBarcode 批量打印标签

1、引入JsBarcode

import JsBarcode from 'jsbarcode';

2、批量选择页面列表数据

3、循环选择的数据集，创建要打印的HTML内容

        <div ref="printDiv" style="display:none;"><div v-for="item in selectedRows" :key="item.batchNumber" style="page-break-after:always;"><div style="margin-top:7px;"><img :src="item.batchNumber | creatBarCode(item.batchNumber)" style="width:auto; height:150px"/></div><div style="font-size:30px;margin-top:7px;">业务类型：{{item.businessType}}</div><div style="font-size:30px;margin-top:7px;">物流渠道：{{item.courier}}</div></div></div>

这里有点要讲一下，就是循环的div的样式（style）要加上page-break-after:always;

<div v-for="item in selectedRows" :key="item.batchNumber" style="page-break-after:always;">

4、利用JsBarcode生成条码，输出图片给img标签

        creatBarCode(barCodeData, printData) {console.log("触发条码生成事件");console.log(printData);let canvas = document.createElement("canvas");JsBarcode(canvas, barCodeData, {format: "CODE128",displayValue: true,margin: 0,height: 125,width: 2,fontSize: 30,textMargin: 10,});return canvas.toDataURL("image/png");}

5、利用iframe打印局部内容

<iframe ref="printIframe" frameborder="0" scrolling="no" style="margin: 0px;padding: 0px;width: 0px;height: 0px;"></iframe>

        onPrint(){if(!this.selectedRows || this.selectedRows.length == 0){this.$Message.error({content: "请选择要打印批次号！", duration:5});return;}this.printData.count = this.selectedRows.length;var printIframe = this.$refs.printIframe;var html = this.$refs.printDiv.innerHTML;printIframe.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();};}

6、看一下效果

style="page-break-after:always;" 的作用如图

Vue + JsBarcode 批量打印标签相关推荐

怎么用BarTender批量打印标签
2019独角兽企业重金招聘Python工程师标准>>> 关于使用BarTender条码打印软件打印标签,很多小伙伴最关心的问题之一,莫过于如何实现BarTender批量打印标签.为了 ...
Vue的批量更新原理
简单的代码开始: var app = new Vue({el: '#app',data: {message: 'Hello Vue!'},watch: {message (val) {console. ...
Excel中批量生成标签,批量打印标签。按指定模板批量打印标签
1.问题概述工作中经常需要将产品明细表转换成标签,贴在送货单上,或者将学生成绩转换成标签打印出来发送给学生. 例如在下图中有若干产品的送货信息,要求按图2的模板批量打印. 图1 送货信息图2 标签 ...
vue项目批量加载url文件并打包到zip下载
vue项目批量加载url文件并打包到zip下载项目里之前是遇到这样一个需求哈,需要根据选择的不同动态批量生成并下载图片, 而且这个图片不是一张一张生成下载,而是要等他选好条件之后, 把对应的图片动态 ...
express+vue实现批量添加功能
express+vue实现批量添加功能前段时间由于后台的研究僧跑路了,我这个应届小菜鸟肩负起了全栈开发的工作,学得那是一个心累啊.项目没有很大,但麻雀虽小五脏俱全,写几篇文章不枉此行吧.废话不多说, ...
P-touch Editor 批量打印标签
注:本教程适用于Brother品牌各系列的专用标签机. 一.批量编辑标签表格: 用Excel软件来批量编辑标签,首先确定需要几列,一般是两列(本端和对端),如果中间通过跳线架的,可以再加一列(转接点) ...
自定义HTML内容批量打印标签或者单据方案
Background 用户需要自定义设置标签或者单据内容. 产品技术方案选用Web架构. 用户环境复杂,操作系统版(Windows)本不一致,Browser兼容问题比较多. 用户打印设备型号多样,部分 ...
java批量打印标签_java批量打印
下面是实现java批量打印功能的具体工具类,其中的Info类和UserClass为具体的快递面单中要打印的信息,以参数的方式传递过来,循环调用java PrinterJob服务进行打印:这里的快递尺寸 ...
vue JsBarcode 常用参数设置
jsbarcode是一个不依赖任何库/框架的条形码生成库,使用原生JavaScript写成. 安装依赖包 npm install jsbarcode --save 在使用页面引入依赖包 import ...
条码标签打印软件导入Excel批量打印标签
Excel表格文件保存数据方便,很多用户使用它存放复杂的表单数据,比如仓储进销存.固定资产的盘点管理等,Excel单元格不仅可以实现单列统计.也可以实现多列的合并,学习和掌握起来也比较简单. 如何将数 ...

Vue + JsBarcode 批量打印标签

Vue + JsBarcode 批量打印标签相关推荐

最新文章

热门文章