vue2 使用vue-qr生成二维码并打印二维码

在Vue 2项目中使用vue-qr生成二维码并打印，你需要先安装vue-qr：

npm install vue-qr --save

然后在你的组件中引入并使用vue-qr：

<template>
  <div>
    <vue-qr :value="qrValue" :size="200"></vue-qr>
    <button @click="printQRCode">打印二维码</button>
  </div>
</template>
 
<script>
import VueQr from 'vue-qr'
 
export default {
  components: {
    VueQr
  },
  data() {
    return {
      qrValue: 'https://example.com'
    }
  },
  methods: {
    printQRCode() {
      const printWindow = window.open('', '_blank');
      const qrImg = this.$el.querySelector('img').cloneNode(true);
      const style = document.createElement('style');
      style.textContent = 'img { margin: auto; display: block; }';
 
      printWindow.document.head.appendChild(style);
      printWindow.document.body.appendChild(qrImg);
      printWindow.document.close();
      printWindow.focus();
 
      printWindow.print();
      printWindow.close();
    }
  }
}
</script>

这段代码中，我们首先在模板中添加了一个vue-qr组件来显示二维码，并添加了一个按钮用于触发打印功能。在printQRCode方法中，我们打开一个新窗口，克隆二维码图片，添加样式，并调用print方法来打印。最后关闭窗口。