vue 接口返回base64的串前端实现下载二维码的功能

G_GreenHand

于 2024-09-06 14:11:10 发布

阅读量152

点赞数 3

文章标签：前端 vue.js javascript

本文链接：https://blog.csdn.net/weixin_44766849/article/details/141958505

版权

 //生成二维码
      getGenerateCode(row){
        const loading = this.$loading({
          lock: true,
          text: '正在下载，请稍候。。。',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        generateCode({ productGiftId: row.id })
          .then(response => {
            loading.close()
            var data =response.data.data
            var url ='data:image/png;base64,'+ data
            let downloadFilename = row.productName + '二维码.png'
            this.downloadFile(downloadFilename,url)
          })
          .catch(() => {
            loading.close()
            this.$notify.error({
              title: '失败',
              message: response.data.msg
            })
          })
      },
      downloadFile(fileName, content){
        const aLink = document.createElement('a')
        aLink.style.display = 'none'
        aLink.href = content // base64Url就是你要下载的base64格式图片代码
        aLink.download = fileName
        // 模拟点击
        document.body.appendChild(aLink)
        aLink.click()
        //移除节点
        document.body.removeChild(aLink)
      },