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

news2024/11/24 10:37:20

前言

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/2246610.html

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

相关文章

UE5材质篇5 简易水面

UE5材质篇5 简易水面

不得不说&#xff0c;UE5里搞一个水面实在是相比要自己写各种反射来说太友好了&#xff0c;就主要是开启一堆开关&#xff0c;lumen相关的&#xff0c;然后稍微连一些蓝图就几乎有了 这里要改一个shading model&#xff0c;要这个 然后要增加一个这个node 并且不需要连接base …
阅读更多...
计算机网络 实验六 组网实验

计算机网络 实验六 组网实验

一、实验目的 通过构造不同的网络拓扑结构图并进行验证&#xff0c;理解分组转发、网络通信及路由选择的原理&#xff0c;理解交换机和路由器在子网划分中的不同作用。 二、实验原理 组网实验是指将多个计算机通过网络连接起来&#xff0c;实现数据的共享和通信。 组网需要考虑…
阅读更多...
LeetCode 力扣 热题 100道（八）相交链表（C++）

LeetCode 力扣 热题 100道（八）相交链表（C++）

给你两个单链表的头节点 headA 和 headB &#xff0c;请你找出并返回两个单链表相交的起始节点。如果两个链表不存在相交节点&#xff0c;返回 null 。 图示两个链表在节点 c1 开始相交&#xff1a; 题目数据 保证 整个链式结构中不存在环。 注意&#xff0c;函数返回结果后&…
阅读更多...
Spring |（四）IoC/DI配置管理第三方bean

Spring |（四）IoC/DI配置管理第三方bean

文章目录 &#x1f4da;数据源对象管理&#x1f407;环境准备&#x1f407;实现Druid管理&#x1f407;实现C3P0管理 &#x1f4da;加载properties文件&#x1f407;第三方bean属性优化&#x1f407;读取单个属性 学习来源&#xff1a;黑马程序员SSM框架教程_SpringSpringMVCMa…
阅读更多...
鸿蒙NEXT开发案例：随机数生成

鸿蒙NEXT开发案例：随机数生成

【引言】 本项目是一个简单的随机数生成器应用&#xff0c;用户可以通过设置随机数的范围和个数&#xff0c;并选择是否允许生成重复的随机数&#xff0c;来生成所需的随机数列表。生成的结果可以通过点击“复制”按钮复制到剪贴板。 【环境准备】 • 操作系统&#xff1a;W…
阅读更多...
[译]Elasticsearch Sequence ID实现思路及用途

[译]Elasticsearch Sequence ID实现思路及用途

原文地址:https://www.elastic.co/blog/elasticsearch-sequence-ids-6-0 如果 几年前&#xff0c;在Elastic&#xff0c;我们问自己一个"如果"问题&#xff0c;我们知道这将带来有趣的见解&#xff1a; "如果我们在Elasticsearch中对索引操作进行全面排序会怎样…
阅读更多...
小米14升级澎湃OS 2.0.6.VNCCNXM 记录

小米14升级澎湃OS 2.0.6.VNCCNXM 记录

简介 11.23 小米14凌晨推送了澎湃2.0，还真是11月压轴的，不是内测申请的。 btw，什么时候才能有红米耳机连接的弹窗啊？？为什么13都有，但是14没有？ 系统更新推送 版本介绍 1.0.47 更新到 2.0.6.VNCCNXM，记录一些界面变化，应用问题和内存情况。 澎湃OS 2 更新 - 功能介…
阅读更多...
【单点知识】基于PyTorch进行模型部署

【单点知识】基于PyTorch进行模型部署

文章目录 0. 前言1. 模型导出1.1 TorchScript1.1.1 使用 torch.jit.trace1.1.2 使用 torch.jit.script 1.2 ONNX1.2.1 导出为 ONNX 格式 1.3 导出后的模型加载1.3.1 加载 TorchScript 模型1.3.2 加载 ONNX 模型 2. 模型优化2.1 模型量化2.2 模型剪枝 3. 服务化部署3.1 Flask 部…
阅读更多...
FreeRTOS——互斥信号量

FreeRTOS——互斥信号量

一、为什么需要互斥信号量 前面的学习中&#xff1a; 调度锁、临界段不可避免的破坏了实时性&#xff0c;还有二值信号量存在这样的隐患——“优先级翻转” 优先级翻转 简单来说&#xff0c;就是由于信号量被低优先级任务占用&#xff0c;即使遇到高优先级任务&#xff0c;它…
阅读更多...
前端-react(class组件和Hooks)

前端-react(class组件和Hooks)

文章主要以Hooks为主,部分涉及class组件方法进行对比 一.了解react 1.管理组件的方式 在React中&#xff0c;有两种主要的方式来管理组件的状态和生命周期&#xff1a;Class 组件和 Hooks。 Class 组件&#xff1a; Class 组件是 React 最早引入的方式&#xff0c;它是基于…
阅读更多...
Ngrok实现内网穿透（Windows）

Ngrok实现内网穿透（Windows）

Ngrok实现内网穿透&#xff08;Windows&#xff09; 什么是内网穿透&#xff0c;内网穿透有什么用 内网穿透&#xff08;NAT traversal&#xff09;是一种技术手段&#xff0c;使得位于内网或防火墙后面的设备能够通过外网访问。例如&#xff0c;如果你的计算机、服务器等设备…
阅读更多...
如何使用Jest测试你的React组件

如何使用Jest测试你的React组件

在本文中&#xff0c;我们将了解如何使用Jest&#xff08;Facebook 维护的一个测试框架&#xff09;来测试我们的React组件。我们将首先了解如何在纯 JavaScript 函数上使用 Jest&#xff0c;然后再了解它提供的一些开箱即用的功能&#xff0c;这些功能专门用于使测试 React 应…
阅读更多...
力扣 三数之和-15

力扣 三数之和-15

三数之和-15 class Solution { public:vector<vector<int>> threeSum(vector<int>& nums) {int temp 0;//定义一个二维vector数组vector<vector<int>> ans;int n nums.size();//对nums数组进行排序sort(nums.begin(), nums.end());//固定…
阅读更多...
深度学习每周学习总结J6（ResNeXt-50 算法实战与解析 - 猴痘识别）

深度学习每周学习总结J6（ResNeXt-50 算法实战与解析 - 猴痘识别）

&#x1f368; 本文为&#x1f517;365天深度学习训练营 中的学习记录博客&#x1f356; 原作者&#xff1a;K同学啊 | 接辅导、项目定制 目录 0. 总结ResNeXt基本介绍 1. 设置GPU2. 导入数据及处理部分3. 划分数据集4. 模型构建部分5. 设置超参数&#xff1a;定义损失函数&…
阅读更多...
Transformer架构笔记

Transformer架构笔记

Attention is All You Need. 3.Model Architecture 3.1 整体架构如图 3.2 Encoder与Decoder Encoder&#xff1a;由 N 6 N6 N6个相同的Block/Layer堆叠而成。每个Block有两个子层sub-layer&#xff1a;多头注意力和MLP&#xff08;FFN&#xff0c;前馈神经网络&#xff09;&…
阅读更多...
【大数据学习 | Spark-Core】spark-shell开发

【大数据学习 | Spark-Core】spark-shell开发

spark的代码分为两种 本地代码在driver端直接解析执行没有后续 集群代码&#xff0c;会在driver端进行解析&#xff0c;然后让多个机器进行集群形式的执行计算 spark-shell --master spark://nn1:7077 --executor-cores 2 --executor-memory 2G sc.textFile("/home/ha…
阅读更多...
增量预训练（Pretrain）样本拼接篇

增量预训练（Pretrain）样本拼接篇

增量预训练&#xff08;Pretrain&#xff09;样本拼接篇 一、Pretrain阶段&#xff0c;为什么需要拼接拼接&#xff1f; 为了提高pretrain效率、拓展LLM最大长度&#xff0c;随机将若干条短文本进行拼接是pretrain阶段常见手段。 二、有哪些拼接方式&#xff1f; 拼接方式一…
阅读更多...
【AI最前线】DP双像素sensor相关的AI算法全集：深度估计、图像去模糊去雨去雾恢复、图像重建、自动对焦

【AI最前线】DP双像素sensor相关的AI算法全集：深度估计、图像去模糊去雨去雾恢复、图像重建、自动对焦

Dual Pixel 简介 双像素是成像系统的感光元器件中单帧同时生成的图像&#xff1a;通过双像素可以实现&#xff1a;深度估计、图像去模糊去雨去雾恢复、图像重建 成像原理来源如上&#xff0c;也有遮罩等方式的pd生成&#xff0c;如图双像素视图可以看到光圈的不同一半&#x…
阅读更多...
从零开始-VitePress 构建个人博客上传GitHub自动构建访问

从零开始-VitePress 构建个人博客上传GitHub自动构建访问

从零开始-VitePress 构建个人博客上传GitHub自动构建访问 序言 VitePress 官网&#xff1a;VitePress 中文版 1. 什么是 VitePress VitePress 是一个静态站点生成器 (SSG)&#xff0c;专为构建快速、以内容为中心的站点而设计。简而言之&#xff0c;VitePress 获取用 Markdown…
阅读更多...
使用uniapp编写APP的文件上传

使用uniapp编写APP的文件上传

使用uniapp插件文件选择、文件上传组件&#xff08;图片&#xff0c;视频&#xff0c;文件等&#xff09; - DCloud 插件市场 实用效果&#xff1a; 缺陷是只能一个一个单独上传
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023