React-pdf를 사용하여 React 컴포넌트로 PDF 문서를 만드는 방법

React는 사용자 인터페이스를 구축하는 데 널리 사용되는 자바스크립트 라이브러리입니다. react-pdf 라이브러리를 사용하여 React 컴포넌트에서 PDF 파일을 만들 수 있습니다.

여기서는 react-pdf를 사용하여 React 컴포넌트로 PDF 문서를 만드는 방법을 배웁니다.

React-pdf란 무엇인가요?

React-pdf는 React 컴포넌트에서 PDF 문서를 만들 수 있는 라이브러리입니다. PDF 문서를 작성하는 데 사용할 수 있는 컴포넌트 세트를 제공하며 가상 DOM을 사용해 컴포넌트를 PDF로 렌더링합니다.

React-pdf 설치하기

노드 패키지 관리자를 사용하여 react-pdf를 설치하려면 프로젝트 디렉터리에서 다음 터미널 명령을 실행합니다:

 npm install @react-pdf/renderer --save 

대신 yarn 패키지 관리자를 사용하여 설치하려면 다음 명령을 실행합니다:

 yarn add @react-pdf/renderer
 

PDF 문서 만들기

PDF 문서를 만들려면 react-pdf의 Document, Page, Text 컴포넌트를 사용합니다. Document 컴포넌트는 새 PDF 문서를 생성하고 그 콘텐츠를 렌더링합니다. Page 컴포넌트는 PDF 문서 내에 새 페이지를 생성하고 그 콘텐츠를 렌더링합니다. 마지막으로 텍스트 컴포넌트는 PDF 문서 내의 텍스트를 렌더링합니다.

다음은 이 세 가지 구성 요소를 모두 사용하여 PDF 문서를 만드는 방법의 예입니다:

 import React from 'react';
import { Document, Text, Page } from '@react-pdf/renderer';

const MyDocument = () => (
  <Document>
    <Page>
      <Text>Hello There</Text>
    </Page>
  </Document>
);

export default MyDocument;
 

이 예에서는 한 줄의 텍스트인 “Hello There”가 포함된 단일 페이지로 PDF 문서를 만듭니다. PDF 문서를 생성한 후에는 React 애플리케이션에서 렌더링해야 합니다.

애플리케이션에서 PDF 문서를 렌더링하려면 PDF 문서를 생성하는 PDFViewer 컴포넌트를 사용합니다.

PDFViewer 컴포넌트를 가져와서 문서를 래핑합니다:

 import React from "react"
import { PDFViewer } from '@react-pdf/renderer';
import MyDocument from "./MyDocument";

function App() {
  return (
    <PDFViewer>
      <MyDocument />
    </PDFViewer>
  )
}

export default App
 

애플리케이션을 렌더링하면 다음과 같이 표시됩니다:

PDF 문서에 스타일 추가하기

PDF 문서에 스타일을 추가하려면 react-pdf의 StyleSheet 컴포넌트를 사용할 수 있습니다. 스타일시트 컴포넌트를 사용하면 PDF 문서에 대한 사용자 정의 스타일을 정의할 수 있습니다.

스타일시트 컴포넌트를 사용하려면 react-pdf 라이브러리에서 가져와서 PDF 문서에 대한 스타일을 정의하세요.

예:

 import React from 'react';
import { Document, Text, Page, Stylesheet } from '@react-pdf/renderer';

const styles = StyleSheet.create({
    page: {
        textAlign: 'center',
        marginTop: 30,
        fontSize: 30,
    },
    text: {
        color: '#228b22',
    }
});

const MyDocument = () => (
  <Document>
      <Page style={styles.page}>
          <Text style={styles.text}>Hello There</Text>
      </Page>
  </Document>
);

export default MyDocument;
 

위의 코드 블록에서는 PDF 컴포넌트에 스타일을 추가하고 있습니다. Stylesheet.create 함수를 사용하여 스타일을 정의합니다. Stylesheet.create 함수는 페이지 및 텍스트 스타일을 포함하는 스타일시트 객체를 만듭니다.

스타일 소품을 사용하여 페이지 및 텍스트 스타일을 페이지 및 텍스트 구성 요소에 전달합니다. 이렇게 하면 페이지 및 텍스트 컴포넌트에 스타일이 적용됩니다.

PDF 문서에 레이아웃 추가하기

PDF 문서에 레이아웃을 추가하려면 보기 구성 요소를 사용합니다. View 컴포넌트는 react-pdf 라이브러리에서 제공하는 컨테이너 컴포넌트입니다.

View 컴포넌트는 기본적인 HTML 요소인 HTML div처럼 작동합니다. 이를 통해 Text 컴포넌트와 같은 다른 컴포넌트를 감싸고, View 컴포넌트에 스타일을 추가하여 레이아웃을 정의할 수 있습니다.

이와 같이:

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

const styles = StyleSheet.create({
    page: {
        marginTop: 30,
        fontSize: 30,
        padding: 20,
    },
    layout: {
        marginTop: 30,
        flexDirection: 'row',
        justifyContent: 'space-between'
    }
});

const MyDocument = () => (
  <Document>
    <Page style={styles.page}>
      <View style={styles.layout}>
        <View>
          <Text>Hello There</Text>
        </View>
        <View>
          <Text>Welcome!!!</Text>
        </View>
      </View>
    </Page>
  </Document>
);

export default MyDocument;
 

이 예제에서는 보기 컴포넌트를 사용하여 다른 컴포넌트를 그룹화합니다.

PDF 문서에 이미지 추가하기

react-pdf 라이브러리에서 제공하는 Image 컴포넌트를 사용하여 PDF 문서에 이미지를 렌더링할 수도 있습니다. Image 컴포넌트를 사용하면 JPEG, PNG, SVG 등 다양한 형식의 이미지를 표시할 수 있습니다.

이미지 컴포넌트는 이미지의 URL을 지정하는 src 프로퍼티와 이미지에 사용자 정의 스타일을 추가하는 스타일 프로퍼티를 받습니다.

예:

 import React from 'react';
import { Document, Page, StyleSheet, View, Image } from '@react-pdf/renderer';

const styles = StyleSheet.create({
    page: {
        padding: 20,
        alignItems: 'center',
    },
    image: {
        width: 300,
        height: 200,
    }
});

const MyDocument = () => (
  <Document>
    <Page style={styles.page}>
      <View>
        <Image
          src='https://example.com/image.png' 
          style={styles.image} />
      </View>
    </Page>
  </Document>
);

export default MyDocument;
 

이 예에서는 이미지가 포함된 단일 페이지가 있는 PDF 문서를 만들고 있습니다. 이미지 구성 요소는 너비 스타일이 300픽셀이고 높이 스타일이 200픽셀인 이미지를 표시합니다.

PDF 문서에 링크 추가

PDF 문서에 링크를 포함하고 싶을 수 있습니다. 링크는 사용자를 지정된 URL로 연결하여 PDF 문서에서 제공하지 않는 추가 정보를 제공할 수 있습니다. react-pdf 라이브러리의 링크 컴포넌트를 사용하면 PDF 문서 내에 링크를 생성할 수 있습니다.

Link 컴포넌트는 사용자가 링크를 클릭할 때 리디렉션하기 위해 src 프로퍼티를 받습니다. 사용자가 정의한 경우 컴포넌트의 src 프로퍼티에 지정된 URL로 리디렉션됩니다.

Link 컴포넌트를 사용하려면 먼저 react-pdf 라이브러리에서 컴포넌트를 가져와야 합니다. 그런 다음 다음과 같이 PDF 문서에 추가하면 됩니다:

 import React from 'react';
import { Document, Page, StyleSheet, View, Link } from '@react-pdf/renderer';

const styles = StyleSheet.create({
    page: {
        padding: 20,
        alignItems: 'center',
    },
    link: {
        color: '#333333',
        textDecoration: 'none'
    }
});

const MyDocument = () => (
  <Document>
    <Page style={styles.page}>
      <View>
        <Link src='https://example.com' style={styles.link}>Click Me</Link>
      </View>
    </Page>
  </Document>
);

export default MyDocument;
 

위의 예제는 하나의 페이지와 하나의 뷰를 가진 PDF 문서를 생성합니다. 보기 내에 링크 구성 요소가 표시되며, 이 구성 요소를 클릭하면 사용자가 지정된 URL인 “https://example.com”로 리디렉션됩니다.

이제 React를 사용해 PDF 문서를 만들 수 있습니다

React-pdf는 React 컴포넌트에서 PDF 문서를 생성할 수 있는 강력한 라이브러리입니다. react-pdf를 사용하여 PDF 파일을 생성한 다음 텍스트, 이미지, 링크를 추가할 수 있습니다.

이 라이브러리를 사용하면 사용자 정의 스타일과 레이아웃으로 전문가 수준의 PDF 파일을 쉽게 생성할 수 있습니다.