前端、后端都可以生成二维码，轮子很多，今天分别来分享一下前后端如何使用轮子生成二维码的方法。

  1. 后端：选择一款合适的二维码生成库，如zxing、qrcode等，并在后端代码中引入该库。编写代码，根据业务需求生成相应的二维码图像，并将其输出为二进制流。

  2. 前端：使用HTML5提供的canvas元素，创建一个画布，并在画布上绘制出后端输出的二维码图像。将画布上的图像转换为DataURL格式，通过img标签显示在页面上，或者直接将DataURL传给后端，生成可供下载的二维码图片。

内容概览：

  • 一、前端生成二维码
  • 二、后端生成二维码
  • 附：下载二维码

一、前端生成二维码

  • package.json 引入依赖： “qrcodejs2”: “0.0.2”
  • 代码中引入并使用
点击刷新二维码import QRCode from 'qrcodejs2';export default {name: 'Template',data() {return { originUrl:'http://www.baidu.com'}},methods: {refreshQrCode() {this.$nextTick(function () {document.getElementById("qrCodeUrl").innerHTML = "";let qrCodeUrl = new QRCode("qrCodeUrl", {width: 250,height: 250,text: this.originUrl, #这里就是二维码内的信息，一般可以扫描连接进行调整或其他colorDark: "#409EFF",colorLight: "#fff"});});}}}

其他根据业务逻辑进行展示和处理就行。

二、后端生成二维码

后端生成二维码的轮子就更多了，一层套一层的，我们可以选择一个最为简单的，就是引入hutool的依赖，当然觉得重的，可以自己选用zxing原生实现即可。

  • pom文件引入：
 <dependency><groupId>cn.hutool</groupId><artifactId>hutool-all</artifactId><version>5.8.12</version></dependency><dependency><groupId>com.google.zxing</groupId><artifactId>core</artifactId><version>3.4.1</version></dependency>
  • 样例代码：
@GetMapping("qrcode")@ResponseBodypublic void generateQrcode(HttpServletRequest request, HttpServletResponse response){String qrCodeUrl = "http://www.baidu.com";//需要生成的内容try {QrConfig qrConfig = new QrConfig(300, 300);//imageType可选："gif";"jpg";"jpeg"；"bmp";"png";"psd";"gif";"jpg";"jpeg"；"bmp";"png";"psd";QrCodeUtil.generate(qrCodeUrl, qrConfig, "png", response.getOutputStream());System.out.println("生成二维码成功!");} catch (QrCodeException | IOException e) {System.out.println("发生错误！ {}！"+ e.getMessage());}}

前端可以使用流来接收，将图片呈现出来，也可以直接当做图片下载

# 接收数据展示<img th:src="...../qrcode">

以上都是直接有的轮子，开箱即用。

附：下载二维码

通常页面查看了二维码都会附加下载，将二维码放到其他渠道引流，所以以上是能够从接口或者前端页面获取到二维码的预览了，那么想下载怎么操作呢？

接口部分，直接在浏览器请求接口数据，浏览器就能自动预览，你可以通过截图等方法直接拿到二维码文件。

前端页面部分，我们以来的qrcodejs的组件已经将二维码信息渲染在页面上了，基本思路是可以获取页面渲染的图片数据，直接通过按钮触发标签的形式将页面数据下载。
以下为样例代码：

download() {let myCanvas = document.getElementById('qrCode').getElementsByTagName('canvas');let a = document.createElement('a')a.href = myCanvas[0].toDataURL('image/png');a.download = '二维码';a.click()this.$message({message: "二维码正在进行下载保存",type: 'success'})}