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、效果图
这两种方法效果一样,点击按钮弹出一个打印弹窗,唯一不同的是调用方法不一样,看个人需求选择使用哪种
ps:功能算是实现了,具体还没连打印机,所以没法测试,有问题后面再补充