使用 前端技术 创建 QR 码生成器 API1

前言

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.rhkb.cn/news/478754.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

vxe-modal VxeUI 窗口组件弹窗多窗口模式

vxe-modal VxeUI 窗口组件弹窗多窗口模式

VxeUI 实现在 vue 中使用弹窗组件&#xff0c;弹窗多个窗口可叠加&#xff0c;实现多实例的窗口组件。 npm install vxe-pc-ui4.3.6// ...import VxeUI from vxe-pc-uiimport vxe-pc-ui/lib/style.css// ...createApp(App).use(VxeUI).mount(#app)// ...官网&#xff1a;https…
阅读更多...
无人机探测：光电侦测核心技术算法详解！

无人机探测：光电侦测核心技术算法详解！

核心技术 双光谱探测跟踪&#xff1a; 可见光成像技术&#xff1a;利用无人机表面反射的自然光或主动光源照射下的反射光&#xff0c;通过高灵敏度相机捕捉图像。该技术适用于日间晴朗天气下的无人机探测&#xff0c;具有直观、易于识别目标的特点。 红外成像技术&#xff1…
阅读更多...
【ArcGISPro】Sentinel-2数据处理

【ArcGISPro】Sentinel-2数据处理

错误 默认拉进去只组织了4个波段，但是实际有12个波段 解决方案 数据下载 Sentinel-2 数据下载-CSDN博客 数据处理 数据查看 创建镶嵌数据集 在数据管理工具箱中找到创建镶嵌数据集
阅读更多...
现代密码学

现代密码学

概论 计算机安全的最核心三个关键目标&#xff08;指标&#xff09;/为&#xff1a;保密性 Confidentiality、完整性 Integrity、可用性 Availability &#xff0c;三者称为 CIA三元组 数据保密性&#xff1a;确保隐私或是秘密信息不向非授权者泄漏&#xff0c;也不被非授权者使…
阅读更多...
Python绘制太极八卦

Python绘制太极八卦

文章目录 系列目录写在前面技术需求1. 图形绘制库的支持2. 图形绘制功能3. 参数化设计4. 绘制控制5. 数据处理6. 用户界面 完整代码代码分析1. rset() 函数2. offset() 函数3. taiji() 函数4. bagua() 函数5. 绘制过程6. 技术亮点 写在后面 系列目录 序号直达链接爱心系列1Pyth…
阅读更多...
uniapp vue2项目迁移vue3项目

uniapp vue2项目迁移vue3项目

uniapp vue2项目迁移vue3项目&#xff0c;必须适配的部分 一、main.js 创建应用实例 // 之前 - Vue 2 import Vue from vue import App from ./App Vue.config.productionTip false // vue3 不再需要 App.mpType app // vue3 不再需要 const app new Vue({ ...App }) …
阅读更多...
卷积神经网络学习记录

卷积神经网络学习记录

目录 神经网络基础定义&#xff1a; 基本组成部分 工作流程 卷积层&#xff08;卷积定义&#xff09;【CONV】&#xff1a; 卷积层&#xff08;Convolutional Layer&#xff09; 特征提取&#xff1a;卷积层的主要作用是通过卷积核&#xff08;或滤波器&#xff09;运算提…
阅读更多...
element-ui 中el-calendar 日历插件获取显示的第一天和最后一天【原创】

element-ui 中el-calendar 日历插件获取显示的第一天和最后一天【原创】

需要获取el-calendar 日历组件上的第1天和最后一天。可以通过document.querySelector()方法进行获取dom元素中的值&#xff0c;这样避免计算问题。 获取的过程中主要有两个难点&#xff0c;第1个是处理上1月和下1月的数据&#xff0c;第2个是跨年的数据。 直接贴代码&#xff…
阅读更多...
一个高度可扩展的 Golang ORM 库【GORM】

一个高度可扩展的 Golang ORM 库【GORM】

GORM 是一个功能强大的 Golang 对象关系映射&#xff08;ORM&#xff09;库&#xff0c;它提供了简洁的接口和全面的功能&#xff0c;帮助开发者更方便地操作数据库。 1. 完整的 ORM 功能 • 支持常见的关系模型&#xff1a; • Has One&#xff08;一对一&#xff09; • …
阅读更多...
【大数据学习 | Spark-Core】Spark的改变分区的算子

【大数据学习 | Spark-Core】Spark的改变分区的算子

当分区由多变少时&#xff0c;不需要shuffle&#xff0c;也就是父RDD与子RDD之间是窄依赖。 当分区由少变多时&#xff0c;是需要shuffle的。 但极端情况下&#xff08;1000个分区变成1个分区)&#xff0c;这时如果将shuffle设置为false&#xff0c;父子RDD是窄依赖关系&…
阅读更多...
IDEA2024如何创建Web项目以及配置Tomcat

IDEA2024如何创建Web项目以及配置Tomcat

在Web项目的开发过程中&#xff0c;Tomcat作为一款开源的Servlet容器&#xff0c;扮演着至关重要的角色。它不仅能够提供稳定的运行环境&#xff0c;还支持多种Java EE规范&#xff0c;为开发者提供了丰富的功能支持。因此&#xff0c;正确配置Tomcat服务器对于确保Web项目的顺…
阅读更多...
【通俗理解】隐变量的变分分布探索——从公式到应用

【通俗理解】隐变量的变分分布探索——从公式到应用

【通俗理解】隐变量的变分分布探索——从公式到应用 关键词提炼 #隐变量 #变分分布 #概率模型 #公式推导 #期望最大化 #机器学习 #变分贝叶斯 #隐马尔可夫模型 第一节&#xff1a;隐变量的变分分布的类比与核心概念【尽可能通俗】 隐变量的变分分布就像是一场“捉迷藏”游戏…
阅读更多...
亚信安全与飞书达成深度合作

亚信安全与飞书达成深度合作

近日&#xff0c;亚信安全联合飞书举办的“走近先进”系列活动正式走进亚信。活动以“安全护航信息化 共筑数字未来路”为主题&#xff0c;吸引了众多数字化转型前沿企业的近百位领导参会。作为“走近先进”系列的第二场活动&#xff0c;本场活动更加深入挖掘了数字化转型的基础…
阅读更多...
【Vue】 npm install amap-js-api-loader指南

【Vue】 npm install amap-js-api-loader指南

前言 项目中的地图模块突然打不开了 正文 版本太低了&#xff0c;而且Vue项目就应该正经走项目流程啊喂&#xff01; npm i amap/amap-jsapi-loader --save 官方说这样执行完&#xff0c;就这结束啦&#xff01;它结束了&#xff0c;我还没有&#xff0c;不然不可能记录这篇文…
阅读更多...
使用ENSP实现默认路由

使用ENSP实现默认路由

一、项目拓扑 二、项目实现 1.路由器AR1配置 进入系统试图 sys将路由器命名为R1 sysname R1关闭信息中心 undo info-center enable 进入g0/0/0接口 int g0/0/0将g0/0/0接口IP地址配置为2.2.2.1/24 ip address 2.2.2.1 24进入g0/0/1接口 int g0/0/1将g0/0/1接口IP地址配置为1.…
阅读更多...
Ansible--自动化运维工具

Ansible--自动化运维工具

Ansible自动化运维工具介绍 1.Ansible介绍 Ansible是一款自动化运维工具&#xff0c;基于Python开发&#xff0c;集合了众多运维工具&#xff08;puppet、cfengine、chef、func、fabric&#xff09;的优点&#xff0c;实现了批量系统配置、批量程序部署、批量运行命令等功能。…
阅读更多...
WSL安装不同版本ubuntu（已有ubuntu20.04，再装ubuntu18.04）

WSL安装不同版本ubuntu（已有ubuntu20.04，再装ubuntu18.04）

参考&#xff1a; 如何在 WSL 中删除指定版本的 Ubuntu&#xff08;以删除 Ubuntu 22.04 为例&#xff09;_wsl卸载某个-CSDN博客 已有ubuntu20.04&#xff0c;现在再安装一个ubuntu18.04 直接参考下面我写的链接的第四步&#xff0c;前面的步骤都不需要再做了 Win11安装WSL…
阅读更多...
深度学习：GPT-1的MindSpore实践

深度学习：GPT-1的MindSpore实践

GPT-1简介 GPT-1&#xff08;Generative Pre-trained Transformer&#xff09;是2018年由Open AI提出的一个结合预训练和微调的用于解决文本理解和文本生成任务的模型。它的基础是Transformer架构&#xff0c;具有如下创新点&#xff1a; NLP领域的迁移学习&#xff1a;通过最…
阅读更多...
websocket是什么？

websocket是什么？

一、定义 Websocket是一种在单个TCP连接上进行全双工通信的协议&#xff0c;它允许服务器主动向客户端推送数据&#xff0c;而不需要客户端不断的轮询服务器来获取数据 与http协议不同&#xff0c;http是一种无状态的&#xff0c;请求&#xff0c;响应模式的协议(单向通信)&a…
阅读更多...
1-golang_org_x_crypto_bcrypt测试 --go开源库测试

1-golang_org_x_crypto_bcrypt测试 --go开源库测试

1.实例测试 package mainimport ("fmt""golang.org/x/crypto/bcrypt" )func main() {password : []byte("mysecretpassword")hashedPassword, err : bcrypt.GenerateFromPassword(password, bcrypt.DefaultCost)if err ! nil {fmt.Println(err)…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023