1.需求我们有一个项目是给某大会签到入场的项目，整体的需求是嘉宾媒体之类的用户线上注册然后生成线下证照，这里就讲一下碰到的几个问题，记录一下~，下面我们就来聊聊关于vue通过后端给的id生成二维码?接下来我们就一起去了解一下吧!
vue通过后端给的id生成二维码
1.需求
我们有一个项目是给某大会签到入场的项目，整体的需求是嘉宾媒体之类的用户线上注册然后生成线下证照，这里就讲一下碰到的几个问题，记录一下~！
2.具体过程如下
1.安装 qrcodejs2
npm install qrcodejs2 --save
2.在main.js或者是需要使用的页面引入
import QRCode from 'qrcodejs2'
3.生成二维码的页面
//打印二维码的方法
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); //重新刷新页面的时候会出现首页白屏，用户体验不好
这里虽然解决了第一次弹框没有出现二维码的问题，但是重新刷新页面的时候会出现白屏，用户体验不好，这里有待优化。暂时我也还没排查出问题出现在哪？后续会继续跟进！
如果有什么问题，可以到下方评论区留言。如果各位大神已有解决方法，可以留言告诉我，我也参考参考~。
,
