展示二维码及下载为pdf文件

<el-table-column property="QRcode" label="二维码" show-overflow-tooltip class="code-row">
                  <template #default="scope">
                    <el-tooltip placement="bottom" effect="light" class="code-big-img-box">
                      <template #content>
                        <div class="code-tip-box">
                          <div class="code-top" :id="`code-top-${scope.row.id}`">
                            <div>
                              <!-- <img src="@/assets/img/productionLineSettings/QRcode-big.png" alt=""> -->
                              <!-- <img :src="scope.row.qrCode" alt=""> -->
                              <vue-qr :text="scope.row.qrCode" :size="116" :margin="0" ref="qrRef" :id="`QRcode-${scope.row.id}`" />
                            </div>
                            <div class="code-big-text m16">{{ scope.row.name }}</div>
                          </div>
                          <div class="code-big-text mouseStyle" @click="downLoadQR( scope.row)">下载二维码</div>
                        </div>
                      </template>
                      <span><img src="@/assets/img/productionLineSettings/QRcode.png" alt="" class="code-big-img"></span>
                    </el-tooltip>
                  </template>
                </el-table-column>

<script>
import vueQr from 'vue-qr/src/packages/vue-qr.vue'
import html2canvas from 'html2canvas';
import jsPDF from "jspdf"
// 下载二维码
const qrRef = ref(null)
const downLoadQR =async (val)=>{
  // const canvas = await  html2canvas(document.getElementById(`QRcode-${val.id}`))
  const canvas = await html2canvas(document.getElementById(`code-top-${val.id}`))
  const pdf = new jsPDF()
  pdf.addImage(canvas.toDataURL(), 'JPEG', 0, 0)
  const a = document.createElement('a')
  a.href = URL.createObjectURL(pdf.output('blob')) 
  a.download = `单元${val.name}.pdf`
  a.click()
    // a.remove() 
}

</script>