Créez une API de générateur de code QR à l'aide de la technologie front-end

[Aperçu de diffusion en direct] Les grands modèles remplaceront-ils les programmeurs ? "

Préface

Le code QR (Quick Response Code) est un code bidimensionnel développé en 1994. Il peut stocker et identifier rapidement des données, contient des motifs carrés en noir et blanc et est souvent utilisé pour numériser afin d'obtenir des informations. Les codes QR présentent les avantages d'une tolérance aux pannes élevée et d'une lecture rapide, et sont largement utilisés dans la publicité, les paiements, la logistique et d'autres domaines. En scannant le code QR, les utilisateurs peuvent obtenir rapidement des informations et mettre en œuvre des opérations pratiques, apportant ainsi du confort à la vie moderne. Dans ce didacticiel, l'éditeur expliquera comment utiliser NestJS et qrcode.js pour créer un code QR et le mettre dans Excel.

Préparation environnementale

Avant de commencer, assurez-vous de disposer des outils et des connaissances suivants :

Node.js et npm sont installés sur votre système.
Compréhension de base de TypeScript et JavaScript.
Familiarisez-vous avec les connaissances de base de NestJS (sinon, vous pouvez vous référer à la documentation officielle de NestJS ).

Étape 1 : Configurer le projet NestJS

Commencez par créer un nouveau projet NestJS. Ouvrez un terminal et exécutez la commande suivante :

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

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

Étape 2 : Installez qrcode.js

Ensuite, installez le package qrcode.js, qui me permettra de générer des codes QR. Exécutez la commande suivante dans le répertoire du projet :

npm install qrcode

Étape 3 : Générer un code QR

Maintenant que j'ai configuré NestJS et qrcode.js, permettez-moi de créer un service de génération de code QR. Dans NestJS, le service est la classe responsable de la gestion de la logique métier. L'éditeur créera un QrCodeService et utilisera qrcode.js pour générer le code QR code.

Tout d'abord, créez un nouveau fichier nommé qr-code.service.ts dans le dossier src et ajoutez le code suivant :

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

Dans le code ci-dessus, j'ai créé un QrCodeService avec une seule méthode generateQrCode, qui prend les données de chaîne en entrée et renvoie une promesse qui se résout en une URL de données représentant le code QR généré.

Étape 4 : Créer un contrôleur de code QR

Dans NestJS, le contrôleur gère les demandes entrantes et interagit avec le service pour fournir des réponses. L'éditeur a donc créé un contrôleur de code QR pour gérer la génération des codes QR. Créez un nouveau fichier nommé qr-code.controller.ts dans le dossier src et ajoutez le code suivant :

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

Dans le code ci-dessus, je définis un QrCodeController avec un seul point de terminaison GET sur route/qr-code. Le point de terminaison nécessite des données de paramètre de requête, qui représentent le contenu qui sera encodé dans le code QR. La méthode generateQrCode dans le contrôleur appelle la méthode generateQrCode à partir de QrCodeService et renvoie le code QR sous forme d'image dans la réponse. Un QrDataCodeController avec un seul point de terminaison GET est également défini sur /qr-code-data et est renvoyé en base^4 dans la réponse.

Étape 5 : Connectez le module de code QR

Maintenant que j'ai préparé le service et le contrôleur, je dois les connecter à un module. Créez un nouveau fichier nommé qr-code.module.ts dans le dossier src et ajoutez le code suivant :

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

Dans le code ci-dessus, l'éditeur définit un QrCodeModule qui importe QrCodeController, QrDataCodeController et QrCodeService. Ce module sera chargé de fournir la fonction de génération de code QR.

Étape 6 : Modifier main.ts

Maintenant que j'ai créé le module, permettez-moi de guider l'application NestJS et d'inclure QrCodeModule. Ouvrez le fichier src/main.ts et modifiez-le comme suit :

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

Dans le code ci-dessus, j'ai importé QrCodeModule et l'ai transmis à NestFactory.create, indiquant que mon application utilisera QrCodeModule. L'application écoutera sur le port 3000 (la valeur par défaut est 3000, le port peut également être modifié).

Étape 7 : testez l'API du générateur de code QR

Exécutez la commande suivante pour exécuter l'application NestJS :

npm run start

Ouvrez le navigateur et saisissez http://localhost:3000/qr-code?data=Hello%20Spreadjs dans la barre d'adresse

Remplacez le contenu après le signe égal par les données que vous souhaitez encoder dans le code QR.

Vous devriez recevoir une réponse contenant une balise HTML img avec le code QR généré. L'image sera affichée sous forme d'URL de données dans la réponse.

Scannez ensuite le code QR. Si le scan réussit, cela signifie que nous avons créé un code QR.

Ouvrez le navigateur et saisissez http://localhost:3000/qr-code-data?data=Hello%20Spreadjs dans la barre d'adresse. Renvoie une donnée de code base64

Enfin, joignez l'adresse complète du code du projet :

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

Le composant de formulaire frontal implémente des images de code QR

Dans l'exemple présenté ci-dessus, l'éditeur a généré directement un code QR, mais dans la vie quotidienne, ce genre de scénario est en réalité rare. Le plus souvent, le code QR est placé dans divers rapports Excel en plus d'utiliser ce qui précède. NestJS natif et qrcode.js, vous pouvez également essayer d'autres composants de table frontale prenant en charge NestJS. L'avantage est que cela peut réduire la quantité de développement de code.

SpreadJS est un pur composant de tableau frontal basé sur la norme HTML5 lancée par Grape City. Il possède des fonctionnalités de produit de haute performance, multiplateforme et haute compatibilité avec Excel. Il est conçu pour aider les développeurs à implémenter rapidement diverses applications de tableau Excel dans. le navigateur et a connu du succès. Il est largement utilisé dans des domaines tels que le remplissage de données, les documents de formulaires en ligne, la production et la génération de rapports de type Excel, le budget et les comptes finaux d'entreprise, les tests métrologiques, la gestion de laboratoire, etc., vous permettant d'avoir rapidement tables de même origine que Feishu, Yuque, Lingxi Documents, etc. Capacités de développement. L'image ci-dessous est un exemple de code QR implémenté à l'aide de SpreadJS :

Comme Excel, SpreadJS prend en charge l'insertion et le positionnement d'images. Nous insérons les données 6ase64 obtenues ci-dessus dans SpreadJS

Étape 1 : Obtenez des données 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();

Étape 2 : Obtenez l'objet SpreadJS

Ensuite, récupérez l'objet 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>

Créez un nouveau document texte, copiez le code ci-dessus, remplacez son suffixe par .html, ouvrez ce fichier dans le navigateur et recherchez une feuille de calcul.

Étape 3 : Insérer une image

Ensuite, nous ajoutons des images

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

Le résultat est le suivant :

De cette manière, l'effet d'insertion d'une image de code QR dans une feuille de calcul est obtenu.

Eh bien, le processus ci-dessus est trop compliqué, cela n'a pas d'importance, SpreadJS prend également en charge la création directe de codes QR.

Le composant de table frontale implémente la formule de code QR

Étape 1 : Ouvrez SpreadJS

Ouvrez la page tout de suite ou cliquez ici pour rouvrir SpreadJS.

Étape 2 : Implémenter le code QR

Après avoir ouvert SpreadJS, créez une nouvelle page Sheet, puis notez les informations que vous souhaitez afficher sur le code QR, comme indiqué dans la figure ci-dessous :

Ensuite, nous trouvons au hasard une cellule vide, entrons la formule suivante et entrons la position de la cellule où les informations sont affichées dans l'espace vide (comme la position B10 de "Hello World" dans l'image ci-dessus)

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

Un QR code s'affichera alors :

Scannez le code QR et le téléphone affichera la chaîne "Hello World". Ceci termine une petite démo qui intègre le code QR dans Excel. (Pour plus de styles de codes QR, veuillez vous référer à cette démo)

De plus, vous pouvez également attribuer des valeurs au QR code dans le code :

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

Le code ci-dessus crée une formule pour la cellule A1. La formule est =BC_QRCODE("bonjour, je suis un code QR").

Ci-joint le code complet :

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

Résumer

Dans cet article, l'éditeur explique comment utiliser NestJS et qrcode.js pour créer un code QR, et utilise le composant de tableau frontal pur SpreadJS pour afficher le code QR dans Excel. Si vous souhaitez en savoir plus sur SpreadJS Pour plus d'informations, Veuillez cliquer ici pour voir.

Lien d'extension :

[Diffusion d'informations sèches] Lisez tous les points clés de l'analyse des états financiers dans un seul article !

Pourquoi vos états financiers ne sont-ils pas excellents ? Il est recommandé de comprendre ces quatre points de conception et !

Analyse de scénarios d'application de contrôle de table Excel purement frontal dans le domaine de l'analyse de rapports

Créez une API de générateur de code QR à l'aide de la technologie front-end

Je suppose que tu aimes