vue通过后端给的id生成二维码（生成二维码弹出框不加载二维码）

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); //重新刷新页面的时候会出现首页白屏，用户体验不好

这里虽然解决了第一次弹框没有出现二维码的问题，但是重新刷新页面的时候会出现白屏，用户体验不好，这里有待优化。暂时我也还没排查出问题出现在哪？后续会继续跟进！

如果有什么问题，可以到下方评论区留言。如果各位大神已有解决方法，可以留言告诉我，我也参考参考~。

,