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

• 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、使用：

　　
锄禾日当午
　　
汗滴禾下土 
　　
谁知盘中餐
　　
粒粒皆辛苦

打印

二、手动下载插件到本地

插件地址：https://github.com/xyl66/vuePlugs_printjs

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

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

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

3、使用

　　
打印内容
　　
不要打印我

打印

methods:{
  handlePrintText(){
    this.$print(this.$refs.print)
  }
}

实现批量打印二维码

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

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

3、使用

  

  　

      
{{item.name}}
      

    
  

批量打印

//假设需要批量打印的数组为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、效果图
这两种方法效果一样，点击按钮弹出一个打印弹窗，唯一不同的是调用方法不一样，看个人需求选择使用哪种

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