vue2踩坑之项目：生成二维码使用vue-print-nb打印二维码

1.

vue2安装 npm install vue-print-nb --save

vue3安装 npm install vue3-print-nb --save

 2.

//vue2 引入方式 全局 main.js

import Print from 'vue-print-nb'

Vue.use(Print)

------------------------------------------------------------------------------------

//vue2 引入方式 按需

import print from 'vue-print-nb'

directives: { print} //自定义指令中注册

------------------------------------------------------------------------------------

//vue3 引入方式 全局 main.js

import { createApp } from 'vue'

import App from './App.vue'

import print from 'vue3-print-nb'

const app = createApp(App)app.use(print)app.mount('#app')

------------------------------------------------------------------------------------

//vue3 引入方式 按需

import print from 'vue3-print-nb'

directives: { print } //自定义指令中注册 

//html
   打印

   
      

        
        打印
      
      
       

         


             

           
{{ item.connectorCode }}
         
       

    

//script
// 单组件引用打印插件
import print from 'vue-print-nb'
import {getxxxx} from "../../api/xxxx/xxxx.js" // 二维码接口


//data
// 抽屉 批量打印
data() {
 return {
    //表单筛选条件
    form:{
     status:'',
     name:'',
     //....
    },
    drawer: false,
    direction: 'rtl',
    erwmList:[], //二维码列表
    erweimaImg: '',
    // 打印插件
    print: {
    id: "printView", //打印的区域的id名
    popTitle: "管理平台", // 打印配置页上方标题
    extraHead: "", //最上方的头部文字，附加在head标签上的额外标签,使用逗号分隔
    extraCss: "",
    },
  }
}

//js
 // 批量打印 点击事件 
      clickPrint (item) {
        // console.log(item,'ss');
        if (
        (item.status=== "" || null || undefined) &&
        (item.name === ""||null||undefined)
           ) 
        {
          this.drawer = false
          this.$alert('', '请选择筛选条件！', {
          confirmButtonText: '确定',
         });
          
        } else {
              getxxxx(item).then(res => {
                  //console.log(res);
                  this.erwmList= res
              if (res) {
                this.drawer = true
               }
             })
          }
      },
      // 批量打印 抽屉关闭事件
        handleClose (done) {
          this.drawer = false
        // this.$confirm('确认关闭？')
        //   .then(_ => {
        //     done();
        //   })
        //   .catch(_ => {});
      },


//css