这是我参与8月更文挑战的第11天，活动详情查看：8月更文挑战
一、功能概述
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 前端打印功能实现了，但是很遗憾，不满足我们要求，不过把这个过程记录下来，以备后续使用。关于后面如何用后台打印这个信息，后面等我实验出来了，再发文记录。
参考文档：
