需求:打印条码
分为两步:一个是打印功能,一个是生成条码功能
一、打印功能 vue-print-nb:这个插件使用起来便捷,用法如下:
1、安装
npm install vue-print-nb --save
2、在main.js文件中注册使用
import Print from 'vue-print-nb'
Vue.use(Print);
3、使用
<!--绑定id方法-->
<div id='box'>
<p>打印内容</p>
</div>
<div v-print='#box'>打印</div>
<!--绑定对象方法-->
<div id='box'>
<p>打印内容</p>
</div>
<div v-print='printObj'>打印</div>
export default{
data(){
return {
printObj:{
id: "printMe", // 打印的区域
preview: false, // 预览工具是否启用
previewTitle: '打印条码', // 预览页面的标题
popTitle: '', // 打印页面的页眉
previewBeforeOpenCallback(vue) {
console.log('正在加载预览窗口')
},
previewOpenCallback(vue) {
console.log('已经加载完预览窗口')
},
clickMounted: (vue) => {
console.log("触发点击打印回调");
vue.isShowPrint = true //弹框显示条码
},
beforeOpenCallback(vue) {
console.log('打开之前',vue.barcodeNum)
},
openCallback (vue) {
vue.isShowPrint = false // 关闭条码显示弹框
console.log('执行了打印',vue.barcodeNum)
},
}
}
}
}
二、条码实现,通过vue-barcode插件,用法如下:
1、安装插件
npm install vue-barcode --save
2、引用注册
import VueBarcode from 'vue-barcode';
3、使用
<vue-barcode value="value-to-render" :width="1.5" :height="50">
Show this if the rendering fails.
</vue-barcode>
三、vue 打印条码功能实现完整代码
<Modal
v-model="isShowPrint"
title="打印条码"
footer-hide>
<vue-barcode :value="barCode" :width="1.5" :height="50">
// 显示绑定的barCode值
</vue-barcode>
<Button size="small" class="mar8" @click="printBarcode(row)">条码打印</Button>
</Modal>
export default{
data(){
return {
printContent:{
id: "printMe", // 打印的区域
preview: false, // 预览工具是否启用
previewTitle: '打印条码', // 预览页面的标题
popTitle: '', // 打印页面的页眉
previewBeforeOpenCallback(vue) {
console.log('正在加载预览窗口')
},
previewOpenCallback(vue) {
console.log('已经加载完预览窗口')
},
clickMounted: (vue) => {
console.log("触发点击打印回调");
vue.isShowPrint = true //弹框显示条码
},
beforeOpenCallback(vue) {
console.log('打开之前',vue.barcodeNum)
},
openCallback (vue) {
vue.isShowPrint = false // 关闭条码显示弹框
console.log('执行了打印',vue.barcodeNum)
},
}
}
}
}
有问题欢迎指出~
参考链接:
https://github.com/lindell/vue-barcode
Options · lindell/JsBarcode Wiki · GitHub