vue-生成二维码+下载二维码

最新推荐文章于 2024-09-03 08:34:52 发布

GG·bond

最新推荐文章于 2024-09-03 08:34:52 发布

阅读量1.3k

点赞数 1

分类专栏： vue实际运用前端常用方法文章标签： vue生成/下载二维码

本文链接：https://blog.csdn.net/GTbond/article/details/123350716

版权

vue实际运用同时被 2 个专栏收录

14 篇文章 7 订阅

订阅专栏

前端常用方法

14 篇文章 0 订阅

订阅专栏

<div class="img" ref="code">
  <qrcode-vue :value="link" size="175"  level="H" />
</div>
<p class="down" @click="code()">下载二维码</p>

import html2canvas from "html2canvas";
import QrcodeVue from "qrcode.vue";
components:{
    QrcodeVue,
    html2canvas,
  },

code() {
      html2canvas(this.$refs.code, {
        backgroundColor: "#fff",
        useCORS: true, //  第三个修改的地方
        allowTaint: true, //允许跨域（默认false）
      }).then((canvas) => {
        let dataURL = canvas.toDataURL("image/jpg");
        if (dataURL !== "") {
          var a = document.createElement("a");
          a.crossOrigin = "*";
          a.download = "二维码.jpg";
          a.href = dataURL;
          a.click();
        }
      });
    },