VUE 实现生成二维码，并支持点击按钮下载

最新推荐文章于 2024-08-03 11:40:22 发布

Gyk-gyk

最新推荐文章于 2024-08-03 11:40:22 发布

阅读量2.9k

点赞数

文章标签： vue vue.js javascript

本文链接：https://blog.csdn.net/gaoyuekang/article/details/125542143

版权

VUE 二维码下载

摘要由CSDN通过智能技术生成

在网上参考一些相关的文章，但很少有能符合心意的，所以自己写了一份，给道友们参考。

代码的是基于我们自己的一个web项目的，所以，我只贴出关键的地方来，这不是新手教学，有一定基础的道友会秒懂的

二维码是显示在 el-dialog上的：

tempate的代码片段：


    <!--  二维码弹窗  -->
    <el-dialog title="个人二维码" width="380px" :visible.sync="dialogFormVisible" :destroy-on-close=true center>
      <div id="personQrCode" align="center" style="height: 700px;position: relative;margin-top: -1rem;">
        <img src="@/assets/images/qrcode-bg.png" style="width: 100%;z-index: -1"/>
        <div style="width: 50%;font-size: 0.88rem;color: #ffffff;position: absolute;top: 22.5rem;">
          我的二维码
        </div>
        <div style="width: 70%;font-size: 2.28rem;font-weight: bold;text-align: left;color: #ffffff;position: absolute;top