vue不使用vue-qr生成下载二维码

最新推荐文章于 2024-10-17 15:33:55 发布

原创最新推荐文章于 2024-10-17 15:33:55 发布 · 374 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #html

前端同时被 3 个专栏收录

21 篇文章

订阅专栏

vue

9 篇文章

订阅专栏

element ui

6 篇文章

订阅专栏

本文介绍如何在Vue项目中不使用vue-qr插件，实现点击展示及下载二维码的功能。后端返回二维码图片地址，点击查看详情时加载图片，下载时处理跨域问题。关键步骤包括：展示图片、处理下载事件、解析流和处理跨域。

需求：不使用插件生成下载二维码。
表格内某一列点击查看，展示二维码，且支持下载,如图。
在这里插入图片描述
初始化的时候，后端返回表格数据的同时会把二维码图片地址返回。所以，整个逻辑就是，点击不同查看携带不同图片地址去访问接口。

1、点击查看，展示图片。
在这里插入图片描述

2、点击下载按钮（这里要解决跨域问题，本地开发和上测试服和生产的时候都得解决）,红色ip去除
在这里插入图片描述

3、接下来就是拿每个图片的标识开始发请求。
在这里插入图片描述

4、请求过去后，解析后端返回的流。
在这里插入图片描述
注意：这里需要注意的就是图片下载跨域处理，关于如何解决，上篇博文说过。
先关代码，我贴一下，有的可根据自己业务需要扩展，但是拿到后端返回东西解析流的逻辑都差不多。

下载事件：

 const downloadByBlob = (url, name = '二维码') => {
      const removeUrlPrefix = url.replace(/^http:\/\/[^/]+/, '')
      console.log(removeUrlPrefix)
      downloadURL(removeUrlPrefix).then((res) => {
        console.log(res, '-----------------------data---------------------------')
        downloadImage(res.data, name)
      })
    }

解析流过程：

export const downloadImage = function(imgSrc, name) {
  const fileName = `${name}.jpg`
  const myBlob = new Blob([imgSrc], { type: 'image/jpeg' })
  const link = document.createElement('a')
  link.href = URL.createObjectURL(myBlob)
  link.download = fileName
  link.click()
  link.remove()
  URL.revokeObjectURL(link.href)
}

跨域处理：

 '/upload': {
        //代理图片下载的接口
        target: 'http://10.100.13.241:7480/',
        changeOrigin: true,
        secure: false, // 设置支持https协议的代理
        pathRewrite: {
            '^/upload': ''
        }
      }