欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

vue常用插件之打印功能、二维码插件、批量打印二维码

程序员文章站 2022-07-04 22:31:05
vue实现打印的两种方法 vue实现批量打印二维码 (需安装二维码插件qrcodejs2) 一、vue print nb插件 1、安装: npm i vue print nb S 2、全局注册(main.js): 3、使用: 二、手动下载插件到本地 插件地址:https://github.com/x ......
  • vue实现打印的两种方法
  • vue实现批量打印二维码 (需安装二维码插件qrcodejs2)

    一、vue-print-nb插件

    1、安装: npm i vue-print-nb -s

2、全局注册(main.js):

import print from 'vue-print-nb'
vue.use(print)

3、使用:

<div id="printtest" >
  <p>锄禾日当午</p>
  <p>汗滴禾下土 </p>
  <p>谁知盘中餐</p>
  <p>粒粒皆辛苦</p>
</div>
<button v-print="'#printtest'">打印</button>

二、手动下载插件到本地

插件地址:https://github.com/xyl66/vueplugs_printjs

1、在src下新建文件夹plugs,将下载好的print.js放入plugs文件夹下

2、全局注册(main.js):

import print from './plugins/print'
vue.use(print) // 注册

3、使用

<div ref="print" >
  <p>打印内容</p>
  <p class="no-print">不要打印我</p>
</div>
<button @click="handleprinttext">打印</button>
<!--no-print样式类 为不打印区域-->
methods:{
  handleprinttext(){
    this.$print(this.$refs.print)
  }
}

实现批量打印二维码

1、安装二维码插件
npm i qrcodejs2 -s

2、导入插件
import qrcode from 'qrcodejs2';

3、使用

<!--设置打印内容在页面上不可见-->
<div style="display:none;">
  <div ref="print" id="printstyle">
   <div class="item" v-for="(item,index) in this.goodsdata" :key="index">
      <h2>{{item.name}}</h2>
      <div class="qrcode-pic" ref=codeitem></div>
    </div>
  </div>
</div>
<button @click="handlebatchprintcode">批量打印</button>
//假设需要批量打印的数组为goodsdata:[{name:'商品1', code:'123'},{name:'商品2', code:'456'}]
methods:{
  handlebatchprintcode(){
    //必须要等到页面加载完成,不然会报错
    this.$nextick(()=>{
      this.goodsdata.foreach((item,index)=>{
        let code = item.code;
        this.$refs.codeitem[index].innerhtml="";
        new qrcode(this.$refs.codeitem[index], {
          text: code, //二维码内容
          width: 200,
          height: 200,
          // colordark: "#333333", //二维码颜色
          // colorlight: "#ffffff", //二维码背景色
        })
      })
      settimeout(()=>{
        this.$print(this.$refs.print);
      },200)
    })
  }
}

4、样式问题

//打印样式放在这个里面就可以了
@media print{
  #printstyle .item{
    margin: 10px;
  }
  #printstyle h2{
      font-size: 30px;
  }

}

5、效果图
这两种方法效果一样,点击按钮弹出一个打印弹窗,唯一不同的是调用方法不一样,看个人需求选择使用哪种
vue常用插件之打印功能、二维码插件、批量打印二维码

ps:功能算是实现了,具体还没连打印机,所以没法测试,有问题后面再补充