前言
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
- 執行以下命令來運行 NestJS 應用程序：
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數據
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 表格控件在報表勾稽分析領域的應用場景解析
![使用異步特征引發的錯誤error[E0195]: lifetime parameters or bounds on method `before_save`](http://pic.xiahunao.cn/使用異步特征引發的錯誤error[E0195]: lifetime parameters or bounds on method `before_save`)
