qrcode批量打印，分页可选择打印项

image.png
image.png image.png

html部分

<el-dialog :title="previewForm.title" v-model="previewForm.visible" width="680px" :destroy-on-close="true">
      <div class="patient-container-box">
        <div class="patient-container" :id="'printDiv' + index" v-for="(item, index) in printPatientList">
          <div class="check-box" @click="handlePrintPatient(item)" v-if="!isPrint">
            <img class="check-select" v-show="item.checked" src="https://cdn.xun-qi.cn/seer/upload/upload/img/base/media/Group 3055@2x_1701334097260.png"/>
            <img class="check-select" v-show="!item.checked" src="https://cdn.xun-qi.cn/seer/upload/upload/img/base/media/Rectangle 8209@2x_1701334097259.png"/>
          </div>
          <div class="bottom-content">
            <div class="qrcode" :ref="item.id + 'qrcode'"></div>
            <img class="qrcodeImg" :id="item.id + 'qrCodeImg'" height="161" width="161"/>
            <div class="basic-info">
              <span class="name">{{ $tools.nameDesensitize(item.name) }}</span>
              <span class="sex">{{ item.sex }}</span>
              <span class="age" v-if="item.age">{{ item.age }}岁</span>
            </div>
            <div class="idcard" v-if="item.idcard">身份证：{{ $tools.idCardDesensitizePatient(item.idcard) }}</div>

            <div class="remark" v-if="printPatientRemark">患者备注：{{ printPatientRemark }}</div>
          </div>
        </div>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="previewForm.visible = false">关闭</el-button>
          <el-button type="primary" @click="totalPrint">打印</el-button>
        </div>
      </template>
    </el-dialog>

js具体打印实现

    totalPrint(flag) {
      const data =  this.autoPrintPatientList
      if (data.length === 0) return this.$message.error('请选择要打印的患者！')
      this.isPrint = true

      const styleSheet = `<style>
        body{
          margin: 0;
          padding: 0;
        }
      .patient-container {
        background: url('https://cdn.xun-qi.cn/seer/upload/upload/img/base/media/Group 4771@2x_1704180130683.png') no-repeat;
        width: 10cm;
        height: 18cm;
        background-size: 100% 100%;
        margin:auto auto;
        padding: 8px;
        box-sizing: border-box;
        page-break-after: always;


        .check-box {
          margin-bottom: 24px;

          .check-select {
            width: 14px;
            height: auto;
          }
        }

        .bottom-content {
           margin-top: 85px;
           text-align: center;

          .qrcode {
            width: 160px;
            height: 160px;
            margin: 12px auto;
            display: none;
          }

           .qrcodeImg{
              width: 161px;
              display: inline-block;
              height: 161px;
              margin: 0 auto 34px;
            }

          .basic-info {
            text-align: center;
            font-size: 16px;
            font-weight: 400;
            color: #000000;
            line-height: 25px;
            margin: 0 4px;

            .sex {
              margin: 0 8px;
            }
          }


          .idcard {
            font-size: 14px;
            color: #000;
            margin-bottom: 24px;
            line-height: 22px;
          }

          .remark {
            font-size: 12px;
            font-weight: 400;
            color: #2E3131;
            line-height: 19px;

          }
        }
      }
    </style>`

      this.$nextTick(() => {


        //打印
        let newWin = window.open('') //新打开一个空窗口
        newWin.document.write('<style media="print">@page {size: auto; margin: 0;}</style>'); //解决出现页眉页脚和路径的问题

        data.map((item, i) => {

          //处理qrcode生成的二维码无法打印的问题
          let qrcodeEl = this.$refs[item.id + 'qrcode'][0]
          let canvasUrl = qrcodeEl.getElementsByTagName('canvas')[0].toDataURL('image/jpg')
          let qrCodeImgEl = document.getElementById([item.id + 'qrCodeImg'])
          qrCodeImgEl.setAttribute('src', canvasUrl)
          qrcodeEl.innerHTML = ''

          let imageToPrint = document.getElementById('printDiv' + i) //获取需要打印的内容
          newWin.document.write(imageToPrint.outerHTML) //将需要打印的内容添加进新的窗口
        })

        this.previewForm.visible = false

        newWin.document.head.innerHTML = styleSheet //给打印的内容加上样式
        newWin.document.close() //在IE浏览器中使用必须添加这一句
        newWin.focus() //在IE浏览器中使用必须添加这一句

        setTimeout(() => {
          newWin.print() //打开打印窗口
          newWin.close() //关闭打印窗口

        }, 500)

      })
    },

qrcode生成二维码部分

handlePreview() {
      this.printForm.visible = false
      this.previewForm.visible = true
      this.$nextTick(() => {
        if (this.printPatientList.length > 0) {
          this.printPatientList.forEach(item => {
            item.checked = true
            this.generateQrcode(this.$refs[item.id + 'qrcode'][0], item.id)
          })

          this.autoPrintPatientList = this.printPatientList
        }
      })

    },

    generateQrcode(tg, id) {
      if (tg) tg.innerHTML = ''
      //todo url待修改
      const url = `${id}`
      this.$qrcode({
        target: tg,
        width: 78,
        height: 78,
        text: url,
      })
    },