vue实现生成条形码以及打印条码功能

需求：生成条形码以及打印条码

分为两步：一个是打印功能，一个是生成条码功能

一、打印功能 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)
            },
         }
      }
   }
}

结语：有问题欢迎指出讨论~

感谢您的来访，获取更多精彩文章请收藏本站。