关于qrcode:vue使用QRCode一键保存到本地

1.开发环境 vue+QRCode
2.电脑系统 windows10专业版
3.在应用vue开发的过程中,咱们常常会应用到二维码,在这里我抉择的是QRCode,然而咱们可能会遇到须要一键保留到本地,上面我来分享一下如何实现。
4.废话不多说,先上效果图:

当我点击 Save Photo To Share 的时候,咱们就能够把这个二维码保留到本地了(就是下载下来的意思)

5.在template中增加如下代码:

<p ref="qrCodeUrl" class="QrImg" id="qrCode">
<div class="inviteSaveBtn" @click="SaveShare">
 <van-button>Save Photo To Share</van-button>
</div>

6.在methods中增加如下代码:

//留神:只是局部代码
// 保留分享
      SaveShare() {
        console.log("我是保留分享事件");
        let myCanvas = document.getElementById('qrCode').getElementsByTagName('canvas');
        //创立一个a标签节点
        let a = document.createElement("a")
        //设置a标签的href属性（将canvas变成png图片）
        a.href = myCanvas[0].toDataURL('image/png').replace('image/png', 'image/octet-stream')
        //设置下载文件的名字
        a.download = "二维码";
        //点击
        a.click()
      },

//留神:这个 a.download的值能够通过传参的办法;倡议应用参数的模式

7.本期的分享到了这里就完结啦,心愿对你有所帮忙,让咱们一起致力走向巅峰。