You are currently viewing React에서 react-pdf를 사용하여 PDF 생성하기

React에서 react-pdf를 사용하여 PDF 생성하기

이 블로그 글은 https://blog.logrocket.com/generating-pdfs-react/ 블로그를 참고하여 작성되었습니다. 저작권에 문제가 있을 경우, 연락주시기 바랍니다.

어플리케이션에 PDF 문서 생성 기능을 도입해야 하는 몇 가지 이유가 있습니다. 다행히도 React 생태계는 React 애플리케이션 내에서 직접 PDF 문서를 생성할 수 있는 다양한 도구를 제공합니다.

그 중 하나가 react-pdf 라이브러리로, React 프로젝트 내에서 PDF 생성 프로세스를 단순화합니다. 이 기사에서는 PDF 문서 생성 기능을 구현해야 하는 이유, react-pdf의 기본 사항 및 고급 개념을 탐구할 것입니다. 또한 react-pdf를 다른 라이브러리와 비교해보겠습니다.

React 애플리케이션에서 PDF를 생성해야 하는 이유

React 애플리케이션에서 PDF 생성 기능을 사용하는 많은 사례가 있습니다. 예를 들어, 애플리케이션 콘텐츠의 오프라인 액세스, 보고서 생성 등입니다. 하지만 현대 애플리케이션에서 이러한 기능의 가장 일반적인 사용 사례는 데이터 내보내기, 예를 들어 송장이나 브로셔와 같은 것입니다.

번창하는 온라인 비즈니스를 예로 들어보겠습니다. 판매가 일어날 때마다 송장을 생성해야 하는데, 이 과정은 금방 번거로워질 수 있습니다. 각 고객에게 영수증을 생성하려면 다음과 같은 단계를 따라야 합니다:

  1. 워드 프로세서를 열고 사용자의 개인 정보를 붙여넣기
  2. 사용자의 구매 내역을 테이블에 작성하고 합계를 계산
  3. 이 파일을 다운로드하여 PDF 형식으로 변환
  4. 이 문서를 사용자에게 이메일로 보내기

이 방법은 작동할 수 있지만, 하루에 수백 명의 고객이 생긴다면 어떻게 될까요? 같은 과정을 각 고객마다 반복해야 하므로 상당한 시간과 에너지가 낭비될 수 있습니다. 이 문제를 어떻게 해결할 수 있을까요?

이 문제를 해결하는 가장 좋은 방법은 API를 사용하여 이 작업을 자동화하는 것입니다. 여기에서 react-pdf와 같은 라이브러리가 유용합니다.

PDF 생성기를 처음부터 구축하는 것 vs 라이브러리 사용

PDF 생성기를 처음부터 구축하는 것은 기술적으로 가능하지만, 시작하기 전에 장단점을 신중하게 고려해야 합니다. 두 가지 접근 방식을 모두 살펴보겠습니다.

직접 구축의 장점:

  • 귀중한 학습 경험: 과정 자체가 훌륭한 학습 기회가 되어 PDF 생성과 관련된 다른 기술에 대한 이해를 깊게 할 수 있습니다.
  • 맞춤화: 생성기의 모든 측면을 완벽하게 제어할 수 있어, 기능, 기능성 및 디자인을 정확한 요구에 맞출 수 있습니다. 이는 매우 특화된 사용 사례에 유용할 수 있습니다.

하지만 PDF 문서 생성기를 처음부터 만드는 것은 지루하고 시간이 많이 걸릴 수 있습니다. 다음 기능들을 구현해야 합니다:

  • 다양한 콘텐츠 유형 지원: 텍스트, 이미지, 표, 차트 등 다양한 콘텐츠 유형을 PDF 문서에 포함할 수 있게 하기
  • 기존 라이브러리나 프레임워크와의 통합: 추가 기능이 필요한 경우 다른 React 라이브러리나 프레임워크와 호환 및 통합 제공
  • 맞춤화 옵션: 특정 요구 사항에 따라 PDF 문서의 외관과 레이아웃을 커스터마이즈할 수 있는 유연성 제공 (예: 머리글, 바닥글, 페이지 번호 매기기, 여백 등)
  • 크로스 브라우저 호환성: 주요 웹 브라우저와 호환성 보장 및 다양한 플랫폼과 디바이스에서 PDF 문서의 일관된 렌더링 보장
  • 성능 최적화: 특히 큰 데이터셋이나 복잡한 콘텐츠 구조를 다룰 때 PDF 문서를 효율적으로 생성할 수 있도록 성능 최적화
  • 유지 보수 부담: 초기 개발 노력 외에도 맞춤형 PDF 생성기를 유지 관리하려면 지속적인 관리가 필요합니다. 버그 수정, 호환성 업데이트 및 잠재적 보안 취약점 모두 사용자의 책임이 됩니다.

보시다시피, 이는 상당히 지루할 수 있습니다. 또한 초기 개발 노력 외에도 맞춤형 PDF 생성기를 유지 관리하려면 지속적인 관리가 필요합니다. 버그 수정, 호환성 업데이트 및 잠재적 보안 취약점 모두 사용자의 책임이 됩니다.

맞춤화와 학습 경험이 유용할 수 있지만, 시간 투자와 지속적인 유지 보수 부담이 상당할 수 있습니다. react-pdf와 같은 라이브러리를 사용하면 이러한 모든 기능을 구현하는 부담을 덜 수 있어 애플리케이션의 핵심 로직에 집중할 수 있습니다.

react-pdf 설치하기

react-pdf 패키지를 설치하려면 다음 터미널 명령을 실행하십시오:

npm i @react-pdf/renderer

react-pdf의 간단한 사용법

다음 코드는 브라우저에서 기본 PDF 문서를 렌더링합니다:

import {
  Document,
  Page,
  Text,
  View,
  StyleSheet,
  PDFViewer,
} from "@react-pdf/renderer";

// 스타일 생성
const styles = StyleSheet.create({
  page: {
    backgroundColor: "#d11fb6",
    color: "white",
  },
  section: {
    margin: 10,
    padding: 10,
  },
  viewer: {
    width: window.innerWidth, // PDF 뷰어가 모든 너비와 높이를 차지하게 됩니다.
    height: window.innerHeight,
  },
});

// Document 컴포넌트 생성
function BasicDocument() {
  return (
    <PDFViewer style={styles.viewer}>
      {/* 문서의 시작 */}
      <Document>
        {/* 단일 페이지 렌더링 */}
        <Page size="A4" style={styles.page}>
          <View style={styles.section}>
            <Text>Hello</Text>
          </View>
          <View style={styles.section}>
            <Text>World</Text>
          </View>
        </Page>
      </Document>
    </PDFViewer>
  );
}

export default BasicDocument;

이 코드에서:

  • StyleSheet 모듈을 사용하여 PDF 문서에 CSS 코드를 적용할 수 있습니다. 여기서는 페이지의 배경색과 글자색을 변경하도록 React에 지시하고 있습니다.
  • viewer 객체에서 width와 height 속성을 사용하고 있습니다. 따라서 브라우저의 PDF 뷰어가 페이지의 모든 공간을 차지하도록 react-pdf에 지시하게 됩니다.
  • PDFViewer 컴포넌트는 브라우저에 PDF 뷰어를 렌더링합니다.

이제 다음 단계로 DOM에 BasicDocument 컴포넌트를 렌더링해보겠습니다.

import BasicDocument from "./BasicDocument";

function App() {
  return (
    <div className="App">
      <BasicDocument />
    </div>
  );
}

export default App;

다음과 같은 화면을 볼 수 있을 것입니다:

const styles = StyleSheet.create({
  viewer: {
    width: window.innerWidth / 3,
    height: window.innerHeight / 2,
  },
  // 추가 코드...
});

이 코드 스니펫에서 뷰포트의 너비와 높이 속성을 제한했습니다. 이로 인해 페이지에서 사용 가능한 크기가 줄어듭니다:

react-pdf 패키지의 기본 구성 요소

react-pdf 라이브러리는 생성된 PDF에 표시할 수 있는 다양한 구성 요소를 제공합니다. 이제 이러한 구성 요소에 대해 논의하고 데모를 보여드리겠습니다.

링크 삽입

Link 구성 요소를 사용하여 앵커 링크를 표시할 수 있습니다. 이는 사용자를 웹사이트로 리디렉션하려는 경우에 유용합니다:

import { Link } from "@react-pdf/renderer";

<Text>
  <Link src="www.facebook.com">Go to Facebook</Link>
</Text>

여기서 src 속성을 Facebook의 웹사이트로 지정하고 있습니다. 사용자가 이 텍스트를 클릭하면 애플리케이션이 해당 페이지로 리디렉션합니다:

주석 표시

문서에 주석을 첨부하려면 Note 구성 요소를 사용하십시오. 이 요소의 중요한 사용 사례 중 하나는 파일에 댓글을 표시해야 할 때입니다:

import { Note } from "@react-pdf/renderer";

<Note>This will take the user to Facebook</Note>

이 주석 위에 마우스를 올리면 설정한 텍스트가 표시됩니다:

캔버스에 그래픽 표시

Canvas 구성 요소를 사용하여 페이지에 콘텐츠를 그릴 수 있습니다. 이는 간단한 다이어그램 및 SVG 형식의 로고를 표시하는 데 적합합니다.

다음 코드 스니펫은 페이지에 삼각형을 렌더링합니다:

import { Canvas } from "@react-pdf/renderer";

// 스타일 생성
const styles = StyleSheet.create({
  canvas: {
    backgroundColor: "black",
    height: 500,
    width: 500,
  },
});

<Canvas
  style={styles.canvas}
  paint={
    (painterObject) =>
      painterObject
        .save()
        .moveTo(100, 100) // 위치 100,100으로 이동
        .lineTo(300, 100) // 300, 100까지 선 그리기
        .lineTo(300, 300) // 300, 300까지 또 다른 선 그리기
        .fill("red") // 다이어그램이 그려지면 배경색을 빨간색으로 설정
  }
/>

위의 코드 스니펫에서 Canvas 구성 요소를 사용하여 다이어그램을 표시했습니다. paint 속성은 콜백 함수입니다. 이 함수의 매개변수 중 하나는 드로잉 메서드에 액세스할 수 있게 해주는 painterObject 인수입니다.

SVG 이미지 표시

react-pdf는 SVG 다이어그램을 렌더링하기 위한 SVG 구성 요소도 제공합니다. Canvas와 마찬가지로, 간단한 다이어그램을 렌더링하는 데 사용할 수 있습니다.

이 코드는 페이지에 선을 렌더링합니다:

import { Line, Svg } from "@react-pdf/renderer";

// 스타일 생성
const styles = StyleSheet.create({
  line: {
    x1: "0", // 시작 좌표는 x1과 y1
    y1: "0",
    x2: "200", // 종료 좌표:
    y2: "200",
    strokeWidth: 2,
    stroke: "rgb(255,255,255)", // 선 색상
  },
});

<Svg width={"50%"} height={"50%"} style={{ backgroundColor: "blue" }}>
  <Line style={styles.line} />
</Svg>

여기서 Line을 사용하여 문서에 선을 렌더링했습니다. Line은 Svg 구성 요소의 자식입니다.

폴리곤을 사용하여 닫힌 도형을 렌더링할 수도 있습니다:

import { Svg, Polygon } from "@react-pdf/renderer";

<Svg width={"50%"} height={"50%"} style={{ backgroundColor: "blue" }}>
  <Polygon
    points="100,100 200,100 200,250 100,250"
    fill="white" // 배경 색상
    stroke="black" // 테두리 색상
    strokeWidth={10} // 테두리 두께
  />
</Svg>

points 속성은 좌표 데이터셋을 수락합니다. 이를 통해 애플리케이션이 그래픽을 렌더링할 수 있습니다:

JPG 또는 PNG 사진 렌더링

Image 구성 요소를 사용하면 네트워크나 로컬 디스크에서 이미지를 삽입할 수 있습니다. 이는 복잡한 다이어그램이나 스크린샷을 표시하는 데 유용합니다.

이 코드 블록은 PDF에 500×500 픽셀 이미지를 렌더링합니다:

import { Image } from "@react-pdf/renderer";

const styles = StyleSheet.create({
  image: {
    width: 500,
    height: 500,
  },
});

<Image
  style={styles.image}
  src="https://images.pexels.com/photos/20066389/pexels-photo-20066389/free-photo-of-a-bubble-is-floating-in-the-sky-over-trees.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2"
/>

src 속성에는 렌더링하려는 이미지의 소스 URL이 포함됩니다:

고급 react-pdf 개념

이제 기본 사항을 다루었으니, React 프로젝트에서 react-pdf를 사용하여 PDF를 생성하는 고급 개념에 대해 논의하겠습니다.

Flexbox 사용

CSS와 마찬가지로, react-pdf는 개발자가 반응형 디자인을 가능하게 하는 flex 속성을 사용할 수 있도록 합니다. 이는 문서가 기기의 화면 크기에 따라 확장하거나 축소되기를 원하는 경우에 유용합니다:

// 스타일 생성. flex 방향을 지정했습니다.
const styles = StyleSheet.create({
  page: {
    flexDirection: "column",
  },
});

<Page size="A4" style={styles.page}>
  <View style={{ backgroundColor: "black", flex: 1 }}></View>
  <View style={(styles.section, { backgroundColor: "pink", flex: 1 })}></View>
</Page>

이 코드에서 두 개의 View 구성 요소에 flex 속성을 사용했습니다. 이는 페이지의 절반이 검은색 배경을, 다른 절반이 분홍색 배경을 가지게 됨을 의미합니다:

페이지 나누기

페이지 나누기는 특정 요소가 항상 페이지 상단에 표시되도록 하는 데 유용합니다. break 속성을 통해 페이지 나누기를 활성화할 수 있습니다:

// 스타일 생성
const styles = StyleSheet.create({
  text: {
    fontSize: 40,
  },
});

// Document 컴포넌트 생성
<Page>
  <Text break style={styles.text}>
    First PDF break
  </Text>
  <Text break style={styles.text}>
    Second break
  </Text>
</Page>

결과는 다음과 같이 나타납니다:

동적 페이지 콘텐츠

react-pdf를 사용하면 Text 구성 요소의 render 속성을 사용하여 동적 텍스트를 렌더링할 수 있습니다:

<Document>
  <Page size="A4">
    <Text
      style={styles.text}
      render={({ pageNumber, totalPages }) =>
        `Page ${pageNumber} of ${totalPages}`
      }
      fixed
    />
  </Page>
  <Page>
    <Text>Hello, second page!</Text>
  </Page>
</Document>

여기서 render 속성은 두 개의 인수를 갖습니다:

  • pageNumber: 현재 페이지의 인덱스
  • totalPages: 이 문서가 포함하는 총 페이지 수

이 값들을 클라이언트에게 표시하고 있습니다:

<Text /> 요소는 페이지 래핑 프로세스에서 레이아웃을 위해 한 번, 문서에 몇 페이지가 있는지 알게 된 후 한 번씩 두 번 렌더링 함수를 실행합니다. 따라서 성능이 문제가 되지 않는 경우에 사용하십시오.

View 요소에서도 render 속성을 사용할 수 있습니다:

<View render={({ pageNumber }) => (
    // 사용자가 짝수 페이지에 있지 않은 경우 감지:
    pageNumber % 2 === 0 && (
      <View style={{ background: 'red' }}>
        {/* 조건이 충족되면 이 구성 요소를 표시 */}
        <Text>I'm only visible in odd pages!</Text>
      </View>
    )
  )} />

고려할 다른 React PDF 라이브러리

react-pdf 라이브러리는 React 애플리케이션에서 PDF 문서를 생성, 렌더링, 주석 또는 스타일링하는 데 사용할 수 있는 다양한 도구 중 하나입니다. react-pdf 라이브러리와 함께 또는 대신 사용할 수 있는 다른 도구들을 탐구하고, 그들의 고유한 기능과 이상적인 사용 사례에 대해 논의해 보겠습니다.

wojtekmaj/react-pdf

리스트의 맨 위에는 PDF 문서를 React 애플리케이션에서 표시할 수 있는 사용하기 쉬운 PDF 리더인 wojtekmaj/react-pdf 패키지가 있습니다. 이 패키지는 PDF 문서의 표시 또는 렌더링에만 사용되므로, react-pdf 패키지와 같은 PDF 생성기와 함께 사용하기에 적합합니다.

wojtekmaj/react-pdf는 우수한 커뮤니티 지원을 받으며 지속적인 업데이트가 이루어지고 있습니다. 또한, Github에서 8K 이상의 별을 받고 npm에서 주간 90만 이상의 다운로드를 자랑합니다. 이러한 인기로 인해 애플리케이션에서 사용하기에 적합합니다.

wojtekmaj/react-pdf 라이브러리의 기능:

  • 여러 렌더링 방법
  • 텍스트 선택
  • 주석

빠른 시작 명령:

npm i react-pdf

react-pdf-highlighter

react-pdf-highlighter는 Mozilla의 PDF.js 패키지로 구축된 경량 PDF 주석 라이브러리입니다. 이 패키지는 텍스트 강조와 같은 주석 기능을 통합하여 PDF 문서를 생성한 후 텍스트를 강조 표시할 수 있는 기능을 제공합니다.

react-pdf-highlighter 패키지는 정기적인 업데이트를 받으며, Github에서 900개 이상의 별과 npm에서 주간 5천 개 이상의 다운로드를 기록하고 있습니다.

react-pdf-highlighter의 기능:

  • 주석
  • 텍스트 및 직사각형 강조
  • 독립적인 강조 데이터 형식
  • 사용자 정의 이벤트 및 상호작용

빠른 시작 명령:

npm i react-pdf-highlighter

react-pdf-tailwind

react-pdf-tailwind는 정확히 PDF 생성기나 렌더러가 아닙니다. 이는 Tailwind 유틸리티 클래스를 사용하여 react-pdf 라이브러리로 생성된 PDF 문서를 스타일링할 수 있게 해주는 유틸리티 도구입니다.

Tailwind를 기반으로 하므로 지속적인 업데이트가 이루어지고 있습니다. Github에서 400개 이상의 별을 받고 npm에서 주간 6천 개 이상의 다운로드를 기록하고 있습니다. react-pdf-tailwind 라이브러리는 기본적으로 Tailwind의 래퍼이므로 Tailwind 유틸리티 클래스를 사용하여 PDF 문서를 스타일링하는 것 외에는 별다른 기능이 없습니다.

빠른 시작 명령:

npm i react-pdf-tailwind

react-print-pdf

react-print-pdf는 React 애플리케이션에서 PDF 문서를 생성하기 위한 종합 솔루션입니다. 다른 솔루션과 달리 react-print-pdf는 문서의 레이아웃에 대한 완전한 제어를 제공합니다. 주석, 머리글, 여백 등과 같은 복잡하고 맞춤화

된 레이아웃을 설계할 수 있습니다.

이 오픈 소스 패키지는 우수한 커뮤니티 지원을 받으며, 지속적인 업데이트가 이루어지고 있으며 Github에서 400개 이상의 별을 받았습니다.

react-print-pdf의 기능:

  • 주석
  • Latex 지원
  • Tailwind 통합
  • Markdown 지원
  • 동적 값 표시

빠른 시작 명령:

npm install @onedoc/react-print

결론

이 기사에서는 react-pdf 라이브러리의 기본 사항을 다루었습니다. 이 라이브러리는 보안성이 뛰어나고 견고할 뿐만 아니라 경량이어서 성능도 우수합니다.

읽어주셔서 감사합니다! 코딩을 즐기세요!

답글 남기기