vue如何使用qrcodejs2 生成二维码弹出框不加载二维码(已解决)
1.需求我们有一个项目是给某大会签到入场的项目,整体的需求是嘉宾媒体之类的用户线上注册然后生成线下证照,这里就讲一下碰到的几个问题,记录一下~!2.具体过程如下1.安装 qrcodejs2npm installqrcodejs2 --save2.在main.js或者是需要使用的页面引入import QRCode from 'qrcodejs2'3.生成二维码的页面<div id="qrCod
·
1.需求
我们有一个项目是给某大会签到入场的项目,整体的需求是嘉宾媒体之类的用户线上注册然后生成线下证照,这里就讲一下碰到的几个问题,记录一下~!
2.具体过程如下
1.安装 qrcodejs2
npm install qrcodejs2 --save
2.在main.js或者是需要使用的页面引入
import QRCode from 'qrcodejs2'
3.生成二维码的页面
<div id="qrCode" ref="qrCodeDiv"></div>
4.js里的方法
//打印二维码的方法
bindQRCode: function () {
new QRCode(this.$refs.qrCodeDiv, {
text: '扫描二维码之后展示的内容'
width: 100,
height: 100,
colorDark: "#333333", //二维码颜色
colorLight: "#ffffff", //二维码背景色
correctLevel: QRCode.CorrectLevel.L //容错率,L/M/H
})
},
3.打印内容
这里打印的话有好几种方法,我就简单的讲一下这几种打印方法的注意事项。
vue的打印插件
cnpm i vue-print-nb -S
. 在需要打印的位置使用
<div id="dialogContent">
<p style="text-align: center">
{{ form.status === '条件' ? '标题一' : '标题二' }}
</p>
<div class="table-layout">
<!--内容-->
</div>
</div>
4. 打印
<button v-print="'#dialogContent'">打印</button>
这种方法的缺点就是只能打印可见区域,不能分页打印
方法二:print.js
1. 安装依赖
cnpm install vuePlugs_printjs -S
2. 引入
import Print from '@/plugins/print' // 下载到本地地址
Vue.use(Print)
3. 使用
<template>
<div ref="print">
<!--打印内容-->
<div class="no-print">不要打印我</div>
</div>
<a-button @click="prints">打印</a-button>
</template>
<script>
export default {
data () {
return {}
},
methods: {
prints () {
this.$print(this.$refs.print)
}
}
}
</script>
注意:
需使用ref获取dom节点,若直接通过id或class获取则webpack打包部署后打印内容为空
4.总结
这里我就粗略的讲了一下这几种方法是怎么实现的,其实后续还有很多可以拓展的问题需要解决,如果是弹窗打印的话会出现好几个问题,比如说第一次弹出不加载二维码。
let doc_body = document.body.innerHTML,
printPart = document.getElementById("dialogContent").innerHTML;
document.body.innerHTML = printPart;
window.print(); //只能打印当前页面body里面的全部内容,所以打印之前,要替换body里面的内容
document.body.innerHTML = doc_body;
window.location.reload(false); //重新刷新页面的时候会出现首页白屏,用户体验不好
这里虽然解决了第一次弹框没有出现二维码的问题,但是重新刷新页面的时候会出现白屏,用户体验不好,这里有待优化。暂时我也还没排查出问题出现在哪?后续会继续跟进!
如果有什么问题,可以到下方评论区留言。如果各位大神已有解决方法,可以留言告诉我,我也参考参考~。
更多推荐
已为社区贡献4条内容
所有评论(0)