Vue 批量打印二维码图片的初步实践一、功能概述 1.1 需求 接着之前生成的二维码，我们需要对它进行前端打印。下面是我

一、功能概述

1.1 需求

接着之前生成的二维码，我们需要对它进行前端打印。下面是我的尝试过程。

要求能够批量打印和单独打印二维码的图片信息。然后每页只能打印一张纸。

1.2 页面效果图

二、功能实现

Vue 实现打印的方法常见有两种：

• 引用vue-print-nb 插件

• 下载print.js到本地文件：

  • 1、下载地址：github.com/xyl66/vuePl…

  • 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)
      }
    }
    

我在尝试了之后选择了 vue-print-nb 的方法。

2.1 Vue-print-nb 使用介绍

1、安装

npm i vue-print-nb -S

2、全局注册：

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

3、使用说明：

二维码的信息就是一个url 链接，如果直接点击批量打印，那它打印的内容必须要是本页页面上所显示的，如果你把 list 列表找出来之后，必须要将它加载呈现到页面上，前端才可以预览打印。所以我们这边需要将它跳转页面，将要打印的内容显示出来。

4、查询并跳转

    <giant-print-page @editShow="printBatch(scope.row)">批量打印</giant-print-page>
    
    //批量打印
    printBatch(row){
      this.$router.push({path:'/am/device/print',query: {id:row.id}})
    },

在 print.vue 页面将要打印的内容显示出来

 <div>
  <button v-print="'#printTest'">立刻打印</button>
  <button @click="backlist">返回列表</button>
  <h2> 当前二维码数量为：{{this.$data.deviceInfoList.length}}</h2>
  
    <div id="printTest" >
      <div  v-for="(item,index) in this.$data.deviceInfoList">
        <div>
          <h2>设备编号SN：{{item.sn}}</h2>
          <img :src="item.url" style="width:260px;height:260px;" />
        </div>
      </div>
    </div>
​
</div>
 
 
 mounted() {
    this.init()
  },
  methods:{
    init(){
      if(this.$route.query.id!=null){
        this.printBatch(this.$route.query.id)
      }
    }
     //批量打印
    printBatch(id){
      this.$data.DeviceInfoDTO={id:id}
      let device=this.$data.DeviceInfoDTO
      this.$api.req("/am/device/info/list",device,res=>{
        this.$data.deviceInfoList=res.data
        this.$data.dialogVisible=true
      },res=>{
        this.$message.error(res.msg)
      })
    },
    }
    

此时进入的页面是这样的

然后点击立刻打印，页面呈现效果：

2.2 分页

这个打印效果并没有达到需求中的一页展示一个二维码的目的。

搜索了一番后，发现在css 上加上标签 page-break-after:always 即可。通过#引用id

<div>
  <button v-print="'#printTest'">立刻打印</button>
  <button @click="backlist">返回列表</button>
  
  <h2> 当前二维码数量为：{{this.$data.deviceInfoList.length}}</h2>
    <div id="printTest" >
      <div  v-for="(item,index) in this.$data.deviceInfoList">
        <div style="page-break-after:always">
          <h2>设备编号SN：{{item.sn}}</h2>
          <img :src="item.url" style="width:260px;height:260px;" />
        </div>
      </div>
    </div>
</div>

三、小结

总体而言，vue-print-nb 插件的使用是比较简单的，不过这里只是使用到批量打印二维码的这个功能，所以对这个插件也只是入门级使用，更多细节可以查看这个官方文档的api。

不过，在经过测试之后，如果你需要预览的页面非常多的话，比如我这边需要一下子打印几十万个二维码信息，那么前端页面是不可能渲染出来的。

在经过测试，522 张二维码需要10秒左右预览，因此，需要把打印二维码的信息放在后台来进行，所以，虽然这个 Vue 前端打印功能实现了，但是很遗憾，不满足我们要求，不过把这个过程记录下来，以备后续使用。关于后面如何用后台打印这个信息，后面等我实验出来了，再发文记录。

参考文档：

• www.npmjs.com/package/vue…