在 Vue 2 中实现 “点击下载条码 → 打开新窗口预览 → 自动唤起浏览器打印” 的功能

小夏同学呀2025-11-26 21:15
在 Vue 2 中实现 "点击下载条码 → 打开新窗口预览 → 自动唤起浏览器打印" 的功能

实现效果
javascript 复制代码
  1.模版中编写按钮绑定事件
   <!-- 操作列（下载按钮） -->
        <el-table-column label="操作" align="center" width="200">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-printer"
              @click="handlePrint(scope.row.barcodeUrl)"
            >
              打印
            </el-button>
          </template>
        </el-table-column>  


2.在script中编写逻辑
//打印操作 barcodeDownloadUrl是图片地址
    handlePrint(barcodeDownloadUrl) {
      if (barcodeDownloadUrl) {
        this.handlePrintQrCode(barcodeDownloadUrl);
      } else {
        this.$message.error("暂没有生成条形码");
      }
    },

    handlePrintQrCode(qrImageUrl) {
      try {
        const printWindow = window.open("", "_blank");
        if (!printWindow) {
          this.$message.error("浏览器阻止了弹出窗口，请允许弹出后重试");
          return;
        }

        const printContent = `
          <!DOCTYPE html>
          <html lang="zh-CN">
          <head>
            <meta charset="UTF-8">
            <title>二维码打印页</title>
            <style>
              * { margin: 0; padding: 0; box-sizing: border-box; }
              body {
                width: 100vw;
                height: 100vh;
                display: flex;
                justify-content: center;
                align-items: center;
                background: #fff;
                padding: 0;
                margin: 0;
              }
                @page {
                                margin: 0 !important;
                                size: 80mm 40mm;
                            }
                            
                            body, html {
                                margin: 0 !important;
                                padding: 0 !important;
                                width: 80mm !important;
                                height: 40mm !important;
                                overflow: hidden !important;
                                transform: translateY(0mm);
                            }
                            
                            @page {
                                margin: 0 !important;
                                -webkit-print-color-adjust: exact;
                            }
                            
                            body {
                                -webkit-print-color-adjust: exact;
                            }
              .print-qr-wrapper {
                width: ${80}mm;
                height: ${40}mm;
                border: 1px solid #eee;
                display: flex;
                justify-content: center;
                align-items:center;
                margin: 0 !important;
                padding: 0 !important;
              }
              .print-qr-img {
                width: 100%;
                height: 100%;
                object-fit: contain;
              }
            </style>
          </head>
          <body>
            <div class="print-qr-wrapper">
              <img 
                class="print-qr-img" 
                src="${qrImageUrl}" 
                alt="二维码"
                onload="window.focus()"
              >
            </div>
          </body>
          </html>
        `;

        printWindow.document.write(printContent);
        printWindow.document.close();

        printWindow.onafterprint = () => {
          printWindow.close();
        };

        setTimeout(() => {
          printWindow.print();
        }, 300);
      } catch (error) {
        this.$message.error("打印功能异常，请刷新页面重试");
      }
    },