How to Generate QR Code Images with SpringBoot, ZXing, and Vue

ZXing is an open‑source Java library that supports generating and decoding various 1D/2D barcode formats. The article shows how to use it in a SpringBoot + Vue project to let the front‑end request a QR code image generated by the back‑end.

Backend setup

First, add the ZXing dependencies to pom.xml:

<!-- zxing生成二维码 -->
<dependency>
    <groupId>com.google.zxing</groupId>
    <artifactId>core</artifactId>
    <version>3.3.3</version>
</dependency>
<dependency>
    <groupId>com.google.zxing</groupId>
    <artifactId>javase</artifactId>
    <version>3.3.3</version>
</dependency>

Create a utility class QRCodeUtil that defines constants for image size and colors, and provides methods to: createCodeToFile: generate a QR code image file on disk. createCodeToOutputStream: write the QR code directly to an OutputStream (used for HTTP responses). getBufferedImage: build a BufferedImage from the content using MultiFormatWriter and the configured EncodeHintType values (character set UTF‑8, error correction M, margin 1).

Parsing helpers parseQRCodeByFile and parseQRCodeByUrl that read a QR code image and return the decoded text.

The class also includes a method drawLogoQRCode that can embed a logo into the QR code by drawing the logo image onto the generated bitmap.

Controller

Define a REST endpoint that returns the QR code image:

@GetMapping("/qrcode")
public void getQRCode(HttpServletResponse response) throws Exception {
    SysAppVersion sysAppVersion = appVersionService.getLast();
    String downloadpath = sysAppVersion.getDownloadLink(); // download URL
    try {
        QRCodeUtil.createCodeToOutputStream(downloadpath, response.getOutputStream());
        log.info("成功生成二维码!");
    } catch (IOException e) {
        log.error("发生错误， 错误信息是：{}！", e.getMessage());
    }
}

The endpoint fetches the latest app version download link, generates a QR code for that URL, and streams the PNG image back to the client.

Front‑end (Vue)

In the Vue component, add an el-dialog that contains an el-image to show the QR code. The dialog is hidden by default.

<el-dialog title="请扫描二维码下载" width="15%" :visible.sync="dialogVisible" :before-close="handleClose">
  <el-image style="width: 150px; height: 150px" :src="fitUrl" :fit="fit"></el-image>
</el-dialog>

Declare the required data properties:

data() {
  return {
    fileUrl: "",
    dialogVisible: false,
    fitUrl: "",
    fit: "cover"
  };
}

Add a button that triggers the QR‑code download:

<el-button type="primary" icon="el-icon-download" size="mini" @click="downApp">app下载</el-button>

The downApp method calls downAppImage, receives the blob, creates an object URL, assigns it to fitUrl, and shows the dialog:

downApp(){
  downAppImage().then(val => {
    const src = window.URL.createObjectURL(val);
    this.fitUrl = src;
    this.dialogVisible = true;
  })
}

The helper API is defined in tool/edition.js:

export function downAppImage(){
  return request({
    url: '/download/qrcode',
    method: 'get',
    responseType: "blob"
  })
}

When the button is clicked, the front‑end sends a GET request to /download/qrcode, receives the QR code PNG as a blob, converts it to a temporary URL with URL.createObjectURL, and displays it inside the dialog.

Result

The QR code image streamed from the back‑end is shown in the dialog, allowing users to scan and download the app. Screenshots in the original article illustrate the generated QR code and the UI after the image is loaded.