Vue2 pitfall project: Generate QR code and use vue-print-nb to print QR code

1.

vue2 installation npm install vue-print-nb --save

vue3 installation npm install vue3-print-nb --save

 2.

//vue2 introduction method global main.js

import Print from 'vue-print-nb'

Vue.use(Print)

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

//vue2 introduction method on demand

import print from 'vue-print-nb'

directives: { print} //Register in custom directives

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

//vue3 introduction method global 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 introduction method on demand

import print from 'vue3-print-nb'

directives: { print } //Register in custom directives 

//html
   <el-button @click="clickPrint(form)">打印</el-button>

   <el-drawer 
     title="图片打印" 
     :visible.sync="drawer" 
     :direction="direction" 
     :before-close="handleClose" 
     size="80%">
      <div style="position: absolute;right: 110px;top: 15px;padding-left: 30px;">
        <!-- <el-button @click="drawer = false">取消</el-button> -->
        <el-button type="primary" v-print="print">打印</el-button>
      </div>
      
       <div id="printView">
         <div class="img-content-first" 
             :class=" index >= 5?'img-content':'img-content-first'" 
             v-for="(item,index) in erwmList" 
             :key="index">

             <img :src=item.imgBase class="img" />

           <div class="text">{
   
   { item.connectorCode }}</div>
         </div>
       </div>

    </el-drawer>

//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
<style scoped lang="less">
......
  .img-content-first{
    display: inline-block;
    border: 2px solid #000;
    margin: 0 0 0 30px;

    .text{
      margin: 0 auto;
      text-align: center;
      color: #000;
      font-size: 18px;
      margin-top: -24px;
    }
  }
  .img-content{
    display: inline-block;
    border: 2px solid #000;
    margin: 50px 0 0 30px;

   .text{
      margin: 0 auto;
      text-align: center;
      color: #000;
      font-size: 18px;
      margin-top: -24px;
    }
  }
  // @media print {
  //   #print .img-content {
  //     width: 150px;
  //     height: 150px;
  // }
  // }
</style>

<!-- 添加独立style标签 -->
<style media="print" lang="less">
  @page {
    size: auto;
   
  }
  @media print {
    // html {
    //   zoom: 70%; //设置打印页面的缩放，大小
    //    margin: 0 auto;
    // }
   #printView .img-content-first{
      border: 2px solid #000;
      // width: 190px;
      height: 185px;
      margin: 10px 0 0 15px;
    }

   #printView .img-content{
      border: 2px solid #000;
      // width: 190px;
      height: 185px;
      margin: 30px 0 0 15px;
    }

   #printView .img{
      // width: 190px;
      height: 180px;
    }

   #printView .text{
      margin: 0 auto;
      text-align: center;
      color: #000;
      font-size: 18px;
      margin-top: -24px;
 }
}

---

Previous article,

vue2 pitfall project: yarn cannot load the file C:UsersAdministratorAppDataRoaming pmyarn.ps1 because running scripts is prohibited on this system_Yichu's Blog-CSDN Blog yarn: cannot load the file C:UsersAdministratorAppDataRoaming pmyarn.ps1 because it is prohibited on this system Disable running of scripts. 2. Execute: set-ExecutionPolicy RemoteSigned, select Y and press Enter. 3. Check the execution policy: get-ExecutionPolicy to check whether it is RemoteSigned. 1. Search for PowerShell in the start menu and open it as an administrator. 4. Close the window and report the error to resolve. https://blog.csdn.net/weixin_43928112/article/details/132488190?spm=1001.2014.3001.5502