前端打印二维码

1、安装生成二维码的插件 vue-qr

yarn add vue-qr
// or
npm install vue-qr --save

2、安装用于将html代码生成图片的插件 html2canvas

yarn add html2canvas
// or
npm install html2canvas --save

3、安装用于打印js库 print-js

yarn add print-js
// or
npm install print-js --save

HTML

拉起的弹窗

 <el-dialog
      class="pageDialog"
      title="商户码"
      :visible.sync="tenantCodeShow"
      width="608px"
      :close-on-click-modal="false"
      @close="onCancelCode"
    >
      <div class="img_view" ref="imgView">
        <div class="img_code">
          <!-- 二维码 -->
          <vue-qr
            :correctLevel="3"
            :dotScale="1"
            :margin="0"
            colorDark="#0794EE"
            :size="190"
            :binarizeThreshold="254"
            :logoScale="0.3"
            :logoCornerRadius="40"
            :text="codeValue"
            :logoSrc="bg.src"
          />
        </div>
      </div>

      <template #footer>
        <div class="dialogFooter">
          <div class="cancel" @click="onCancelCode">取消</div>
          <div class="submit" @click="onSubmitCode">打印</div>
        </div>
      </template>
    </el-dialog>

页面引入

import M2canvas from "html2canvas";//这是js方法
import vueQr from "vue-qr";//这是二维码
import printJs from "print-js";

打印功能JS

  onSubmitCode() {
      let imgTag = this.$refs["imgView"],
      // 生成canvas前的参数配置，详细配置信息请参考官方文档
        params = {
          dpi: window.devicePixelRatio * 2 /* DPI 清晰度 */,
          scale: 2 /* 放大倍数 */,
          // with: 700,
          // height:67,
          useCORS: true,
        };
      // 生成canvas图片文件流信息
      M2canvas(imgTag, params).then((canvas) => {
        // 生成用于展示的数据地址
        printJs({
          printable: canvas.toDataURL(),
          type: "image",
          // header: `<h1 style="font-size: 22px; text-align: center; color: #333;">${this.tInfo.name}</h1>`,
          documentTitle: this.tInfo.name, // 打印文档的标题this.tInfo.name-自定义标题
        });
      });
      this.tenantCodeShow = false;
    },

css

 .img_view {
    width: 100%;
    height: 730px;
    background: url("~@/assets/images/merchantCode.png") no-repeat center;
    background-size: cover;
    border-radius: 10px;
    text-align: center;
    position: relative;
    // 设置二维码图片的位置、大小和样式
    .img_code {
      background: #fff;
      border-radius: 16px;
      position: absolute;
      top: 66.5%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    .img_modal {
      text-align: center;
    }
  }