Cree una API generadora de códigos QR utilizando tecnología front-end

[Vista previa de la transmisión en vivo] ¿Los modelos grandes reemplazarán a los programadores? "

Prefacio

El código QR (Código de Respuesta Rápida) es un código bidimensional desarrollado en 1994. Puede almacenar e identificar datos rápidamente, contiene patrones cuadrados en blanco y negro y, a menudo, se utiliza para escanear y obtener información. Los códigos QR tienen las ventajas de una alta tolerancia a fallos y una lectura rápida, y se utilizan ampliamente en publicidad, pagos, logística y otros campos. Al escanear el código QR, los usuarios pueden obtener información rápidamente e implementar operaciones convenientes, aportando comodidad a la vida moderna. En este tutorial, el editor explicará cómo usar NestJS y qrcode.js para crear un código QR y colocarlo en Excel.

Preparación ambiental

Antes de comenzar, asegúrese de tener las siguientes herramientas y conocimientos:

Node.js y npm están instalados en su sistema.
Conocimientos básicos de TypeScript y JavaScript.
Familiarícese con los conocimientos básicos de NestJS (si no, puede consultar la documentación oficial de NestJS ).

Paso 1: configurar el proyecto NestJS

Comience creando un nuevo proyecto NestJS. Abra una terminal y ejecute el siguiente comando:

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

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

Paso 2: Instale qrcode.js

A continuación, instale el paquete qrcode.js, que me permitirá generar códigos QR. Ejecute el siguiente comando en el directorio del proyecto:

npm install qrcode

Paso 3: generar código QR

Ahora que configuré NestJS y qrcode.js, permítanme crear un servicio de generación de códigos QR. En NestJS, el servicio es la clase responsable de manejar la lógica empresarial. El editor creará un QrCodeService y utilizará qrcode.js para generar el código QR.

Primero, cree un nuevo archivo llamado qr-code.service.ts en la carpeta src y agregue el siguiente código:

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

En el código anterior, creé un QrCodeService con un único método generateQrCode, que toma los datos de la cadena como entrada y devuelve una Promesa que se resuelve en una URL de datos que representa el código QR generado.

Paso 4: Crear controlador de código QR

En NestJS, el controlador maneja las solicitudes entrantes e interactúa con el servicio para proporcionar respuestas. Por lo tanto, el editor creó un controlador de códigos QR para manejar la generación de códigos QR. Cree un nuevo archivo llamado qr-code.controller.ts en la carpeta src y agregue el siguiente código:

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

En el código anterior, defino un QrCodeController con un único punto final GET en ruta/código qr. El punto final requiere datos de parámetro de consulta, que representan el contenido que se codificará en el código QR. El método generateQrCode en el controlador llama al método generateQrCode desde QrCodeService y devuelve el código QR como una imagen en la respuesta. Un QrDataCodeController con un único punto final GET también se define en /qr-code-data y se devuelve como base^4 en la respuesta.

Paso 5: conecte el módulo de código QR

Ahora que he preparado el servicio y el controlador, necesito conectarlos a un módulo. Cree un nuevo archivo llamado qr-code.module.ts en la carpeta src y agregue el siguiente código:

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

En el código anterior, el editor define un QrCodeModule que importa QrCodeController, QrDataCodeController y QrCodeService. Este módulo será responsable de proporcionar la función de generación de códigos QR.

Paso 6: Modificar main.ts

Ahora que he creado el módulo, permítanme guiar la aplicación NestJS e incluir QrCodeModule. Abra el archivo src/main.ts y modifíquelo de la siguiente manera:

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

En el código anterior, importé QrCodeModule y lo pasé a NestFactory.create, lo que indica que mi aplicación usará QrCodeModule. La aplicación escuchará en el puerto 3000 (el valor predeterminado es 3000, el puerto también se puede modificar).

Paso 7: Pruebe la API del generador de códigos QR

Ejecute el siguiente comando para ejecutar la aplicación NestJS:

npm run start

Abra el navegador e ingrese http://localhost:3000/qr-code?data=Hello%20Spreadjs en la barra de direcciones

Reemplace el contenido después del signo igual con los datos que desea codificar en el código QR.

Debería recibir una respuesta que contenga una etiqueta img HTML con el código QR generado. La imagen se mostrará como una URL de datos en la respuesta.

Luego escanea el código QR. Si el escaneo tiene éxito, significa que hemos creado un código QR.

Abra el navegador e ingrese http://localhost:3000/qr-code-data?data=Hello%20Spreadjs en la barra de direcciones. Devuelve datos de código base64.

Finalmente, adjunte la dirección del código completo del proyecto:

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

El componente de formulario front-end implementa imágenes de códigos QR

En el ejemplo presentado anteriormente, el editor generó directamente un código QR, pero en la vida diaria real, este tipo de escenario es realmente raro. Más a menudo, el código QR se coloca en varios informes de Excel Además de usar lo anterior. NestJS y qrcode.js nativos, también puede probar otros componentes de tabla front-end que admitan NestJS. La ventaja de esto es que puede reducir la cantidad de desarrollo de código.

SpreadJS es un componente de tabla front-end puro basado en el estándar HTML5 lanzado por Grape City. Tiene características de producto de alto rendimiento, multiplataforma y alta compatibilidad con Excel. Está diseñado para ayudar a los desarrolladores a implementar rápidamente varias aplicaciones de tablas de Excel. El navegador y ha tenido éxito es ampliamente utilizado en campos como el llenado de datos, documentos de formularios en línea, producción y generación de informes tipo Excel, presupuesto corporativo y cuentas finales, pruebas metrológicas, gestión de laboratorio, etc., lo que le permite tener rápidamente. tablas con el mismo origen que Feishu, Yuque, Lingxi Documents, etc. Capacidades de desarrollo. La siguiente imagen es un ejemplo de un código QR implementado con SpreadJS:

Al igual que Excel, SpreadJS admite la inserción y posicionamiento de imágenes. Insertamos los datos de 6ase64 obtenidos anteriormente en SpreadJS

Paso 1: obtenga datos 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();

Paso 2: obtenga el objeto SpreadJS

Luego obtenga el objeto 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>

Cree un nuevo documento de texto, copie el código anterior, cambie su sufijo a .html, abra este archivo en el navegador y busque una hoja de cálculo.

Paso 3: insertar imagen

A continuación agregamos imágenes.

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

El resultado es el siguiente:

De esta forma se consigue el efecto de insertar una imagen de código QR en una hoja de cálculo.

Bueno, el proceso anterior es demasiado complicado, no importa, SpreadJS también admite la creación directa de códigos QR.

El componente de tabla frontal implementa la fórmula del código QR

Paso 1: abra SpreadJS

Abra la página ahora mismo o haga clic aquí para volver a abrir SpreadJS.

Paso 2: implementar el código QR

Después de abrir SpreadJS, cree una nueva página de Hoja y luego escriba la información que desea mostrar en el código QR, como se muestra en la siguiente figura:

Luego buscamos aleatoriamente una celda en blanco, ingresamos la siguiente fórmula e ingresamos la posición de la celda donde se muestra la información en el espacio en blanco (como la posición B10 de "Hola mundo" en la imagen de arriba)

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

Luego se mostrará un código QR:

Escanee el código QR y el teléfono mostrará la cadena "Hola mundo". Esto completa una pequeña demostración que incorpora el código QR en Excel. (Para más estilos de códigos QR, consulte esta demostración)

Además, también puedes asignar valores al código QR en code:

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

El código anterior crea una fórmula para la celda A1. La fórmula es =BC_QRCODE("hola, soy un código QR").

Adjunto el código completo:

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

Resumir

En este artículo, el editor presenta cómo usar NestJS y qrcode.js para crear un código QR, y usa el componente de tabla front-end puro SpreadJS para mostrar el código QR en Excel. Si desea obtener más información sobre SpreadJS, por favor haga clic aquí para ver.

Enlace de extensión:

[Transmisión de información seca] ¡Lea todos los puntos clave del análisis de estados financieros en un solo artículo!

¿Por qué sus estados financieros no son excelentes? ¡Se recomienda que comprenda estos cuatro puntos de diseño y!

Análisis de escenarios de aplicación del control de tablas de Excel front-end puro en el campo del análisis de informes.

Cree una API generadora de códigos QR utilizando tecnología front-end

Supongo que te gusta