vue3生成二维码使用lodop打印

Question

1、vue3使用lodop打印无法显示二维码图片。如下图年所示：

2、代码

<template>
  <a-modal centered :width="800" :visible="visible" @ok="handleOk()" @cancel="handleCancel" cancelText="关闭">
    <div style="text-align: left">
    </div>
    <div>
      <a-tabs>
        <a-tab-pane tab="二维码生成" key="createQDcode">
<!--          创建一个输入框，只能输入数字-->
          <label>每行数量：</label>
          <a-input-number v-model:value="num" :min="1" :max="100" style="margin-top: 10px; margin-bottom: 10px" />
          <a-row id="printContent">
<!--            根据输入的数量，每行生成几个-->
            <a-col :span="24 / num" style="margin-top: 30px; text-align: center" v-for="(item, index) in resultList" :key="index">
              <a-image><QrCode :value="item.isbn" :width="100" class="enter-x justify-center xl:justify-start" /></a-image><br />
<!--              单号和名称宽度要与二维码宽度一致-->
              <label>单号：</label>
              <span>{{item.isbn}}</span>
              <br>
              <label>名称：</label>
              <span>{{item.title}}</span>
<!--              <a-input style="width: 100px; font-size: 9px; color: #000000" :bordered="false" :value="item.isbn" /><br />-->
<!--              <a-input style="width: 100px; font-size: 9px; color: #000000" :bordered="false" :value="item.title" />-->
            </a-col>
            <div v-if="index == '8'" style="page-break-after: always"></div>
          </a-row>
        </a-tab-pane>

        <a-tab-pane tab="条形码生成" key="createJsBarcode">
          <a-row>
            <a-col :span="12" style="margin-top: 30px; text-align: center" v-for="(item, index) in resultList" :key="index">
              <a-image><LimsJsBarcode :value="item.isbn" :width="1.5" class="enter-x justify-center xl:justify-start" /></a-image><br />
              <label>单号：</label>
              <a-input style="width: auto; font-size: 9px; color: #000000" :bordered="false" :value="item.isbn" /><br />
              <label>名称：</label>
              <a-input style="width: auto; font-size: 9px; color: #000000" :bordered="false" :value="item.title" />
            </a-col>
            <div v-if="index == '8'" style="page-break-after: always"></div>
          </a-row>
        </a-tab-pane>
      </a-tabs>

    </div>
  </a-modal>
</template>

<script lang="ts" setup>
  import ACol from 'ant-design-vue/es/grid/Col';
  import { ref, nextTick, defineExpose, render, reactive } from 'vue';
  import QrcodeVue from 'qrcode.vue';
  import { QrCode } from '/@/components/Qrcode/index';
  import { printJS } from '/@/hooks/web/usePrintJS';
  import LimsJsBarcode from './LimsJsBarcode.vue';
  import { getLodop } from '/@/utils/Lodop/LodopFuncs';
  const title = ref<string>('');
  const width = ref<number>(800);
  const visible = ref<boolean>(false);
  const disableSubmit = ref<boolean>(false);
  const registerForm = ref();
  const num = ref<number>(1);
  const emit = defineEmits(['register', 'success']);
  

  const resultList = [];
  function bindQRCode(ids) {
    visible.value = true;
    ids.forEach((item) => {
      let result = {
        isbn: item.isbn,
        title: item.title,
      };
      resultList.push(result);
      console.log(result);
    });
    console.log(resultList);
  }

  /**
   * 确定按钮点击事件
   */
  function handleOk() {
    //获取getLodop对象
    let LODOP = getLodop();
    LODOP.PRINT_INIT("打印二维码");
    //设置纸张大小
    LODOP.SET_PRINT_PAGESIZE(1, 0, 0, "A4");
    //设置打印方向
    LODOP.SET_PRINT_PAGESIZE(1, 0, 0, "A4");
    LODOP.ADD_PRINT_HTM(0, 0, "100%", "100%", document.getElementById("printContent").innerHTML);
    console.log(document.getElementById("printContent").innerHTML)
    //打印
    LODOP.PRINT_DESIGN();
  }

  /**
   * form保存回调事件
   */
  function submitCallback() {
    handleCancel();
    emit('success');
  }

  /**
   * 取消按钮回调事件
   */
  function handleCancel() {
    visible.value = false;
    resultList.length = 0;
  }

  defineExpose({
    bindQRCode,
    add,
  });
</script>

<style>
  @media print {
    @page {
      size: auto;
    }

    body, html {
      height: auto !important;
    }
  }
</style>

3、我输出的 LODOP.ADD_PRINT_HTM内容

<!--            根据输入的数量，每行生成几个-->
<div class="ant-col ant-col-24" style="margin-top: 30px; text-align: center;">
<a-image><div class="enter-x justify-center xl:justify-start"><canvas height="100" width="100" style="height: 100px; width: 100px;"></canvas></div></a-image><br>
<!--              单号和名称宽度要与二维码宽度一致-->
<label>单号：</label><span>IS2023062702</span><br>
<label>名称：</label><span>载玻片</span>
<!--              <a-input style="width: 100px; font-size: 9px; color: #000000" :bordered="false" :value="item.isbn" /><br />-->
<!--              <a-input style="width: 100px; font-size: 9px; color: #000000" :bordered="false" :value="item.title" />-->
</div><div class="ant-col ant-col-24" style="margin-top: 30px; text-align: center;">
<a-image><div class="enter-x justify-center xl:justify-start"><canvas height="100" width="100" style="height: 100px; width: 100px;"></canvas></div></a-image><br>
<!--              单号和名称宽度要与二维码宽度一致-->
<label>单号：</label><span>IS2023062701</span><br>
<label>名称：</label><span>载玻片</span>
<!--              <a-input style="width: 100px; font-size: 9px; color: #000000" :bordered="false" :value="item.isbn" /><br />-->
<!--              <a-input style="width: 100px; font-size: 9px; color: #000000" :bordered="false" :value="item.title" />-->
</div><!--v-if-->

4、我觉得是里面的出了问题，但是不知道该怎么解决

Answer 1

可参考这个文章 https://blog.csdn.net/violetjack0808/article/details/79354223