【Vue+Java】前后端联动生成下载二维码

最新推荐文章于 2025-08-27 21:46:16 发布

原创

最新推荐文章于 2025-08-27 21:46:16 发布 · 1.3k 阅读

这篇博客记录了一个Java后端开发者如何从零开始学习前端，实现一个在Vue应用中动态生成二维码并提供下载的功能。文章详细介绍了前端使用axios进行请求和文件下载，后端利用Zxing生成二维码图片并提供下载服务的整个流程，包括关键代码示例。

目录指引

背景

本人，去年毕业的Java后端蒟蒻，目前就职于一个没有正经前端开发的公司。

前段时间公司项目中需要在页面上实现一个二维码下载的按钮，之前从没接触过前端，从零开始熟悉，磕磕绊绊实现了功能，为了以后方便复用，因此作一个记录。

运用场景

在前端展示一个按钮，动态获取地址并生成对应地址的二维码，用户点击下载二维码图片到用户电脑本地。

环境

Vue 2.6.11
axios 0.18.1
JDK 1.8.0_321
Maven 3.8.4

丑话说在前

本文最终实现方法是在部署服务器上先生成一个二维码图片，再拉取到用户电脑上，因此最好需要在部署服务器中创建一个文件夹来存放二维码图片并定期处理。

应该是可以通过直接传输流的方式避免这个问题，但当时实现的时候并没有成功，有机会再优化。

前端部分

通过axios请求传参

二次封装axios.create方法

这边api基础地址写的是本地，可以改成部署服务器地址

import axios from 'axios'

const service = axios.create({
   
   
  baseURL: "http://localhost:8080/", //api基础地址
  timeout: 9000 //请求超时时间
})

定义download方法，通过axios进行传参

这边import指向的是前面封装axios方法的js文件

import {
   
    axios } from '@/utils/request' 

export function downFile(url,parameter){
   
   
  return axios({
   
   
    url: url, 
    params: parameter, 
    method:'get' ,
    responseType: 'blob'
  })
}

前端vue页面方法

HTML部分按键定义

定义一个a标签，添加onclick事件，指向下面js部分的下载二维码方法

<a onclick="generateQRcode(QRCodeUrl)">下载二维码</a>

js部分调用方法

这边import指向的是前面传参部分定义js方法的文件

import {
   
   downFile} from "@api/manage";

在data中定义生成二维码的api地址

url: {
   
   
  generateQRcode: "example/generateQRcode",
}

在methods中定义下载二维码方法

这边是从后端接收文件流，转换为blob对象后进行输出下载

generateQRcode(QRCodeUrl){
   
   
  downFile(this.url.generateQRcode,{
   
   QRCodeUrl: QRCodeUrl}).then((data)=>{
   
   
    if (!data) {
   
   
      this.$message.warning("文件下载失败")
      return
    }
    if (typeof window.navigator.msSaveBlob !== 'undefined'