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

灰太狼大王灬

已于 2023-08-08 17:46:02 修改

阅读量460

点赞数

文章标签： vue.js javascript

于 2023-04-29 18:40:07 首次发布

本文链接：https://blog.csdn.net/regretTAT/article/details/130441886

版权

生成二维码

1.  yarn add qrcodejs2   安装插件
2. import QRCode from "qrcodejs2";  引入依赖 
			components: {
 			   QRCode  //注册组件
 			 },
3. 通过事件调用方法
 document.getElementById("qrcode").innerHTML = "";//页面二维码的容器
      let qrcode = new QRCode("qrcode", {  //qrcode容器ID
        width: 100, // 二维码宽度，单位像素
        height: 100, // 二维码高度，单位像素
        text: "www.baidu.com" // 生成二维码的链接
 });

下载二维码

 在以上生成二维码的基础上
 	ref值qrcode为绑定到二维码上
  var canvasData = this.$refs.qrcode.getElementsByTagName("canvas");//获取并转换
      var a = document.createElement("a");
      var event = new MouseEvent("click"); // 创建一个单击事件
      a.href = canvasData[0].toDataURL("image/png");
      a.download = "drcQrcode";名称
      a.dispatchEvent(event); // 触发a的单击事件