vue如何使用qrcodejs2 生成二维码弹出框不加载二维码(已解决)

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

这里虽然解决了第一次弹框没有出现二维码的问题，但是重新刷新页面的时候会出现白屏，用户体验不好，这里有待优化。暂时我也还没排查出问题出现在哪？后续会继续跟进！
如果有什么问题，可以到下方评论区留言。如果各位大神已有解决方法，可以留言告诉我，我也参考参考~。