基于前端技术的QR码API开发实战：从原理到部署

news2025/4/21 14:56:01

前言

QR码（Quick Response Code）是一种二维码，于1994年开发。它能快速存储和识别数据，包含黑白方块图案，常用于扫描获取信息。QR码具有高容错性和快速读取的优点，广泛应用于广告、支付、物流等领域。通过扫描QR码，用户可以快速获取信息和实现便捷操作，为现代生活带来便利。在本教程中，小编将为大家探讨如何使用 NestJS 和 qrcode.js 构建 QR 二维码，并将其放到Excel中。

环境准备

在开始之前，请确保您具备以下工具和知识：

  • Node.js 和 npm 安装在您的系统上。
  • 基本了解 TypeScript 和 JavaScript。
  • 熟悉 NestJS 基础知识（如果没有，可以参考 NestJS 官方文档）。

第 1 步：设置 NestJS 项目

创建一个新的 NestJS 项目开始。打开终端并执行以下命令：

# Create a new NestJS project
npx @nestjs/cli new qr-code-generator-api

# Move into the project directory
cd qr-code-generator-api

第 2 步：安装qrcode.js

接下来，安装该 qrcode.js 软件包，这将使小编能够生成二维码。在项目目录中运行以下命令：

npm install qrcode

第 3 步：生成二维码

现在小编已经设置了 NestJS 和qrcode.js，让小编创建一个 QR 码生成service。在 NestJS 中，service是负责处理业务逻辑的类。小编将创建一个 QrCodeService ，并利用qrcode.js生成二维码的代码。

首先，创建一个在 src 文件夹中命名 qr-code.service.ts 的新文件，并添加以下代码：

// src/qr-code.service.ts
import { Injectable } from '@nestjs/common';
import * as qrcode from 'qrcode';

@Injectable()
export class QrCodeService {
  async generateQrCode(data: string): Promise<string> {
    try {
      const qrCodeDataURL = await qrcode.toDataURL(data);
      return qrCodeDataURL;
    } catch (error) {
      throw new Error('Failed to generate QR code.');
    }
  }
}

在上面的代码中，小编创建了一个 QrCodeService 具有单个方法的 generateQrCode ，此方法将字符串 data 作为输入，并返回一个 Promise，该 Promise 解析为表示生成的 QR 码的数据 URL。

第 4 步：创建二维码Controller

在 NestJS 中，controller处理传入的请求并与服务交互以提供响应。因此小编创建一个 QR 码 controller来处理 QR 码的生成。创建 src 文件夹中命名 qr-code.controller.ts 的新文件，并添加以下代码：

// src/qr-code.controller.ts
import { Controller, Get, Query } from '@nestjs/common';
import { QrCodeService } from './qr-code.service';

@Controller('qr-code')
export class QrCodeController {
  constructor(private readonly qrCodeService: QrCodeService) {}

  @Get()
  async generateQrCode(@Query('data') data: string) {
    const qrCodeDataURL = await this.qrCodeService.generateQrCode(data);
    return `<img src="${qrCodeDataURL}" alt="QR Code" />`;
  }
}
@Controller('qr-code-data')
export class QrDataCodeController {
  constructor(private readonly qrCodeService: QrCodeService) {}

  @Get()
  async generateQrCode(@Query('data') data: string) {
    const qrCodeDataURL = await this.qrCodeService.generateQrCode(data);
    return qrCodeDataURL;
  }
}

在上面的代码中，小编在路由 /qr-code 上定义了一个 QrCodeController 具有单个 GET 端点的端点。端点需要一个查询参数 data ，该参数表示将是要编码到 QR 码中的内容。controller中 generateQrCode 的方法从 中调用 generateQrCode 该方法， QrCodeService 并在响应中以图像形式返回 QR 码。同时也通过 /qr-code-data 上定义了一个 QrDataCodeController 具有单个 GET 端点的端点，并在响应中以base^4形式返回。

第 5 步：连接二维码module

现在小编已经准备好了service和controller，小编需要将它们连接到一个module中。创建 src 文件夹中命名 qr-code.module.ts 的新文件，并添加以下代码：

// src/qr-code.module.ts
import { Module } from '@nestjs/common';
import { QrCodeController, QrDataCodeController } from "./qr-code.controller";
import { QrCodeService } from './qr-code.service';

@Module({
  controllers: [QrCodeController,QrDataCodeController],
  providers: [QrCodeService],
})
export class QrCodeModule {}

在上面的代码中，小编定义了一个 QrCodeModule 导入 QrCodeController,QrDataCodeController 和 QrCodeService 的 .该模块将负责提供二维码生成功能。

第 6 步：修改main.ts

现在小编已经创建了module，让小编引导 NestJS 应用程序并包含 QrCodeModule。打开文件 src/main.ts 并按如下方式进行修改：

// src/main.ts
import { NestFactory } from '@nestjs/core';
import { QrCodeModule } from './qr-code.module';

async function bootstrap() {
  const app = await NestFactory.create(QrCodeModule);
  await app.listen(3000);
}
bootstrap();

在上面的代码中，小编已导入 QrCodeModule 并将其传递给 NestFactory.create ，表明小编的应用程序将使用 QrCodeModule .应用程序将侦听端口 3000(默认为3000，也可以修改端口）。

第 7 步：测试 QR 码生成器 API

  1. 执行以下命令来运行 NestJS 应用程序：
npm run start
  1. 打开浏览器，在地址栏中输入http://localhost:3000/qr-code?data=Hello%20Spreadjs

替换等于号之后的内容为您要编码到 QR 码中的数据。

  1. 您应该会收到一个包含带有生成的二维码的 HTML img 标签的回复。图像将在响应中显示为数据 URL。

然后扫描二维码，如果扫描成功，就代表我们已经创建了一个二维码。

  1. 打开浏览器，在地址栏中输入http://localhost:3000/qr-code-data?data=Hello%20Spreadjs。返回一个base64码数据

最后附上完整的项目代码地址：

https://github.com/wteja/qr-code-generator-api

前端表格组件实现二维码图片

在上面介绍的例子中，小编是直接生成了一个二维码，但是在实际的日常，这种场景其实很少，更多的是将二维码放在各种 Excel 报告中，除了使用上述的原生 NestJS 和 qrcode.js 之外，还可以尝试其他的一些支持NestJS的前端表格组件来实现，这样做的好处是可以减少代码的开发量。

SpreadJS 是葡萄城推出的基于 HTML5 标准的纯前端表格组件，具备高性能、跨平台、与 Excel高度兼容的产品特性，其设计目的是帮助开发者快速实现浏览器中各类 Excel 表格应用，已成功在数据填报、在线表格文档、类 Excel 报表制作与生成、企业预决算、计量检测、实验室管理等领域得到广泛应用，可让您快速具备与飞书、语雀、灵犀文档等同源的表格开发能力。下图是使用 SpreadJS 实现的一个二维码样例：

SpreadJS如同Excel一样，支持插入图片，定位图片。我们在SpreadJS中插入上述拿到的6ase64数据

第1步：获取Base64数据

var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://localhost:3000/qr-code-data?data=Hello%20Spreadjs', true);

xhr.onload = function (e) {
    if (this.status == 200) {
        var base64Data = this.response;

    }
};

xhr.send();

第2步：获取SpreadJS对象

接下来获取SpreadJS对象

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8"/>
    <!-- 禁用IE兼容视图 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="spreadjs culture" content="zh-cn"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" , user-scalable=no"/>
    <title>SpreadJS demo</title>

    <link href="http://cdn.grapecity.com/spreadjs/hosted/css/gc.spread.sheets.excel2013white.17.0.0.css"
          rel="stylesheet" type="text/css"/>
    <script src="http://cdn.grapecity.com/spreadjs/hosted/scripts/gc.spread.sheets.all.17.0.0.min.js"></script>
    <script src="http://cdn.grapecity.com/spreadjs/hosted/scripts/plugins/gc.spread.sheets.shapes.17.0.0.min.js"></script>
</head>

<body>
<div>
    <div id="ss" class="sample-spreadsheets" style="height: 500px;width: 90%;"></div>
</div>


<script type="text/javascript">
    window.onload = function () {
        var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), {sheetCount: 2});  
    }

</script>
</body>

</html>

新建一个文本文档，复制上面的代码，将其后缀修改为.html ，在浏览器中打开此文件，发现发现了一个电子表格

第3步：插入图片

接下来 我们添加图片

var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), {sheetCount: 2});
let activeSheet = spread.getSheet(0);
activeSheet.setRowHeight(0, 100);
activeSheet.setColumnWidth(0, 100)


var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://localhost:3000/qr-code-data?data=Hello%20Spreadjs', true);

xhr.onload = function (e) {
    if (this.status == 200) {
        var base64Data = this.response;
        var pic = activeSheet.shapes.addPictureShape("Picture 1", base64Data, 0, 0, 100, 100);
        pic.startRow(0);
        pic.startColumn(0);

        pic.width(100)
        pic.height(100)

    }
};
xhr.send();

结果如下：

这样子就实现了在电子表格中，插入一个二维码图片的效果。

怎么，上述过程太复杂，没有关系，SpreadJS也支持直接创建二维码。

前端表格组件实现二维码公式

第1步：打开SpreadJS

打开刚刚的页面，或者点击这里重新打开SpreadJS。

第2步：实现二维码

打开SpreadJS之后，新建一个Sheet页，然后把想要展示在二维码上的信息写下来，如下图所示：

然后我们随便找一个空白的单元格，输入以下公式，空格中输入显示信息的单元格位置（比如上图中的“Hello World”的位置B10）

//空格中为显示信息的单元格位置
=BC_QRCODE()

然后就会显示一个二维码：

扫描该二维码，手机就会显示“Hello World”字符串，这样就完成了一个将二维码嵌到Excel中的小Demo。(更多样式的二维码可以参考这个Demo)

除此之外，还可以用代码的方式给二维码赋值：

sheet.setFormula(0,0,'=BC_QRCODE("hello,我是二维码")');

上述代码是为A1单元格创建一个公式，公式是=BC_QRCODE(“hello,我是二维码”)，结果是这样子的：

附上完整的代码：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8"/>
    <meta name="spreadjs culture" content="zh-cn" />
    <link href="http://cdn.grapecity.com/spreadjs/hosted/css/gc.spread.sheets.excel2013white.17.0.7.css"
          rel="stylesheet" type="text/css"/>

    <script src="http://cdn.grapecity.com/spreadjs/hosted/scripts/gc.spread.sheets.all.17.0.7.min.js"></script>
    <script src="http://cdn.grapecity.com/spreadjs/hosted/scripts/plugins/gc.spread.sheets.barcode.17.0.7.min.js"></script>
</head>

<body>
<div>
    <div class="container">
        <div id="ss" style="width:200%; height:90vh;"></div>
    </div>

</div>
<script type="text/javascript">
    window.onload = function () {
        let  spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
        let sheet = spread.getActiveSheet()
        sheet.setFormula(0,0,'=BC_QRCODE("hello,我是二维码")');
        sheet.setRowHeight(0,200)
        sheet.setColumnWidth(0,200)
    }

</script>
</body>
</html>

总结

在本文中，小编介绍了如何使用 NestJS 和 qrcode.js 创建 QR 二维码，并借助了纯前端表格组件SpreadJS来实现将 QR 二维码中显示在Excel中，如果您想了解更多关于SpreadJS的信息，欢迎点击这里查看。

扩展链接：

【干货放送】财务报表勾稽分析要点，一文读尽！

为什么你的财务报表不出色？推荐你了解这四个设计要点和！

纯前端类 Excel 表格控件在报表勾稽分析领域的应用场景解析

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2339497.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

RenderStage::drawInner

RenderStage::drawInner

文章目录 RenderStage::drawInnerOSG渲染后台关系图OSG的渲染流程RenderBin::draw(renderInfo,previous)RenderBin::drawImplementationRenderLeaf::renderosg::State::apply(const StateSet*)Drawable::draw(RenderInfo& renderInfo)Drawable::drawInner(RenderInfo& …
阅读更多...
C++初阶-类和对象（中）

C++初阶-类和对象（中）

目录 1.类的默认成员函数 2.构造函数&#xff08;难度较高&#xff09; ​编辑 ​编辑 ​编辑 3.析构函数 4.拷贝构造函数 5.赋值运算符重载 5.1运算符重载 5.2赋值运算符重载 6.取地址运算符重载 6.1const成员函数 6.2取地址运算符重载 7.总结 1.类的默认成员函数…
阅读更多...
智谱开源新一代GLM模型，全面布局AI智能体生态

智谱开源新一代GLM模型，全面布局AI智能体生态

2024年4月15日&#xff0c;智谱在中关村论坛上正式发布了全球首个集深度研究与实际操作能力于一体的AI智能体——AutoGLM沉思。这一革命性技术的发布标志着智谱在AGI&#xff08;通用人工智能&#xff09;领域的又一次重要突破。智谱的最新模型不仅推动了AI智能体技术的升级&am…
阅读更多...
分治-快排-75.颜色分类-力扣(LeetCode)

分治-快排-75.颜色分类-力扣(LeetCode)

一、题目解析 给定一个数组将其元素按照0&#xff0c;1,&#xff0c;2三段式排序&#xff0c;并且在原地进行排序。 二、算法原理 解法&#xff1a;三指针 用cur遍历数组&#xff0c;left记录0的最左侧&#xff0c;right记录2的最右侧。 left初始值为-1&#xff0c;right的初…
阅读更多...
铅酸电池充电器方案EG1253+EG4321

铅酸电池充电器方案EG1253+EG4321

参考&#xff1a; 基于EG1253EG4321铅酸电池(48V20AH)三段式充电器 屹晶微高性价比的电瓶车充电器方案——EG1253 电瓶电压 48V电瓶锂电池&#xff0c;其充满约为55V~56V&#xff0c;因此充电器输出电压为55V~56V&#xff1b; 若是48V铅酸电池&#xff0c;标称电压为48V&…
阅读更多...
vue 中formatter

vue 中formatter

:formatter 是前端表格组件&#xff08;如 Element UI、Vxe-Table 等&#xff09;中用于 ​​自定义单元格内容显示格式​​ 的属性。它的核心作用是&#xff1a;将后端返回的原始数据&#xff08;如编码、状态值等&#xff09;转换为更友好、更易读的文本。 这段代码 :forma…
阅读更多...
协程？协程与线程的区别？Java是否支持协程？

协程？协程与线程的区别？Java是否支持协程？

一、前言 协程&#xff08;Coroutine&#xff09; 是一种轻量级的并发编程模型&#xff0c;允许在单线程内通过协作式多任务调度实现并发。由用户代码显式控制&#xff08;用户态调度而非操作系统内核调度&#xff09;&#xff0c;避免了线程上下文切换的开销&#xff0c;适合…
阅读更多...
Muduo网络库实现 [十六] - HttpServer模块

Muduo网络库实现 [十六] - HttpServer模块

目录 设计思路 类的设计 模块的实现 公有接口 私有接口 疑问点 设计思路 本模块就是设计一个HttpServer模块&#xff0c;提供便携的搭建http协议的服务器的方法。那么这个模块需要如何设计呢&#xff1f; 这还需要从Http请求说起。 首先从http请求的请求行开始分析&…
阅读更多...
关于进程状态

关于进程状态

目录 进程的各种状态 运行状态 阻塞状态 挂起状态 linux中的进程状态、 进程状态查看 S状态&#xff08;浅睡眠&#xff09; t 状态&#xff08;追踪状态&#xff09; T状态&#xff08;暂停状态&#xff09; ​编辑 kill命令手册 D状态&#xff08;深度睡眠&#…
阅读更多...
SQL注入 01

SQL注入 01

0x01 用户、脚本、数据库之间的关系 首先客户端发出了ID36的请求&#xff0c;脚本引擎收到后将ID36的请求先代入脚本的sql查询语句Select * from A where id 36 &#xff0c; 然后将此代入到数据库中进行查询&#xff0c;查到后将返回查询到的所有记录给脚本引擎&#xff0c;接…
阅读更多...
学习笔记：黑马程序员JavaWeb开发教程(2025.3.24)

学习笔记：黑马程序员JavaWeb开发教程(2025.3.24)

11.2 案例-文件上传-简介 火狐浏览器可以看到文件上传传递的底层数据&#xff0c;而chrome对这一块数据进行了包装 在输出日志代码处打了一个断点&#xff0c;看服务端接收到的数据&#xff0c;在上传文件的保存地址中&#xff0c;可以看到&#xff0c;有三个临时文件&…
阅读更多...
计算机视觉cv2入门之视频处理

计算机视觉cv2入门之视频处理

在我们进行计算机视觉任务时&#xff0c;经常会对视频中的图像进行操作&#xff0c;这里我来给大家分享一下&#xff0c;cv2对视频文件的操作方法。这里我们主要介绍cv2.VideoCapture函数的基本使用方法。 cv2.VideoCapture函数 当我们在使用cv2.VideoCapture函数时&#xff…
阅读更多...
【Linux】Rhcsa复习5

【Linux】Rhcsa复习5

一、Linux文件系统权限 1、文件的一般权限 文件权限针对三类对象进行定义&#xff1a; owner 属主&#xff0c;缩写u group 属组&#xff0c; 缩写g other 其他&#xff0c;缩写o 每个文件针对每类访问者定义了三种主要权限&#xff1a; r&#xff1a;read 读 w&…
阅读更多...
FFmpeg：M3U8的AES加密

FFmpeg：M3U8的AES加密

1、加密用的key&#xff0c;命令&#xff1a; openssl rand 16>enc.key 2、目的是生成一个enc.key文件 生成iv openssl rand -hex 16 生成后记录下来这个字符串 3、新建一个enc.keyinfo文件&#xff0c;内容有如下三行&#xff1a; key URIenc.key的路径&#xff0c;…
阅读更多...
VMware虚拟机走主机代理上网

VMware虚拟机走主机代理上网

&#x1f310; VMware虚拟机走主机代理上网&#x1f511; 你是否也遇到过这样的困境&#xff1f;&#x1f4a1; 在虚拟机中测试某个项目&#xff0c;却因为网络限制而寸步难行。今天&#xff0c;就让我们一起探索如何让VMware虚拟机轻松调用本机的代理上网工具&#xff0c;开启…
阅读更多...
Cursor入门教程-JetBrains过度向

Cursor入门教程-JetBrains过度向

Cursor使用笔记 **前置&#xff1a;**之前博主使用的是JetBrains的IDE&#xff0c;VSCode使用比较少&#xff0c;所以会尽量朝着JetBrains的使用习惯及样式去调整。 一、设置语言为中文 如果刚上手Cursor&#xff0c;那么肯定对Cursor中的众多选项配置项不熟悉&#xff0c;这…
阅读更多...
Mac OS系统下kernel_task占用大量CPU资源导致系统卡顿

Mac OS系统下kernel_task占用大量CPU资源导致系统卡顿

CPU负载突然飙升&#xff0c;如截图&#xff1a; 根本原因&#xff0c;大家从各种博主上已知晓&#xff0c;现在提供自己的解决办法&#xff0c;亲测有效 一、设置开机自动禁用温度管理守护进程 1.创建脚本文件 mkdir -p ~/Scripts touch ~/Scripts/disable_thermald.sh …
阅读更多...
宝塔面板部署 Dify-latest 最新版本

宝塔面板部署 Dify-latest 最新版本

一、本地部署Windows 版本宝塔面板 宝塔面板是一款简单容易上手使用的服务器管理软件&#xff0c;它可以帮助用户方便地管理服务器以及部署网站等。 &#xff08;1&#xff09;在宝塔面板官网的下载界面&#xff0c;选择 windows 版本下载。点此进入下载 &#xff08;2&#x…
阅读更多...
《TCP/IP网络编程》学习笔记 | Chapter 24：制作 HTTP 服务器端

《TCP/IP网络编程》学习笔记 | Chapter 24：制作 HTTP 服务器端

《TCP/IP网络编程》学习笔记 | Chapter 24&#xff1a;制作 HTTP 服务器端 《TCP/IP网络编程》学习笔记 | Chapter 24&#xff1a;制作 HTTP 服务器端HTTP 概要理解 Web 服务器端无状态的 Stateless 协议请求消息&#xff08;Request Message&#xff09;的结构响应消息&#x…
阅读更多...
Origin将双Y轴柱状图升级为双向分组柱状图

Origin将双Y轴柱状图升级为双向分组柱状图

当变量同时存在两个数值时的可视化时&#xff0c;往往会想到用双Y轴柱状图来表达我们的数据。 双Y轴柱状图是一种在同一图表中使用左右两个Y轴的可视化形式&#xff0c;常用于展示两组量纲不同或数值范围差异较大的数据。 双向分组柱状图是一种结合了双向柱状图和分组柱状图的…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023