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

前言
QR码（Quick Response Code）是一种二维码，于1994年开发。它能快速存储和辨认数据，包罗好坏方块图案，常用于扫描获取信息。QR码具有高容错性和快速读取的优点，广泛应用于广告、付出、物流等领域。通过扫描QR码，用户可以快速获取信息和实现便捷操作，为当代生存带来便利。在本教程中，小编将为大家探讨怎样使用 NestJS 和 qrcode.js 构建 QR 二维码，并将其放到Excel中。
环境准备
在开始之前，请确保您具备以下工具和知识：

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

第 1 步：设置 NestJS 项目
创建一个新的 NestJS 项目开始。打开终端并实行以下下令：

1. # Create a new NestJS project
2. npx @nestjs/cli new qr-code-generator-api
4. # Move into the project directory
5. cd qr-code-generator-api

复制代码

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

1. npm install qrcode

复制代码

第 3 步：生成二维码
现在小编已经设置了 NestJS 和qrcode.js，让小编创建一个 QR 码生成service。在 NestJS 中，service是负责处置惩罚业务逻辑的类。小编将创建一个 QrCodeService ，并使用qrcode.js生成二维码的代码。
首先，创建一个在 src 文件夹中定名 qr-code.service.ts 的新文件，并添加以下代码：

1. // src/qr-code.service.ts
2. import { Injectable } from '@nestjs/common';
3. import * as qrcode from 'qrcode';
5. @Injectable()
6. export class QrCodeService {
7.   async generateQrCode(data: string): Promise<string> {
8.     try {
9.       const qrCodeDataURL = await qrcode.toDataURL(data);
10.       return qrCodeDataURL;
11.     } catch (error) {
12.       throw new Error('Failed to generate QR code.');
13.     }
14.   }
15. }

复制代码

在上面的代码中，小编创建了一个 QrCodeService 具有单个方法的 generateQrCode ，此方法将字符串 data 作为输入，并返回一个 Promise，该 Promise 解析为表示生成的 QR 码的数据 URL。
第 4 步：创建二维码Controller
在 NestJS 中，controller处置惩罚传入的请求并与服务交互以提供响应。因此小编创建一个 QR 码 controller来处置惩罚 QR 码的生成。创建 src 文件夹中定名 qr-code.controller.ts 的新文件，并添加以下代码：

1. // src/qr-code.controller.ts
2. import { Controller, Get, Query } from '@nestjs/common';
3. import { QrCodeService } from './qr-code.service';
5. @Controller('qr-code')
6. export class QrCodeController {
7.   constructor(private readonly qrCodeService: QrCodeService) {}
9.   @Get()
10.   async generateQrCode(@Query('data') data: string) {
11.     const qrCodeDataURL = await this.qrCodeService.generateQrCode(data);
12.     return `<img src="${qrCodeDataURL}" alt="QR Code" />`;
13.   }
14. }
15. @Controller('qr-code-data')
16. export class QrDataCodeController {
17.   constructor(private readonly qrCodeService: QrCodeService) {}
19.   @Get()
20.   async generateQrCode(@Query('data') data: string) {
21.     const qrCodeDataURL = await this.qrCodeService.generateQrCode(data);
22.     return qrCodeDataURL;
23.   }
24. }

复制代码

在上面的代码中，小编在路由 /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 的新文件，并添加以下代码：

1. // src/qr-code.module.ts
2. import { Module } from '@nestjs/common';
3. import { QrCodeController, QrDataCodeController } from "./qr-code.controller";
4. import { QrCodeService } from './qr-code.service';
6. @Module({
7.   controllers: [QrCodeController,QrDataCodeController],
8.   providers: [QrCodeService],
9. })
10. export class QrCodeModule {}

复制代码

在上面的代码中，小编定义了一个 QrCodeModule 导入 QrCodeController,QrDataCodeController 和 QrCodeService 的 .该模块将负责提供二维码生成功能。
第 6 步：修改main.ts
现在小编已经创建了module，让小编引导 NestJS 应用步伐并包罗 QrCodeModule。打开文件 src/main.ts 并按如下方式举行修改：

1. // src/main.ts
2. import { NestFactory } from '@nestjs/core';
3. import { QrCodeModule } from './qr-code.module';
5. async function bootstrap() {
6.   const app = await NestFactory.create(QrCodeModule);
7.   await app.listen(3000);
8. }
9. bootstrap();

复制代码

在上面的代码中，小编已导入 QrCodeModule 并将其传递给 NestFactory.create ，表明小编的应用步伐将使用 QrCodeModule .应用步伐将侦听端口 3000(默认为3000，也可以修改端口）。
第 7 步：测试 QR 码生成器 API

• 实行以下下令来运行 NestJS 应用步伐：
  

1. npm run start

复制代码

• 打开浏览器，在地址栏中输入http://localhost:3000/qr-code?data=Hello%20Spreadjs
  

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

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

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

• 打开浏览器，在地址栏中输入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数据

1. var xhr = new XMLHttpRequest();
2. xhr.open('GET', 'http://localhost:3000/qr-code-data?data=Hello%20Spreadjs', true);
4. xhr.onload = function (e) {
5.     if (this.status == 200) {
6.         var base64Data = this.response;
8.     }
9. };
11. xhr.send();

复制代码

第2步：获取SpreadJS对象
接下来获取SpreadJS对象

1. <!DOCTYPE html>
2. <html lang="en">
4. <head>
5.     <meta charset="utf-8"/>
6.     <!-- 禁用IE兼容视图 -->
7.     <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
8.     <meta name="spreadjs culture" content="zh-cn"/>
9.     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" , user-scalable=no"/>
10.     <title>SpreadJS demo</title>
12.     <link href="http://cdn.grapecity.com/spreadjs/hosted/css/gc.spread.sheets.excel2013white.17.0.0.css"
13.           rel="stylesheet" type="text/css"/>
14.     <script src="http://cdn.grapecity.com/spreadjs/hosted/scripts/gc.spread.sheets.all.17.0.0.min.js"></script>
15.     <script src="http://cdn.grapecity.com/spreadjs/hosted/scripts/plugins/gc.spread.sheets.shapes.17.0.0.min.js"></script>
16. </head>
18. <body>
19. <div>
20.     <div id="ss" class="sample-spreadsheets" style="height: 500px;width: 90%;"></div>
21. </div>
24. <script type="text/javascript">
25.     window.onload = function () {
26.         var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), {sheetCount: 2});  
27.     }
29. </script>
30. </body>
32. </html>

复制代码

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

第3步：插入图片
接下来 我们添加图片

1. var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), {sheetCount: 2});
2. let activeSheet = spread.getSheet(0);
3. activeSheet.setRowHeight(0, 100);
4. activeSheet.setColumnWidth(0, 100)
7. var xhr = new XMLHttpRequest();
8. xhr.open('GET', 'http://localhost:3000/qr-code-data?data=Hello%20Spreadjs', true);
10. xhr.onload = function (e) {
11.     if (this.status == 200) {
12.         var base64Data = this.response;
13.         var pic = activeSheet.shapes.addPictureShape("Picture 1", base64Data, 0, 0, 100, 100);
14.         pic.startRow(0);
15.         pic.startColumn(0);
17.         pic.width(100)
18.         pic.height(100)
20.     }
21. };
22. xhr.send();

复制代码

结果如下：

如许子就实现了在电子表格中，插入一个二维码图片的结果。
怎么，上述过程太复杂，没有关系，SpreadJS也支持直接创建二维码。
前端表格组件实现二维码公式
第1步：打开SpreadJS
打开刚刚的页面，大概点击这里重新打开SpreadJS。
第2步：实现二维码
打开SpreadJS之后，新建一个Sheet页，然后把想要展示在二维码上的信息写下来，如下图所示：

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

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

复制代码

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

扫描该二维码，手机就会显示“Hello World”字符串，如许就完成了一个将二维码嵌到Excel中的小Demo。(更多样式的二维码可以参考这个Demo)
除此之外，还可以用代码的方式给二维码赋值：

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

复制代码

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

附上完整的代码：

1. <!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,我是二维码")');
2.         sheet.setRowHeight(0,200)        sheet.setColumnWidth(0,200)    }</script></body></html>

复制代码

总结
在本文中，小编介绍了怎样使用 NestJS 和 qrcode.js 创建 QR 二维码，并借助了纯前端表格组件SpreadJS来实现将 QR 二维码中显示在Excel中，假如您想了解更多关于SpreadJS的信息，欢迎点击这里查看。
扩展链接：
【干货放送】财务报表勾稽分析要点，一文读尽！
  为什么你的财务报表不出色？推荐你了解这四个筹划要点和！
纯前端类 Excel 表格控件在报表勾稽分析领域的应用场景解析

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。