背景需求,前端生成二维码,并根据要求,实现点击下载,同时还要指定文件名

在最近开发的时候,接到了一个任务,

需要在前端生成一个二维码,并且点击就打开弹窗,同时弹窗下面还有一个下载按钮,

点击下载按钮就调用浏览器的下载,且以一定规则进行文件命名

第一步还是先把这个二维码弄出来

1.打开当前目录的终端管理器导入组件

npm i qrcode -S

2.修改main.js

引入组件

import QRCode from 'qrcode'

使用组件

Vue.use(QRCode)

3.测试

<div>-->
   <img :src="QRImgUrl" />
</div>

定义数据区

      //demo
      QRlink:'www.xxx.com',
      QRImgUrl:'',

调用相对应的方法

    getQRcode(){
      QRCode.toDataURL(this.QRlink, { errorCorrectionLevel: 'L', margin: 2, width: 128 }, (err, url) => {
        if (err) throw err
        this.QRImgUrl= url
      }
      )
    },

最后二维码出来了

需要下载,最后找到了资料2和3结合就是下面这些东西了

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="downQrImg">下载</el-button>
        <a id="down"/>
      </div>

方法区

    downQrImg(){
      let url = 图片base64地址.replace(/^data:image\/[^;]+/, 'data:application/octet-stream');
      let elementById = document.getElementById("down")
      elementById.href = url;
      elementById.download = "自定义名字"+'.png';
      elementById.click();
    },

参考资料1

vue使用qrcode插件将后端返回的二维码字符串生成二维码_YoungMan_09的博客-CSDN博客_vue 字符串生成二维码qrcode将字符串生成二维码https://blog.csdn.net/YoungMan_09/article/details/124636587

参考资料2
Javascript 如何从下载 src 为 data 数据的 img | 温欣爸比的博客
http://wxnacy.com/2018/01/29/download-from-img-src-data/

参考资料3

js实现文件下载 - 简书https://scarletsky.github.io/2016/07/03/download-file-using-javascript/http://blog.csdn...https://www.jianshu.com/p/43772924e300