SpringBoot+Vue 实现扫描二维码跳转H5页面

╰+攻爆jí腚メ 2023-09-29 09:56 69阅读 0赞

#### 目录 ####

*  需求
 *  代码
 *   *   *  引入组件
     *  一、批量下载二维码
     *   *  1. 前端
         *  2. 后端
     *  二、预览二维码
     *   *  1. 前端 antd-vue
         *  2. JS

--------------------

## 需求 ##

`扫描二维码跳转员工录入界面进行添加员工信息`

1.  批量下载二维码：选择多个企业进行打包下载
2.  查看二维码：在线预览

--------------------

## 代码 ##

#### 引入组件 ####

import QRCode from 'qrcodejs2'

### 一、批量下载二维码 ###

#### 1. 前端 ####

// 批量下载二维码
        hanleBatchDown () {
        
          let fileName = '二维码'
          this.axios({
        
            method: 'get',
            url: 'http://localhost:8080/qrcode/zip',
            params: '',
            responseType: 'blob'
          }).then(data => {
        
            if (data) {
        
              let url = window.URL.createObjectURL(data)
              let link = document.createElement('a')
              link.style.display = 'none'
              link.href = url
              link.setAttribute('download', fileName + '.zip')
              document.body.appendChild(link)
              link.click()
              document.body.removeChild(link) // 下载完成移除元素
              window.URL.revokeObjectURL(url) // 释放掉blob对象
              this.$message.success('批量下载成功！')
            } else {
        
              this.$message.error('下载失败' + data.message)
            }
            this.loading = false
          })
        }

#### 2. 后端 ####

@GetMapping("/qrcode/zip")
        public void downloadZip(HttpServletRequest request, HttpServletResponse response) throws IOException {
        
            List<BCompany> bCompanyList = bCompanyService.list();
            if (bCompanyList != null) {
        
                OutputStream outputStream = response.getOutputStream();
                ZipOutputStream zipOutputStream = new ZipOutputStream(outputStream);
                for (int i = 0; i < bCompanyList.size(); i++) {
        
                    String url = "http://localhost:8080/test.html" + "?" + "companyName=" + URLEncoder.encode(bCompanyList.get(i).getCompanyName(), "utf-8") + "&companyId=" + bCompanyList.get(i).getId();
                    BufferedImage buffImg = QRcodeUntil.getBufferedImage(null, url);
                    ZipEntry entry = new ZipEntry(bCompanyList.get(i).getCompanyName() + ".png");
                    zipOutputStream.putNextEntry(entry);
                    ImageIO.write(buffImg, "png", zipOutputStream);
                }
                zipOutputStream.flush();
                zipOutputStream.close();
                outputStream.flush();
                outputStream.close();
            }
        }

### 二、预览二维码 ###

#### 1. 前端 antd-vue ####

`<a @click="scewm(record.companyName,record.id)">预览二维码</a>`

<a-modal :centered="true"
                 :maskClosable="false"
                 :width="460"
                 @cancel="handleCancel"
                 destroyOnClose
                 title="查看二维码"
                 v-model="show">
          <a-row :gutter="24"
                 id="printContainer">
            <div id="qrcode" ref="qrcode"></div>
          </a-row>
          <template slot="footer">
            <a-button @click="hanleDown(companyName,companyId)"
                      type="primary">下载
            </a-button>
            <a-button @click="handleCancel"
                      key="back">关闭
            </a-button>
          </template>
        </a-modal>

#### 2. JS ####

computed: {
        
        show: {
        
          get: function () {
        
            return true
          },
          set: function () {
        
          }
        }
      },
    
      //@TODO 监听visible变化
      watch: {
        
        // 生成二维码js必须在 this.$nextTick(function(){调用})或setTimeout(() => { 调用 }, 100)，是为了确保二维码容器DOM已经存在
        visible(newVisible) {
        
          if (newVisible) {
        
            this.$nextTick(function () {
        
              this.init(this.companyName, this.companyId)
            })
          }
        }
      }
      methods: {
        
      	//@TODO 前端展示二维码
        scewm(companyName, id) {
        
          //显示二维码
          this.visible = true
          this.newVisible = true
          this.companyName = companyName
          this.companyId = id
        },
        init(companyName, id) {
        
          // 为了防止重复生成二维码，使用置空进行控制
          document.getElementById('qrcode').innerHTML = ''
          // 设置二维码内容  显示内容(text所指向内容)必须是UTF-8编码格式。
          const content = companyName + "@" + id
          this.qrcode = new QRCode('qrcode', {
        
            width: 260,
            height: 260,
            colorDark: '#000',
            colorLight: '#fff',
            correctLevel: QRCode.CorrectLevel.L, // 容错率，L/M/H
            text: content
          });
        }
     }