后端生成二维码，前端请求接口生成二维码并展示，且多个参数后边的参数没有正常传输问题处理

一、后端代码

1、controller

@GetMapping("/generateQRCode/{url}") @ApiOperation(value = "生成url链接二维码",notes = "生成url链接二维码") public JsonResult<NewsQRCodeVo> generateQRCode(@PathVariable String url,HttpServletResponse servletResponse) { NewsQRCodeVo response=new NewsQRCodeVo(); try { QRCodeUtil.createCodeToOutputStream(url,servletResponse.getOutputStream()); }catch (Exception e){ throw new InformationException("生成二维码失败", InformationErrCode.NORMAL_CODE.getErrCode()); } return JsonResult.ok(response); }

2、NewsQRCodeVo

@Data @ApiModel(description = "新闻二维码Vo") public class NewsQRCodeVo { @ApiModelProperty(value = "newsId") private String newsId; @ApiModelProperty(value = "新闻二维码图片") private String newsQRCodePic; }

3、QRCodeUtil

import com.google.zxing.BarcodeFormat; import com.google.zxing.EncodeHintType; import com.google.zxing.MultiFormatWriter; import com.google.zxing.WriterException; import com.google.zxing mon.BitMatrix; import com.google.zxing.qrcode.decoder.ErrorCorrectionLevel; import lombok.extern.slf4j.Slf4j; import org.apache mons.lang3.StringUtils; import javax.imageio.ImageIO; import javax.swing.filechooser.FileSystemView; import java.awt.image.BufferedImage; import java.io.File; import java.io.OutputStream; import java.util.HashMap; import java.util.Map; /** * @author Created by wcg * @Date 2025/1/24 10:56 */ @Slf4j public class QRCodeUtil { //CODE_WIDTH：二维码宽度，单位像素 private static final int CODE_WIDTH = 400; //CODE_HEIGHT：二维码高度，单位像素 private static final int CODE_HEIGHT = 400; //FRONT_COLOR：二维码前景色，0x000000 表示黑色 private static final int FRONT_COLOR = 0x000000; //BACKGROUND_COLOR：二维码背景色，0xFFFFFF 表示白色 //演示用 16 进制表示，和前端页面 CSS 的取色是一样的，注意前后景颜色应该对比明显，如常见的黑白 private static final int BACKGROUND_COLOR = 0xFFFFFF; public static void createCodeToFile(String content, File codeImgFileSaveDir, String fileName) { try { if (StringUtils.isBlank(content) || StringUtils.isBlank(fileName)) { return; } content = content.trim(); if (codeImgFileSaveDir==null || codeImgFileSaveDir.isFile()) { //二维码图片存在目录为空，默认放在桌面... codeImgFileSaveDir = FileSystemView.getFileSystemView().getHomeDirectory(); } if (!codeImgFileSaveDir.exists()) { //二维码图片存在目录不存在，开始创建... codeImgFileSaveDir.mkdirs(); } //核心代码-生成二维码 BufferedImage bufferedImage = getBufferedImage(content); File codeImgFile = new File(codeImgFileSaveDir, fileName); ImageIO.write(bufferedImage, "png", codeImgFile); log.info("二维码图片生成成功：" + codeImgFile.getPath()); } catch (Exception e) { e.printStackTrace(); } } /** * 生成二维码并输出到输出流, 通常用于输出到网页上进行显示，输出到网页与输出到磁盘上的文件中，区别在于最后一句 ImageIO.write * write(RenderedImage im,String formatName,File output)：写到文件中 * write(RenderedImage im,String formatName,OutputStream output)：输出到输出流中 * @param content ：二维码内容 * @param outputStream ：输出流，比如 HttpServletResponse 的 getOutputStream */ public static void createCodeToOutputStream(String content, OutputStream outputStream) { try { if (StringUtils.isBlank(content)) { return; } content = content.trim(); //核心代码-生成二维码 BufferedImage bufferedImage = getBufferedImage(content); //区别就是这一句，输出到输出流中，如果第三个参数是 File，则输出到文件中 ImageIO.write(bufferedImage, "png", outputStream); log.info("二维码图片生成到输出流成功..."); } catch (Exception e) { e.printStackTrace(); } } //核心代码-生成二维码 private static BufferedImage getBufferedImage(String content) throws WriterException { //com.google.zxing.EncodeHintType：编码提示类型,枚举类型 Map<EncodeHintType, Object> hints = new HashMap(); //EncodeHintType.CHARACTER_SET：设置字符编码类型 hints.put(EncodeHintType.CHARACTER_SET, "UTF-8"); //EncodeHintType.ERROR_CORRECTION：设置误差校正 //ErrorCorrectionLevel：误差校正等级，L = ~7% correction、M = ~15% correction、Q = ~25% correction、H = ~30% correction //不设置时，默认为 L 等级，等级不一样，生成的图案不同，但扫描的结果是一样的 hints.put(EncodeHintType.ERROR_CORRECTION, ErrorCorrectionLevel.M); //EncodeHintType.MARGIN：设置二维码边距，单位像素，值越小，二维码距离四周越近 hints.put(EncodeHintType.MARGIN, 1); MultiFormatWriter multiFormatWriter = new MultiFormatWriter(); BitMatrix bitMatrix = multiFormatWriter.encode(content, BarcodeFormat.QR_CODE, CODE_WIDTH, CODE_HEIGHT, hints); BufferedImage bufferedImage = new BufferedImage(CODE_WIDTH, CODE_HEIGHT, BufferedImage.TYPE_INT_BGR); for (int x = 0; x < CODE_WIDTH; x++) { for (int y = 0; y < CODE_HEIGHT; y++) { bufferedImage.setRGB(x, y, bitMatrix.get(x, y) ? FRONT_COLOR : BACKGROUND_COLOR); } } return bufferedImage; } }

4、pom依赖

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

这样前端传一个utl完整地址，就可以直接得到二维码图片流了，测试看一下；

http://localhost:19900/api/v1/spider/paramGenerateQRCode?url= blog.csdn.net/qq18346342939/article/details/140149193?spm=1001.2014.3001.5502

最后扫码就是我上边输入的那个地址，测试成功，然后我们可以前端如何处理：

二、前端

1、最开始我是这样处理的，二维码生成，但是过后发现我的页面链接是有2个参数的，第二个参数是&id=xxx，实际扫码的时候会少id这个参数

<span class="span_b"> <div class="qr-code" id="qrCode"><img id="qrImage" src="http://localhost:19900/api/v1/spider/paramGenerateQRCode?url=${window.location.href}" alt="QR Code" style="width: 100%; height: 100%;"></div> </span>

2、最后花费了不少时间处理，原来是传参对于&等这类符号会读取异常，后边是（+、&、^等）会无法传输，然后说用encodeURIComponent包裹一下就行好了，但是包裹方式如下图，结果才好使

附代码：

<span class="span_b"> <div class="qr-code" id="qrCode"><img id="qrImage" src="http://localhost:19900/api/v1/spider/paramGenerateQRCode?url=${encodeURIComponent(window.location.href)}" alt="QR Code" style="width: 100%; height: 100%;"></div> </span> /* 二维码容器的样式 */ .share_list i .share_bottom .bottom_text .span_b .qr-code { width: 120px; height: 120px; border: 1px solid #ddd; }

最后这样才完全好使了！