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 } //自定义指令中注册 

javascript">//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;
 }
}

---

上一篇文章，

vue2踩坑之项目：yarn无法加载文件 C:UsersAdministratorAppDataRoaming pmyarn.ps1，因为在此系统上禁止运行脚本_意初的博客-CSDN博客yarn:无法加载文件 C:UsersAdministratorAppDataRoaming pmyarn.ps1，因为在此系统上禁止运行脚本。2.执行：set-ExecutionPolicy RemoteSigned 选择Y后进行回车。3.查看执行策略：get-ExecutionPolicy 查看是否为RemoteSigned。1.开始菜单中搜索PowerShell以管理员身份打开。4.关闭窗口报错解决。https://blog.csdn.net/weixin_43928112/article/details/132488190?spm=1001.2014.3001.5502