使用 前端技术 创建 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 表格控件在报表勾稽分析领域的应用场景解析

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

Hash table类算法【leetcode】

Hash table类算法【leetcode】

哈希表中关键码就是数组的索引下标&#xff0c;然后通过下标直接访问数组中的元素 那么哈希表能解决什么问题呢&#xff0c;一般哈希表都是用来快速判断一个元素是否出现集合里。 例如要查询一个名字是否在这所学校里。 要枚举的话时间复杂度是O(n)&#xff0c;但如果使用哈希…
阅读更多...
UI自动化测试中公认最佳的设计模式-POM

UI自动化测试中公认最佳的设计模式-POM

一、概念 什么是POM&#xff1f; POM是PageObjectModule&#xff08;页面对象模式&#xff09;的缩写&#xff0c;其目的是为了Web UI测试创建对象库。在这种模式下&#xff0c;应用涉及的每一个页面应该定义为一个单独的类。类中应该包含此页面上的页面元素对象和处理这些元…
阅读更多...
Elasticsearch客户端在和集群连接时，如何选择特定的节点执行请求的？

Elasticsearch客户端在和集群连接时，如何选择特定的节点执行请求的？

大家好&#xff0c;我是锋哥。今天分享关于【Elasticsearch客户端在和集群连接时&#xff0c;如何选择特定的节点执行请求的&#xff1f;】面试题。希望对大家有帮助&#xff1b; Elasticsearch客户端在和集群连接时&#xff0c;如何选择特定的节点执行请求的&#xff1f; 100…
阅读更多...
Python数据结构day2

Python数据结构day2

一、链表 1.1目的 解决顺序表存储数据有上限&#xff0c;并且插入和删除操作效率低的问题 1.2概念 链表&#xff1a;链式存储的线性表&#xff0c;使用随机物理内存存储逻辑上连续的数据 链表的组成&#xff1a;由一个个结点组成 结点&#xff1a;由数据域和链接域组成&a…
阅读更多...
【经纬度转地址实现方案】根据给定的经纬度，查询对应城市，通过建立经纬度geohash-行政区映射表，实现快速查询

【经纬度转地址实现方案】根据给定的经纬度，查询对应城市，通过建立经纬度geohash-行政区映射表，实现快速查询

文章目录 背景目标方案设计&#xff1a;表结构设计&#xff1a;方案实现1.高德API获取行政区边界点2.外包矩形中心作为中心点3.坐标点经纬度转换为geohash 测试建表语句测试造数测试用例测试结果 总结总结 背景 最近遇到一个需求&#xff0c;需要查询给定的经纬度坐标点&#…
阅读更多...
解锁业务成功：大数据和 AI 如何协作以释放战略洞察

解锁业务成功：大数据和 AI 如何协作以释放战略洞察

在当今这个数据主导的时代&#xff0c;大数据与AI的协同作用对于寻求竞争优势的组织而言愈发关键。大数据以其庞大的数据量、多样化的数据类型以及高速的数据生成能力&#xff0c;为AI算法提供了丰富的原材料&#xff0c;助力其挖掘出有价值的洞见&#xff0c;推动明智决策的制…
阅读更多...
LINUX系统编程之——环境变量

LINUX系统编程之——环境变量

目录 环境变量 1、基本概念 2、查看环境变量的方法 三、查看PATH环境变量的內容 1&#xff09;不带路径也能运行的自己的程序 a、将自己的程序直接添加到PATH指定的路径下 b、将程序所在的路径添加到PATH环境中 四、环境变量与本地变量 1、本地变量创建 2、环境变量创…
阅读更多...
QT:QListView实现table自定义代理

QT:QListView实现table自定义代理

介绍 QListVIew有两种切换形式&#xff0c;QListView::IconMode和QListView::ListMode&#xff0c;通过setViewMode()进行设置切换。因为QListView可以像QTreeView一样显示树形结构&#xff0c;也可以分成多列。这次目标是将ListView的ListMode形态显示为table。使用代理&…
阅读更多...
IDEA2023 创建SpringBoot项目（一）

IDEA2023 创建SpringBoot项目（一）

一、Spring Boot是由Pivotal团队提供的全新框架&#xff0c;其设计目的是用来简化新Spring应用的初始搭建以及开发过程。该框架使用了特定的方式来进行配置&#xff0c;从而使开发人员不再需要定义样板化的配置。 二、快速开发 1.打开IDEA选择 File->New->Project 2、…
阅读更多...
初级数据结构——树

初级数据结构——树

目录 前言一、树的基本概念二、二叉树三、树的表示方法四、树的遍历树的代码模版五、经典例题[2236. 判断根结点是否等于子结点之和](https://leetcode.cn/problems/root-equals-sum-of-children/description/)代码题解 六、总结结语 前言 从这一期开始数据结构开始有那么一点…
阅读更多...
Unity 编辑器下 Android 平台 Addressable 加载模型粉红色，类似材质丢失

Unity 编辑器下 Android 平台 Addressable 加载模型粉红色，类似材质丢失

Unity 编辑器下 Android 平台 Addressable 加载模型粉红色&#xff0c;类似材质丢失 Addressable Play Mode Script加载模式 选择 Use Existiing Build 1.Unity 切换到 PC 平台&#xff0c;执行 Addressable Build 运行&#xff0c;加载 bundle 内的预制体 显示正常 2.Unit…
阅读更多...
视频去重工具

视频去重工具

视频去重工具 工具截图 下载 回复&#xff1a;“0028”&#xff0c;即可自动获取
阅读更多...
javascrip页面交互

javascrip页面交互

元素的三大系列 offset系列 offset初相识 offset系列属性 作用 element.offsetParent 返回作为该元素带有定位的父级元素&#xff0c;如果父级没有定位&#xff0c;则返回body element.offsetTop 返回元素相对于有定位父元素上方的偏移量 element.offsetLeft 返回元素…
阅读更多...
win10中使用ffmpeg和MediaMTX 推流rtsp视频

win10中使用ffmpeg和MediaMTX 推流rtsp视频

在win10上测试下ffmpeg推流rtsp视频&#xff0c;需要同时用到流媒体服务器MediaMTX 。ffmpeg推流到流媒体服务器MediaMTX &#xff0c;其他客户端从流媒体服务器拉流。 步骤如下&#xff1a; 1 下载MediaMTX github: Release v1.9.3 bluenviron/mediamtx GitHub​​​​​…
阅读更多...
el-select 和el-tree二次封装

el-select 和el-tree二次封装

前言 本文章是本人在开发过程中&#xff0c;遇到使用树形数据&#xff0c;动态单选或多选的需求&#xff0c;element中没有这种组件&#xff0c;故自己封装一个&#xff0c;欢迎多多指教 开发环境&#xff1a;element-UI、vue2 组件效果 单选 多选 组件引用 <treeselec…
阅读更多...
STM32-- keil常见报错与解决办法

STM32-- keil常见报错与解决办法

调试问题 1. keil在线调试需要点击好几次运行才可以运行&#xff0c;要是直接下载程序直接就不运行。 解决&#xff1a;target里面的use microlib要勾选&#xff0c;因为使用了printf。 keil在线调试STM32&#xff0c;点三次运行才能跑到main的问题解决。 keil在线调试STM32…
阅读更多...
RNN简单理解；为什么出现Transformer：传统RNN的问题；Attention（注意力机制）和Self-Attention（自注意力机制）区别；

RNN简单理解；为什么出现Transformer：传统RNN的问题；Attention（注意力机制）和Self-Attention（自注意力机制）区别；

目录 RNN简单理解 RNN n to n Transformer N to M LSTM 为什么出现Transformer：传统RNN的问题 信息丢失的后果 Rnn是顺序执行的效率不高：顺序执行 Attention（注意力机制）和Self-Attention（自注意力机制）区别 一、计算对象不同 二、应用场景不同 三、功能差异…
阅读更多...
51c深度学习~合集8

51c深度学习~合集8

我自己的原文哦~ https://blog.51cto.com/whaosoft/12491632 #patchmix 近期中南大学的几位研究者做了一项对比学习方面的工作——「Inter-Instance Similarity Modeling for Contrastive Learning」&#xff0c;主要用于解决现有对比学习方法在训练过程中忽略样本间相似关系…
阅读更多...
Kafka：分布式消息系统的核心原理与安装部署

Kafka：分布式消息系统的核心原理与安装部署

Kafka&#xff1a;分布式消息系统的核心原理与安装部署-CSDN博客 自定义 Kafka 脚本 kf-use.sh 的解析与功能与应用示例-CSDN博客 Kafka 生产者全面解析&#xff1a;从基础原理到高级实践-CSDN博客 Kafka 生产者优化与数据处理经验-CSDN博客 Kafka 工作流程解析&#xff1a…
阅读更多...
刷算法题时遇到的一些不常用但好用的API

刷算法题时遇到的一些不常用但好用的API

1.需要统计数据&#xff0c;同时希望数据是排序的&#xff0c;可以使用TreeMap结构。 2.按照ASCII&#xff0c;A的ASCII值比a小。而字典排序底层也有基于ASCII&#xff0c;因此无论是字典排序还是ASCII排序&#xff0c;A都在a前面。 3.使用DecimalFormat尝试将浮点数四舍五入…
阅读更多...
最新文章

Copyright @ 2022~2023