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

一、后端代码

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.common.BitMatrix;
import com.google.zxing.qrcode.decoder.ErrorCorrectionLevel;
import lombok.extern.slf4j.Slf4j;
import org.apache.commons.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=https://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;
}