jsPDF를 사용하여 JSON 데이터에서 React에서 PDF를 만드는 방법

이 글에서는 JSON 데이터를 사용하여 JS/React에서 PDF를 만드는 방법을 보여줍니다.

개발자로서 우리는 PDF 생성을 애플리케이션 내에 통합해야 합니다. 따라서 이 기사에서는 jspdf를 사용하여 PDF를 만드는 방법에 대해 설명합니다.

자, 시작해 보겠습니다.

이 기사에서는 특별히 React 환경을 사용할 것입니다. 여러분은 JavaScript/React에 익숙하고 이미 React 환경을 설정했다고 가정합니다

들어가기 전에 PDF를 생성하려면 샘플 데이터가 필요합니다. 이 데이터를 생성하는 방법을 만들어 보겠습니다.

const generateUsers = (count) => {
    const users = [];

    for (let i = 1; i <= count; i++) {
      const user = {
        id: i,
        firstName: `firstName_${i}`,
        lastName: `lastName_${i}`,
        email: `email_${i}@example.com`,
        address: [
          `Street ${i + 1}, Address Line 1`,
          `District ${(i % 7) + 1}, City_${i}`,
        ],
      };
      users.push(user);
    }
    return users;
  };

이제 npm 패키지 jspdf 및 jspdf-autotable을 설치해야 합니다.

jsPDF는 PDF 생성을 담당하고, jsPDF-AutoTable은 PDF 내에서 테이블 형식으로 데이터를 표시하는 데 사용됩니다.

다음 명령을 사용하여 두 패키지를 모두 설치할 수 있습니다.

npm i jspdf-autotable jspdf

이제 PDF 생성을 처리하는 방법을 개발하겠습니다. 필요한 곳 ​​어디에서나 사용할 수 있도록 일반적인 generatePDF 방법을 만들어 보겠습니다.

1. 기능 정의

generatePDF 함수는 개체 배열(PDF에 포함할 JSON 데이터)이 될 것으로 예상되는 데이터를 인수로 사용합니다.

export const generatePDF = (data) => {

2. PDF 문서 설정
다음 옵션을 사용하여 새 jsPDF 인스턴스가 생성됩니다.

• "l"은 가로 방향입니다.
• "pt"를 측정 단위(포인트)로 사용합니다.
• 용지 크기는 "a3"입니다.

const doc = new jsPDF("l", "pt", "a3");

// if you want to use custom dimensions
// width,height

const doc = new jsPDF("l", "pt", [3000,1000]);

3. PDF에 제목 추가

• 글꼴 크기를 16포인트로 설정합니다.
• 페이지 상단(y 위치 30)에 중앙 제목인 "JSON Data PDF"를 추가합니다.

doc.setFontSize(16);
doc.text("JSON Data PDF", doc.internal.pageSize.getWidth() / 2, 30, {
    align: "center",
});

4. 테이블 헤더 추출

• 테이블의 열 헤더로 사용할 데이터의 첫 번째 개체에서 키를 추출합니다.
• 데이터에 객체가 하나 이상 있고 모든 객체에 유사한 키가 있다고 가정합니다.

const tableColumnHeaders = Object.keys(data[0]);

5. 표 행 서식 지정

데이터의 각 객체를 반복하여 새 배열(tableRows)을 만듭니다. 여기서:

• 각 항목은 테이블의 한 행에 해당합니다.
• 각 셀에 대해 값이 배열이면 요소를 쉼표로 결합합니다. 그렇지 않으면 값을 있는 그대로 추가합니다.

const tableRows = data.map((row) =>
    Object.keys(row).map((key) => {
        const value = row[key];
        if (Array.isArray(value)) {
            return value.join(", ");
        }
        return value;
    })
);

6. PDF에 표 추가

다음 옵션으로 테이블을 구성합니다.

• startY: 50은 페이지 상단 아래 50포인트에 테이블을 배치합니다.
• head는 tableColumnHeaders를 테이블의 헤더 행으로 사용합니다.
• 본문은 tableRows로 채워져 데이터를 행별로 표시합니다.
• 여백은 테이블 주위의 간격을 지정합니다.
• 스타일은 셀 글꼴 크기, 패딩 및 수직 정렬을 조정합니다.
• headStyles는 파란색 배경, 흰색 텍스트, 12포인트 글꼴 등 헤더 행 스타일을 설정합니다.
• 대체RowStyles는 교대 행에 밝은 회색 배경을 추가합니다.
• columnStyles는 열 너비를 자동으로 설정하려고 시도합니다.
• theme: "striped"는 표에 줄무늬 테마를 적용합니다.

const generateUsers = (count) => {
    const users = [];

    for (let i = 1; i <= count; i++) {
      const user = {
        id: i,
        firstName: `firstName_${i}`,
        lastName: `lastName_${i}`,
        email: `email_${i}@example.com`,
        address: [
          `Street ${i + 1}, Address Line 1`,
          `District ${(i % 7) + 1}, City_${i}`,
        ],
      };
      users.push(user);
    }
    return users;
  };

7. PDF 저장
"JS-pdf.pdf"라는 파일 이름으로 PDF 파일을 저장합니다.

npm i jspdf-autotable jspdf

이 코드의 전체 버전은 다음과 같습니다.

export const generatePDF = (data) => {

const doc = new jsPDF("l", "pt", "a3");

// if you want to use custom dimensions
// width,height

const doc = new jsPDF("l", "pt", [3000,1000]);

지금은 이 작업이 완료되었습니다. 다행히도 당신은 그것을 즐겼기를 바랍니다. 좋은 하루 보내세요!!!

위 내용은 jsPDF를 사용하여 JSON 데이터에서 React에서 PDF를 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!