Erstellen Sie mithilfe der Front-End-Technologie eine QR-Code-Generator-API

[Live-Übertragungsvorschau] Werden große Models Programmierer ersetzen? "

Vorwort

QR-Code (Quick Response Code) ist ein zweidimensionaler Code, der 1994 entwickelt wurde. Es kann Daten schnell speichern und identifizieren, enthält schwarze und weiße quadratische Muster und wird häufig zum Scannen verwendet, um Informationen zu erhalten. QR-Codes bieten den Vorteil einer hohen Fehlertoleranz und eines schnellen Lesens und werden häufig in den Bereichen Werbung, Zahlungsverkehr, Logistik und anderen Bereichen eingesetzt. Durch das Scannen des QR-Codes können Benutzer schnell Informationen abrufen und praktische Vorgänge umsetzen, um Komfort in das moderne Leben zu bringen. In diesem Tutorial erläutert der Redakteur, wie er mithilfe von NestJS und qrcode.js einen QR-Code erstellt und in Excel einfügt.

Umweltvorbereitung

Bevor Sie beginnen, stellen Sie sicher, dass Sie über die folgenden Tools und Kenntnisse verfügen:

Node.js und npm sind auf Ihrem System installiert.
Grundlegendes Verständnis von TypeScript und JavaScript.
Machen Sie sich mit den Grundkenntnissen von NestJS vertraut (falls nicht, können Sie sich auf die offizielle NestJS-Dokumentation beziehen ).

Schritt 1: Richten Sie das NestJS-Projekt ein

Beginnen Sie mit der Erstellung eines neuen NestJS-Projekts. Öffnen Sie ein Terminal und führen Sie den folgenden Befehl aus:

# Create a new NestJS project
npx @nestjs/cli new qr-code-generator-api

# Move into the project directory
cd qr-code-generator-api

Schritt 2: Installieren Sie qrcode.js

Als nächstes installieren Sie das Paket qrcode.js, das es mir ermöglicht, QR-Codes zu generieren. Führen Sie den folgenden Befehl im Projektverzeichnis aus:

npm install qrcode

Schritt 3: QR-Code generieren

Nachdem ich NestJS und qrcode.js eingerichtet habe, möchte ich einen QR-Code-Generierungsdienst erstellen. In NestJS ist der Dienst die Klasse, die für die Verarbeitung der Geschäftslogik verantwortlich ist. Der Editor erstellt einen QrCodeService und verwendet qrcode.js, um den QR-Code-Code zu generieren.

Erstellen Sie zunächst eine neue Datei mit dem Namen qr-code.service.ts im Ordner src und fügen Sie den folgenden Code hinzu:

// 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.');
    }
  }
}

Im obigen Code habe ich einen QrCodeService mit einer einzigen Methode „generateQrCode“ erstellt, der die Zeichenfolgendaten als Eingabe verwendet und ein Promise zurückgibt, das in eine Daten-URL aufgelöst wird, die den generierten QR-Code darstellt.

Schritt 4: Erstellen Sie einen QR-Code-Controller

In NestJS verarbeitet der Controller eingehende Anfragen und interagiert mit dem Dienst, um Antworten bereitzustellen. Daher hat der Herausgeber einen QR-Code-Controller erstellt, der die Generierung von QR-Codes übernimmt. Erstellen Sie eine neue Datei mit dem Namen qr-code.controller.ts im Ordner src und fügen Sie den folgenden Code hinzu:

// 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;
  }
}

Im obigen Code definiere ich einen QrCodeController mit einem einzelnen GET-Endpunkt auf Route/QR-Code. Der Endpunkt erfordert Abfrageparameterdaten, die den Inhalt darstellen, der in den QR-Code codiert wird. Die Methode „generateQrCode“ im Controller ruft die Methode „generateQrCode“ vom QrCodeService auf und gibt den QR-Code als Bild in der Antwort zurück. Ein QrDataCodeController mit einem einzelnen GET-Endpunkt ist ebenfalls in /qr-code-data definiert und wird in der Antwort als base^4 zurückgegeben.

Schritt 5: Schließen Sie das QR-Code-Modul an

Nachdem ich nun den Dienst und den Controller vorbereitet habe, muss ich sie mit einem Modul verbinden. Erstellen Sie eine neue Datei mit dem Namen qr-code.module.ts im Ordner src und fügen Sie den folgenden Code hinzu:

// 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 {}

Im obigen Code definiert der Editor ein QrCodeModule, das QrCodeController, QrDataCodeController und QrCodeService importiert. Dieses Modul ist für die Bereitstellung der QR-Code-Generierungsfunktion verantwortlich.

Schritt 6: Main.ts ändern

Nachdem ich das Modul erstellt habe, möchte ich die NestJS-Anwendung anleiten und QrCodeModule einbinden. Öffnen Sie die Datei src/main.ts und ändern Sie sie wie folgt:

// 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();

Im obigen Code habe ich QrCodeModule importiert und an NestFactory.create übergeben, was darauf hinweist, dass meine Anwendung QrCodeModule verwenden wird. Die Anwendung überwacht Port 3000 (der Standardwert ist 3000, der Port kann auch geändert werden).

Schritt 7: Testen Sie die QR-Code-Generator-API

Führen Sie den folgenden Befehl aus, um die NestJS-Anwendung auszuführen:

npm run start

Öffnen Sie den Browser und geben Sie http://localhost:3000/qr-code?data=Hello%20Spreadjs in die Adressleiste ein

Ersetzen Sie den Inhalt nach dem Gleichheitszeichen durch die Daten, die Sie in den QR-Code kodieren möchten.

Sie sollten eine Antwort erhalten, die ein HTML-img-Tag mit dem generierten QR-Code enthält. Das Bild wird in der Antwort als Daten-URL angezeigt.

Scannen Sie dann den QR-Code. Wenn der Scan erfolgreich ist, bedeutet dies, dass wir einen QR-Code erstellt haben.

Öffnen Sie den Browser und geben Sie http://localhost:3000/qr-code-data?data=Hello%20Spreadjs in die Adressleiste ein. Gibt Base64-Codedaten zurück

Hängen Sie abschließend die vollständige Projektcode-Adresse an:

https://github.com/wteja/qr-code-generator-api

Die Front-End-Formularkomponente implementiert QR-Code-Bilder

Im oben vorgestellten Beispiel hat der Editor direkt einen QR-Code generiert, aber im tatsächlichen Alltag kommt ein solches Szenario tatsächlich seltener vor. Zusätzlich zur Verwendung des oben genannten wird der QR-Code häufiger verwendet Mit nativem NestJS und qrcode.js können Sie auch andere Front-End-Tabellenkomponenten ausprobieren, die NestJS unterstützen. Der Vorteil davon besteht darin, dass der Aufwand für die Codeentwicklung reduziert werden kann.

SpreadJS ist eine reine Front-End-Tabellenkomponente, die auf dem von Grape City eingeführten HTML5-Standard basiert. Sie verfügt über leistungsstarke, plattformübergreifende und hohe Kompatibilität mit Excel. Sie soll Entwicklern dabei helfen, verschiedene Excel-Tabellenanwendungen schnell zu implementieren Der Browser ist weit verbreitet und wird häufig in Bereichen wie Datenausfüllung, Online-Formulardokumente, Excel-ähnliche Berichtserstellung und -erstellung, Unternehmensbudget und Endabrechnungen, messtechnische Tests, Labormanagement usw. eingesetzt Tabellen mit demselben Ursprung wie Feishu-, Yuque-, Lingxi-Dokumente usw. Entwicklungsfunktionen. Das Bild unten ist ein Beispiel für einen mit SpreadJS implementierten QR-Code:

SpreadJS unterstützt wie Excel das Einfügen und Positionieren von Bildern. Wir fügen die oben erhaltenen 6ase64-Daten in SpreadJS ein

Schritt 1: Base64-Daten abrufen

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();

Schritt 2: Holen Sie sich das SpreadJS-Objekt

Als nächstes holen Sie sich das SpreadJS-Objekt

<!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>

Erstellen Sie ein neues Textdokument, kopieren Sie den obigen Code, ändern Sie das Suffix in .html, öffnen Sie diese Datei im Browser und suchen Sie nach einer Tabelle

Schritt 3: Bild einfügen

Als nächstes fügen wir Bilder hinzu

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();

Das Ergebnis ist wie folgt:

Auf diese Weise wird der Effekt des Einfügens eines QR-Code-Bildes in eine Tabelle erreicht.

Warum der obige Prozess zu kompliziert ist, spielt keine Rolle, SpreadJS unterstützt auch die direkte Erstellung von QR-Codes.

Die Front-End-Tabellenkomponente implementiert die QR-Code-Formel

Schritt 1: Öffnen Sie SpreadJS

Öffnen Sie die Seite jetzt oder klicken Sie hier, um SpreadJS erneut zu öffnen.

Schritt 2: Implementieren Sie den QR-Code

Erstellen Sie nach dem Öffnen von SpreadJS eine neue Blattseite und notieren Sie dann die Informationen, die Sie auf dem QR-Code anzeigen möchten, wie in der folgenden Abbildung dargestellt:

Dann finden wir zufällig eine leere Zelle, geben die folgende Formel ein und geben die Zellenposition ein, an der die Informationen im leeren Bereich angezeigt werden (z. B. die Position B10 von „Hello World“ im Bild oben).

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

Anschließend wird ein QR-Code angezeigt:

Scannen Sie den QR-Code und das Telefon zeigt die Zeichenfolge „Hello World“ an. Damit ist eine kleine Demo abgeschlossen, die den QR-Code in Excel einbettet. (Weitere Arten von QR-Codes finden Sie in dieser Demo.)

Darüber hinaus können Sie dem QR-Code auch im Code Werte zuweisen:

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

Der obige Code erstellt eine Formel für Zelle A1. Die Formel lautet =BC_QRCODE("Hallo, ich bin ein QR-Code").

Im Anhang finden Sie den vollständigen Code:

<!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>

Zusammenfassen

In diesem Artikel stellt der Herausgeber vor, wie Sie mit NestJS und qrcode.js einen QR-Code erstellen und die reine Front-End-Tabellenkomponente SpreadJS verwenden, um den QR-Code in Excel anzuzeigen. Weitere Informationen finden Sie unter SpreadJS. Bitte klicken Sie hier, um es anzusehen.

Erweiterungslink:

[Trockene Informationssendung] Lesen Sie alle wichtigen Punkte der Bilanzanalyse in einem Artikel!

Warum sind Ihre Finanzberichte nicht großartig? Es wird empfohlen, dass Sie diese vier Designpunkte verstehen und!

Analyse von Anwendungsszenarien der reinen Frontend-Excel-Tabellensteuerung im Bereich der Berichtsanalyse

Erstellen Sie mithilfe der Front-End-Technologie eine QR-Code-Generator-API

Ich denke du magst