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