vue前端生成二维码并提供二维码下载

在一个管理后台的开发过程中使用到了需要前端自行生成分享二维码，并提供二维码下载功能，网上的解决方案很多，最终自己做完的思路和代码整理记录方便后续学习使用！
vue版本为2.x
具体实现步骤：

下载安装依赖（下载安装命令）： npm install qrcanvas
因为我只在一个页面用到了，所以只在使用页面导入 qrcanvas：import { qrcanvas } from ‘qrcanvas’
html部分的代码

<div id="shareQrcode" ref="shareQrcode" class="share-qrcode" style="width:256px;margin:0 auto;" ></div>

具体的案例中二维码是一个弹出框，全局代码如下（案例使用的前端框架是Element ui）：

<el-dialog:visible.sync="qrcodeDialogVisible"title="二维码"width="30%"center><div id="shareQrcode" ref="shareQrcode" class="share-qrcode" style="width:256px;margin:0 auto;" /><span slot="footer" class="dialog-footer"><el-button @click="qrcodeDialogVisible = false">关 闭</el-button><el-button type="primary" @click="downLoadQrcode">下载二维码</el-button></span></el-dialog>

export default 代码如下：

export default {name: 'ComponentsName',components: {},data() {return {qrcode: '',qrcodeDialogVisible: false, // 分享二维码弹窗}},computed: {},created() {},methods: {// 点击下载按钮下载二维码图片downLoadQrcode() {let imgSrc, canvasif (document.getElementById('shareQrcode').childNodes[0]) {canvas = document.getElementById('shareQrcode').childNodes[0]imgSrc = this.CanvasToImage(canvas).getAttribute('src')const alink = document.createElement('a')alink.href = imgSrcalink.download = 'shareQrcode.png'alink.click()}},// canvas 转换成图片, 从canvas中提取图片imageCanvasToImage(canvas) {// 新Image对象，可以理解为DOMvar image = new Image()// canvas.toDataURL 返回的是一串Base64编码的URL，当然,浏览器自己肯定支持// 指定格式PNGimage.src = canvas.toDataURL('image/png')return image},// 分享二维码弹窗popQrcode() {this.qrcodeDialogVisible = trueconst colorFore = '#4169E1'const colorOut = '#CD5C5C'const colorIn = '#191970'this.qrcode = ''this.$nextTick(() => {this.qrcode = qrcanvas({cellSize: 8,data: location.href,effect: { round: 0.4 },correctLevel: 'M',foreground: [// 前景色{ style: colorFore },// 外方块位置{ row: 0, rows: 7, col: 0, cols: 7, style: colorOut },{ row: -7, rows: 7, col: 0, cols: 7, style: colorOut },{ row: 0, rows: 7, col: -7, cols: 7, style: colorOut },// 内方块位置{ row: 2, rows: 3, col: 2, cols: 3, style: colorIn },{ row: -5, rows: 3, col: 2, cols: 3, style: colorIn },{ row: 2, rows: 3, col: -5, cols: 3, style: colorIn }],background: '#f5f5f5',padding: 12})// 判断是否有子节点，如果已经有则删除原有的，然后再新增子节点if (document.getElementById('shareQrcode').childNodes[0]) {this.$refs.shareQrcode.removeChild(document.getElementById('shareQrcode').childNodes[0])}this.$refs.shareQrcode.appendChild(this.qrcode)})}}
}