藉助前端技術構建QR碼生成器API

前言

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 表格控制元件在報表勾稽分析領域的應用場景解析

藉助前端技術構建QR碼生成器API

相關文章