vue+element 动态生成二维码并选择批量打印表格内容

下载生成二维码的插件(vue-qr)

vue-qr

npm install vue-qr --save

下载打印库(printJS)

PrintJS

npm install print-js --save

在main.js里引入

引入vue-qr的两种方式

// vue2.0  引入Vue-qr
import VueQr from 'vue-qr'
 
// vue3.0  引入Vue-qr
import vueQr from 'vue-qr/src/packages/vue-qr.vue'
new Vue({
    components: {VueQr}
})

引入print JS库

import print from 'print-js'

在项目页面中使用  

<el-table-column label="防伪码" width="170" align="center">
    <template slot-scope = "scope" >
            <!-- 生成二维码 -->
                <vue-qr
                :ref="'ref'+scope.row.securityId"
                :size="80"
                :margin="0"
                :auto-color="true"
                :dot-scale="1"
                :text = "'http://www.baidu.com?param='+scope.row.securityCode"
              />      
    </template>
</el-table-column>

<script>
import VueQr from 'vue-qr'

export default {
  components:{
    VueQr
  },
  data(){
    return:{
      // 选中的数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,

      // 打印的内容
      printable:[]
    }  
  }
}

// 多选框事件 选中数据
   handleSelectionChange(selection) {
     this.multipleSelection = selection;
     this.ids = selection.map(item => item.securityId)
     this.single = selection.length!=1
     this.multiple = !selection.length
     // 获取生成之后的二维码Src
     this.printable=selection.map(item => this.$refs['ref'+item.securityId].$el.src)
     console.log(this.printable);
     console.log(this.multipleSelection);
    },

 // 批量打印按钮点击事件
    handlePrinter(){
      printJS({
        // 把勾选的img图片放入下面数组打印
        printable:this.printable,
        // 打印类型
        type:'image',
        // 二维码样式
        imageStyle:'margin:0px; padding:0px; width:40%; height:40%; display: block;         
        margin: 0 auto; padding-top:12%'
      })
    }
</script>

效果图

上面代码省略了大量ElementUI的布局  只留关键代码

大体思路是：

先使用Vue-qr标签生成二维码进行渲染 

在多选方法里面获取选中行的二维码Src

因为批量打印接收的是一个数组 所以需要把选中获取到的Src传到数组里

调用打印方法进行批量打印数组内选中的Src

目前很多打印插件都不能一次批量打印多个  只有print这个库可以  大部分生成二维码工具生成后是canvas  画布是不支持打印的  需要转换成img之后再进行打印