当前位置：首页 > VUE

vue实现打印二维码

2026-01-12 08:43:02VUE

安装依赖

需要安装 qrcode 和 html2canvas 库来生成二维码并转换为可打印的图像。

npm install qrcode html2canvas

生成二维码

使用 qrcode 生成二维码并渲染到页面。

<template>
  <div>
    <canvas id="qrcode-canvas"></canvas>
    <button @click="printQRCode">打印二维码</button>
  </div>
</template>

<script>
import QRCode from 'qrcode';

export default {
  data() {
    return {
      qrData: 'https://example.com', // 二维码内容
    };
  },
  mounted() {
    this.generateQRCode();
  },
  methods: {
    generateQRCode() {
      const canvas = document.getElementById('qrcode-canvas');
      QRCode.toCanvas(canvas, this.qrData, { width: 200 }, (error) => {
        if (error) console.error(error);
      });
    },
  },
};
</script>

打印二维码

使用 html2canvas 将二维码转换为图像并调用浏览器打印功能。

<script>
import html2canvas from 'html2canvas';

export default {
  methods: {
    printQRCode() {
      const canvas = document.getElementById('qrcode-canvas');
      html2canvas(canvas).then((printCanvas) => {
        const printWindow = window.open('', '_blank');
        printWindow.document.write('<img src="' + printCanvas.toDataURL() + '"/>');
        printWindow.document.close();
        printWindow.onload = () => printWindow.print();
      });
    },
  },
};
</script>

优化打印样式

可以调整打印页面的样式，确保二维码居中且无额外边距。

<script>
methods: {
  printQRCode() {
    const canvas = document.getElementById('qrcode-canvas');
    html2canvas(canvas).then((printCanvas) => {
      const printWindow = window.open('', '_blank');
      printWindow.document.write(`
        <style>
          body { margin: 0; display: flex; justify-content: center; align-items: center; height: 100vh; }
          img { max-width: 100%; max-height: 100%; }
        </style>
        <img src="${printCanvas.toDataURL()}"/>
      `);
      printWindow.document.close();
      printWindow.onload = () => printWindow.print();
    });
  },
},
</script>

支持多二维码打印

若需批量打印多个二维码，可以通过循环生成并拼接图像。

<template>
  <div>
    <div v-for="(item, index) in qrList" :key="index">
      <canvas :id="'qrcode-canvas-' + index"></canvas>
    </div>
    <button @click="printAllQRCode">打印全部</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      qrList: ['https://example.com/1', 'https://example.com/2'],
    };
  },
  mounted() {
    this.qrList.forEach((data, index) => {
      const canvas = document.getElementById(`qrcode-canvas-${index}`);
      QRCode.toCanvas(canvas, data, { width: 200 });
    });
  },
  methods: {
    printAllQRCode() {
      const promises = this.qrList.map((_, index) => {
        const canvas = document.getElementById(`qrcode-canvas-${index}`);
        return html2canvas(canvas);
      });

      Promise.all(promises).then((canvases) => {
        const printWindow = window.open('', '_blank');
        let html = '<style>body { margin: 0; } img { margin: 10px; }</style>';
        canvases.forEach(canvas => {
          html += `<img src="${canvas.toDataURL()}"/>`;
        });
        printWindow.document.write(html);
        printWindow.document.close();
        printWindow.onload = () => printWindow.print();
      });
    },
  },
};
</script>

vue实现打印二维码