vue 生成二维码预览并打印

你可以使用第三方库 `vue-qrcode` 生成二维码，然后使用 `html2canvas` 将二维码和其他需要打印的内容转换为图片，再使用 `print-js` 进行打印。

首先，安装 `vue-qrcode`、`html2canvas` 和 `print-js`：

npm install vue-qrcode html2canvas print-js --save

然后，在 Vue 组件中使用 `vue-qrcode` 生成二维码：

<template>
  <div>
    <qrcode :value="qrValue" :size="qrSize" />
    <button @click="print">打印</button>
  </div>
</template>

<script>
import Qrcode from 'vue-qrcode'

export default {
  components: {
    Qrcode
  },
  data () {
    return {
      qrValue: 'https://example.com',
      qrSize: 200
    }
  },
  methods: {
    async print () {
      const canvas = await this.$refs.qrcode.toCanvas()
      const content = document.getElementById('print-content')
      html2canvas(content, {
        useCORS: true,
        allowTaint: true,
        logging: true
      }).then(canvas => {
        const dataUrl = canvas.toDataURL('image/png')
        printJS({
          printable: dataUrl,
          type: 'image',
          documentTitle: '二维码',
          maxWidth: 800,
          targetStyles: ['*']
        })
      })
    }
  }
}
</script>

<style>
@media print {
  #print-content {
    display: block;
  }
  button {
    display: none;
  }
}
</style>

在 `print` 方法中，首先将 `vue-qrcode` 生成的 Canvas 转换为图片，然后使用 `html2canvas` 将需要打印的内容转换为图片。`html2canvas` 需要设置 `useCORS` 和 `allowTaint` 为 `true`，以允许跨域访问和允许转换包含跨域图片的内容。最后，使用 `print-js` 进行打印，将转换后的图片作为 `printable` 属性传递进去。

注意，在样式中，我们使用 `@media print` 来隐藏按钮，在打印时只显示打印内容。我们还需要给需要打印的内容添加一个 ID，以便在 `html2canvas` 中引用：

<div id="print-content">
  <h1>二维码预览</h1>
  <qrcode ref="qrcode" :value="qrValue" :size="qrSize" />
</div>