使用VueBarcode结合vueEasyPrint打印条形码标签
VueBarcode + VueEasyPrint 合体,生成标签并实现打印功能
·
目标:
生成标签并实现打印功能
学习步骤:
1、了解 VueBarcode2、了解 VueEasyPrint
3、VueBarcode 实践
4、VueEasyPrint 实践
5、VueBarcode + VueEasyPrint 合体
💡许多人来问有没有案例代码,我大致抽取了一下,放置在最后供参考!
一、了解 VueBarcode
点击传送至官网
原文介绍:
JsBarcode是一个用JavaScript编写的条形码生成器。它支持多种条形码格式,可以在浏览器和Node.js中使用。当它用于web时,它没有依赖性,但如果您喜欢,它可以与jQuery一起使用。
甚至还有在线调试Demo😊
点击跳转 条码相关参数修改介绍
二、了解 VueEasyPrint
这是一个基于vue 2.0的打印组件
它的核心是使用vue组件的slot插槽进行模板加载。 使用iframe复制打印区域
点击跳转至官方文档
三、VueBarcode实践
1、先安装vue-barcode插件
npm install vue-barcode
2、引入 VueBarcode 并注册为组件
import VueBarcode from 'vue-barcode';
3、页面使用该组件
四、VueEasyPrint实践
1、按照官方教学快速入门安装
npm install vue-easy-print --save
2、引入VueEasyPrint并注册为组件
import vueEasyPrint from "vue-easy-print";
3、在页面中使用
4、配置props参数
// 是否显示表格
tableShow:{
type:Boolean,
default:false
},
// 每页多少行
onePageRow: {
type:Number,
default:5,
},
5、绑定打印按钮实现打印功能
五、VueBarcode + VueEasyPrint 合体
上面两步实践结合
将生成条码及逻辑代码放入打印组件中
效果
案例代码,仅供参考
<template>
<div class="bg">
<el-dialog
width="21cm"
height="10cm"
:modal-append-to-body='false' title="样品标签" :visible.sync="scanVisible">
<!-- 表单是否显示 -->
<div style="height:500px">
<div ref="qrcode" id="box">
<vue-easy-print tableShow ref="easyPrint"
:onePageRow="onePageRow"
>
<div v-for="(item, index1) in list" :key="index1" >
<div class="All" style="font-family:sans-serif">
<div class="tagBox">
<div class="lh">
<div>样品名称:</div>
<div>{{ item.name }}</div>
</div>
<div class="la">
<div class="lh">
<div>样品编号:</div>
<div >{{ item.serial }}</div>
</div>
</div>
<div class="lh">
<div>样品类型:</div>
<div>{{ item.type }}</div>
</div>
<div class="la">
<div class="lh">
<div>存储条件:</div>
<div>{{ item.condition }}</div>
</div>
</div>
<div class="lh">
<div>样品数量:</div>
<div>{{ index2 + 1 }}/{{ item.num }}支</div>
</div>
<div class="lh" >
<div>收样时间:</div>
<div>{{ item.time }}</div>
</div>
<div class="lh">
<div>流转状态:</div>
<div>▢待检,▢已检,▢留样</div>
</div>
<div class="ewm">
<vue-barcode :value="item.serial" :width="1.5" :height="15" :margin="0" :displayValue="false" ></vue-barcode>
</div>
</div>
</div>
</div>
</vue-easy-print>
</div>
</div>
<span slot="footer" class="dialog-footer">
<!-- <el-button @click="dialogVisible = false">取 消</el-button> -->
<el-button type="primary" @click="printDemo">打印标签</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import VueBarcode from 'vue-barcode';
import vueEasyPrint from "vue-easy-print";
export default {
components: {
VueBarcode,
vueEasyPrint
},
props: {
obj: {
default: [],
type: Array
},
onePageRow:{
type:Number,
default:3
},
blankLines:{
type:Boolean,
default:true
},
scanVisible:{
type:Boolean,
default: false
}
},
data() {
return {
value: '',
id: '',
list: [{
name: '测试名称',
serial: '测试编号',
type: '测试类型',
num: 1,
condition: '测试条件',
time:''
}],
visible: true
}
},
watch: {
obj() {
this.getInit()
}
},
created() {
this.getInit()
},
methods: {
printDemo() {
this.$refs.easyPrint.print()
},
getInit() {
let resultList = []
// 查询数据,整理数据代码,最后归至resultList...
this.list = resultList
},
/* 关闭*/
remRedar() {
this.visible = false // 列表隐藏
this.listData = [] // 清空列表数据
this.redar = false // 扫码图标隐藏
this.$emit('scanOff', false)
}
}
}
</script>
<style lang="scss" scoped>
.tagBox {
width: 231px;
position: relative;
border: 1px solid #000000;
padding: 2px;
display: inline-block;
margin: 10px 10px;
border-radius: 4px;
background-color: #fff;
}
.ewm{
margin-left: 30px;
}
.la {
display: flex;
align-items: center;
}
.lh {
font-size: 14px;
display: flex;
align-items: center;
}
</style>
实现效果
另外一个样式,留给你们自己去实现🤔
更多推荐
已为社区贡献1条内容
所有评论(0)