【vue+qrcode+html2canvas】前端二维码生成+下载

Q:实现根据地址生成二维码并将图片下载：

下载qrcode

npm install qrcode

组件引入

import QRCode from 'qrcode'

相关函数调用 

   <div class="testclass" ref="test" id="test"></div>

※ 注意每次生成新的以前需要清空上次的二维码内容 

 document.getElementById("test").innerHTML = ''

        var qrcode = new QRCode(this.$refs.test, {
            text: "https://xxxx.com",
            width: 200,//二维码宽度
            height: 200,//二维码高度
            colorDark: "#000000",//前景色
            colorLight: "#ffffff",//背景色
            correctLevel: QRCode.CorrectLevel.H//二维码 容错级别
            
        });

下载html2canvas

npm install --save html2canvas

组件引入

import html2canvas from "html2canvas"

相关函数调用

<div class="test2class" ref="test2" id="test2">

 ※注意： html2canvas是相当于截屏，所以当div设为hidden的时候下载下来的图片的空白或者图裂的情况

        html2canvas(document.getElementById('test2')).then(canvas => {
          let dataURL = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
          
           var saveLink = document.createElement('a');//临时创建二维码
            saveLink.href = dataURL;//二维码下载路径
            saveLink.download = "二维码下载.png"//二维码名。传进来的
            saveLink.click();//模拟点击 执行下载
        });

相关资料来源：

QRCode+html2canvas

Vue使用QRCode.js生成二维码

Vue使用html2canvas将页面转化为图片