生成带文字的二维码并下载(qrcode.vue + html2canvas)

准备工作

npm install qrcode.vue             npm install html2canvas

html

<div id="imgDiv">
    <qrcode-vue :size="220" :value="codeValue"></qrcode-vue>
    <p>项目名称：{{qrCodeList.name}}</p>
    <p>最新固件版本：{{dfuData.version}}</p>
    <p>固件下载地址：{{dfuData.filePath}}</p>
</div>
<div class="just-end">
    <el-button @click="save" type="primary">下载</el-button>
</div>

ts

const save = () => {
  let dom:any = document.querySelector("#imgDiv")
  html2canvas(dom).then(canvas => {
    let dataURL = canvas.toDataURL("image/png");
    if (dataURL !== "") {
      let a = document.createElement('a')
      a.download = "项目二维码";
      a.href = dataURL;
      a.click()
    }
  })
}