프런트엔드 기술을 사용하여 QR 코드 생성기 API 만들기

머리말

QR코드(Quick Response Code)는 1994년에 개발된 2차원 코드이다. 데이터를 빠르게 저장하고 식별할 수 있으며 흑백 사각형 패턴을 포함하고 정보를 얻기 위해 스캔하는 데 자주 사용됩니다. 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 설치

다음으로 QR 코드를 생성할 수 있는 qrcode.js 패키지를 설치합니다. 프로젝트 디렉터리에서 다음 명령을 실행합니다.

npm install qrcode

3단계: QR 코드 생성

이제 NestJS와 qrcode.js를 설정했으므로 QR 코드 생성 서비스를 만들어 보겠습니다. NestJS에서 서비스는 비즈니스 로직 처리를 담당하는 클래스입니다. 편집자는 QrCodeService를 생성하고 qrcode.js를 사용하여 QR 코드 코드를 생성합니다.

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

위 코드에서는 문자열 데이터를 입력으로 사용하고 생성된 QR 코드를 나타내는 데이터 URL로 확인되는 Promise를 반환하는 단일 메서드 generateQrCode를 사용하여 QrCodeService를 만들었습니다.

4단계: QR 코드 컨트롤러 생성

NestJS에서 컨트롤러는 들어오는 요청을 처리하고 서비스와 상호 작용하여 응답을 제공합니다. 따라서 편집자는 QR 코드 생성을 처리하기 위해 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 코드에 단일 GET 끝점이 있는 QrCodeController를 정의합니다. 엔드포인트에는 QR 코드로 인코딩될 콘텐츠를 나타내는 쿼리 매개변수 데이터가 필요합니다. 컨트롤러의 generateQrCode 메소드는 QrCodeService에서 generateQrCode 메소드를 호출하고 응답에 QR 코드를 이미지로 반환합니다. 단일 GET 엔드포인트가 있는 QrDataCodeController도 /qr-code-data에 정의되어 있으며 응답에서 base^4로 반환됩니다.

5단계: QR 코드 모듈 연결

이제 서비스와 컨트롤러를 준비했으므로 이를 모듈에 연결해야 합니다. 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 {}

위 코드에서 편집기는 QrCodeController, QrDataCodeController 및 QrCodeService를 가져오는 QrCodeModule을 정의합니다. 이 모듈은 QR 코드 생성 기능을 제공합니다.

6단계: main.ts 수정

이제 모듈을 만들었으므로 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이며 포트도 수정할 수 있음).

7단계: QR 코드 생성기 API 테스트

다음 명령을 실행하여 NestJS 애플리케이션을 실행합니다.

npm run start

브라우저를 열고 주소 표시줄에 http://localhost:3000/qr-code?data=Hello%20Spreadjs를 입력하세요.

등호 뒤의 내용을 QR 코드로 인코딩하려는 데이터로 바꿉니다.

생성된 QR 코드와 함께 HTML img 태그가 포함된 응답을 받아야 합니다. 이미지는 응답에 데이터 URL로 표시됩니다.

그런 다음 QR 코드를 스캔하면 스캔이 성공하면 QR 코드가 생성되었음을 의미합니다.

브라우저를 열고 주소 표시줄에 http://localhost:3000/qr-code-data?data=Hello%20Spreadjs를 입력하세요. base64 코드 데이터를 반환합니다.

마지막으로 전체 프로젝트 코드 주소를 첨부하세요.

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

프런트 엔드 양식 구성 요소는 QR 코드 이미지를 구현합니다.

위에서 소개한 예시에서는 에디터가 직접 QR코드를 생성했지만 실제 일상생활에서는 이런 경우가 흔하지 않습니다. 기본 NestJS 및 qrcode.js를 사용하면 NestJS를 지원하는 다른 프런트 엔드 테이블 구성 요소를 사용해 볼 수도 있습니다. 이 방법의 장점은 코드 개발 양을 줄일 수 있다는 것입니다.

SpreadJS 는 Grape City에서 출시한 HTML5 표준을 기반으로 하는 순수 프런트엔드 테이블 구성 요소로, 고성능, 크로스 플랫폼, Excel과의 높은 호환성 등의 제품 기능을 갖추고 있어 개발자가 다양한 Excel 테이블 애플리케이션을 신속하게 구현할 수 있도록 설계되었습니다. 브라우저는 데이터 채우기, 온라인 양식 문서, Excel과 같은 보고서 생성 및 생성, 기업 예산 및 최종 계정, 도량형 테스트, 실험실 관리 등과 같은 분야에서 널리 사용되어 신속하게 작업을 수행할 수 있습니다. Feishu, Yuque, Lingxi Documents 등과 동일한 출처의 테이블 개발 기능. 아래 그림은 SpreadJS를 사용하여 구현한 QR 코드의 예입니다.

Excel과 마찬가지로 SpreadJS는 그림 삽입 및 위치 지정을 지원합니다. 위에서 얻은 6ase64 데이터를 SpreadJS에 삽입합니다.

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

결과는 다음과 같습니다.

이런 식으로 QR 코드 이미지를 스프레드시트에 삽입하는 효과를 얻을 수 있습니다.

왜 위 과정이 너무 복잡해도 상관없지만 SpreadJS에서는 QR코드 직접 생성도 지원합니다.

프런트 엔드 테이블 구성 요소는 QR 코드 수식을 구현합니다.

1단계: SpreadJS 열기

지금 페이지를 열거나 SpreadJS를 다시 열려면 여기를 클릭하세요.

2단계: QR 코드 구현

SpreadJS를 연 후, 새로운 Sheet 페이지를 생성한 뒤, 아래 그림과 같이 QR코드에 표시하고 싶은 정보를 적어주세요.

그러면 빈 셀을 무작위로 찾아서 다음 수식을 입력하고, 빈 공간에 정보가 표시되는 셀 위치(예: 위 그림에서 "Hello World"의 B10 위치)를 입력해 줍니다.

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

그러면 QR 코드가 표시됩니다:

QR 코드를 스캔하면 전화기에 "Hello World" 문자열이 표시됩니다. 이로써 QR 코드를 Excel에 포함하는 작은 데모가 완성됩니다. (더 많은 QR 코드 스타일을 보려면 이 데모를 참조하세요.)

또한 코드의 QR 코드에 값을 할당할 수도 있습니다.

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

위 코드는 셀 A1에 대한 수식을 생성합니다. 수식은 =BC_QRCODE("안녕하세요, 저는 QR 코드입니다")입니다.

첨부된 코드는 전체 코드입니다.

<!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를 사용하여 Excel에 QR 코드를 표시하는 방법을 소개합니다. SpreadJS에 대해 더 알고 싶다면, 보려면 여기를 클릭하십시오.

확장 링크:

[드라이정보방송] 재무제표분석의 핵심을 기사 하나로 모두 읽어보세요!

재무제표가 좋지 않은 이유는 무엇입니까? 이 4가지 디자인 포인트를 이해하시는 것이 좋습니다!

보고서 분석 분야에서 순수 프런트 엔드 Excel 테이블 제어의 응용 시나리오 분석

프런트엔드 기술을 사용하여 QR 코드 생성기 API 만들기

추천