准备工作
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()
}
})
}