vue使用html2canvas生成图片并保存到本地
1、添加html2canvas插件
2、在script下引用插件
import html2canvas from 'html2canvas';
3、使用方法调用
<!--二维码HTML--> <el-dialog title="二维码" :visible.sync="qrCodeDialogVisible" width="340px"> <div slot="footer" class="dialog-footer"> <div id="qrCode" ref="qrCodeDiv"></div> <el-button type="warning" @click="saveQrCode">保存二维码</el-button> </div> </el-dialog> <!--方法--> // 保存二维码为图片 saveQrCode () { html2canvas(this.$refs.qrCodeDiv).then(canvas => { const link = document.createElement('a') link.href = canvas.toDataURL() link.setAttribute('download', this.qrCodeTitle + '.png') link.style.display = 'none' document.body.appendChild(link) link.click() }) }
参考:https://www.cnblogs.com/shcs/p/11960593.html