1.需要先引入依赖
<!--zxing依赖--> <dependency> <groupId>com.google.zxing</groupId> <artifactId>core</artifactId> <version>3.1.0</version> </dependency> <dependency> <groupId>com.google.zxing</groupId> <artifactId>javase</artifactId> <version>3.1.0</version> </dependency>
2.导入工具类代码(如果爆红解决不了需要手动导包 import )
package com.bbzd.admin.biz.anno; import com.google.zxing.BarcodeFormat; import com.google.zxing.EncodeHintType; import com.google.zxing.MultiFormatWriter; import com.google.zxing.common.BitMatrix; import com.google.zxing.qrcode.decoder.ErrorCorrectionLevel; import org.apache.commons.codec.binary.Base64; import javax.imageio.ImageIO; import java.awt.image.BufferedImage; import java.io.ByteArrayOutputStream; import java.io.IOException; import java.io.InputStream; import java.util.HashMap; /** * @Description: 生成二维码工具类 * @Author HanJiaBin * @Date 2024/4/12 * @Version 1.0 */ import org.apache.commons.codec.binary.Base64; public class ZxingUtil { private static final HashMap<EncodeHintType, Object> hintMap = new HashMap<>(); static { hintMap.put(EncodeHintType.ERROR_CORRECTION, ErrorCorrectionLevel.H);//纠错程度 hintMap.put(EncodeHintType.CHARACTER_SET, "utf-8");//字符编码 hintMap.put(EncodeHintType.MARGIN, 1);//边距 } public static String createImage(String text, InputStream imgPath) throws Exception { BitMatrix bitMatrix = new MultiFormatWriter().encode(text, BarcodeFormat.QR_CODE, 300, 300, hintMap); int width = bitMatrix.getWidth(); int height = bitMatrix.getHeight(); BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB); for (int x = 0; x < width; x++) { for (int y = 0; y < height; y++) { image.setRGB(x, y, bitMatrix.get(x, y) ? 0xFF000000 : 0xFFFFFFFF); } } if (imgPath == null) { return imageToString(image); } return null; } public static String imageToString(BufferedImage image) throws IOException { ByteArrayOutputStream os = new ByteArrayOutputStream(); try { ImageIO.write(image, "png", os);//png图片格式 return Base64.encodeBase64String(os.toByteArray()); } finally { os.close(); } } }
3.在需要生成二维码位置引入工具类
前端代码
方便复用将前端代码封装了
展示二维码代码 新建文件名BarcodeDialog.vue
<template> <div> <el-dialog :visible.sync="imageVisible" :modal="false" :close-on-click-modal="false" class="custom-dialog" > <img :src="imgsrc" class="dialog-image"/> </el-dialog> </div> </template> <script> import {handBarcode} from './barcodeUtils'; // 引入handBarcode函数 export default { data() { return { imageVisible: false, imgsrc: '', }; }, methods: { callHandBarcode(index, row, path) { handBarcode(index, row, path, this.handleSuccess, this.handleError); }, handleSuccess(isVisible, imgData) { this.imageVisible = isVisible; this.imgsrc = imgData; // 如果需要,可以调用其他方法,比如 this.search(); }, handleError(errorMsg) { // 处理错误情况 console.error('An error occurred:', errorMsg); } }, // ...其他选项 }; </script> <style scoped> /deep/ .el-dialog { /* 确保对话框内容不会撑大对话框 */ width: 350px; /* 或者你希望的宽度 */ height: 350px; /* 或者你希望的高度 */ overflow: hidden; /* 防止图片溢出对话框 */ } .el-dialog__body { padding: 0; /* 移除默认的内边距 */ margin: 0; } .dialog-image { width: 100%; /* 图片宽度填充整个对话框 */ height: auto; /* 图片高度自动,保持纵横比 */ display: block; /* 移除图片底部的间隙 */ object-fit: contain; /* 保持图片的纵横比 */ } </style>
新建文件名barcodeUtils.js
// barcodeUtils.js import bizRequest from '@/api/module/bizRequest.js'; import {Notify} from 'element-ui'; // 引入Element UI的通知服务 export function handBarcode(index, row, path, onSuccess, onError) { return bizRequest.BizInstoreBarcode({ id: index,//往后面传入的参数自己根据业务修改 number: row//往后面传入的参数自己根据业务修改 }).then(res => { if (res.status === 200) { const imgData = 'data:image/png;base64,' + res.data; // 调用传递进来的函数更新状态 onSuccess(true, imgData); Notify({ title: '成功提示', message: res.msg }); } else { // 调用传递进来的函数处理错误 onError(res.msg); Notify({ title: '错误提示', message: res.msg }); } }); }
哪里需要直接在对应的位置引用
js文件导包
methods里面
vue文件
<div> <!--二维码--> <BarcodeDialog ref="barcodeDialog"/> </div>