[React.js] react-pdf 로 파일 프리뷰 미리보기 하는 법 react-pdf 사용법 예제

react-pdf 패키지를 활용하면 리액트에서 PDF 파일 미리보기 기능을 쉽게 구현할 수 있다. 온라인 데모는 여기에서 확인할 수 있다.

 

react-pdf 온라인 데모

1. 프로젝트에 react-pdf 패키지를 설치한다.

npm install react-pdf

 

2. PDF.js worker를 활성화한다.

create-react-app 프로젝트의 경우 아래 코드를 소스 파일에 추가한다.

import { pdfjs } from 'react-pdf';
pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;

create-react-app 프로젝트가 아닌 경우 npm react-pdf Readme enable PDF.js worker를 참고하여 활성화한다.

 

3. 소스 파일에 코드를 추가한다.

클래스 컴포넌트 예제

import React, { Component } from 'react';
import { Document, Page } from 'react-pdf';
 
class MyApp extends Component {
  state = {
    numPages: null,
    pageNumber: 1,
  }
 
  onDocumentLoadSuccess = ({ numPages }) => {
    this.setState({ numPages });
  }
 
  render() {
    const { pageNumber, numPages } = this.state;
 
    return (
      <div>
        <Document
          file="somefile.pdf"
          onLoadSuccess={this.onDocumentLoadSuccess}>
          <Page pageNumber={pageNumber} />
        </Document>
        <p>
         //이전 페이지 보기
         <span onClick={() => this.state.pageNumber > 1 ?
          	this.setState({numPages : this.state.numPages,
            	pageNumber : this.state.pageNumber-1}) : null}>
            &lt;
         </span>
         <span>Page {pageNumber} of {numPages}</span>
         //다음 페이지 보기
         <span onClick={() => this.state.ppageNumber < numPages ?
         	this.setState({numPages : this.state.numPages,
            	pageNumber : this.state.pageNumber+1}) : null}>
            &gt;
         </span>
        </p>
      </div>
    );
  }
}

 

함수형 컴포넌트 예제

import React, { useState } from 'react';
import { Document, Page } from 'react-pdf';

function MyApp() {
  const [numPages, setNumPages] = useState(null);
  const [pageNumber, setPageNumber] = useState(1);

  function onDocumentLoadSuccess({ numPages }) {
    setNumPages(numPages);
  }

  return (
    <div>
      <Document
        file="somefile.pdf"
        onLoadSuccess={onDocumentLoadSuccess}>
        <Page pageNumber={pageNumber} />
      </Document>
      <p>
      	//이전 페이지 보기
        <span onClick={()=> pageNumber > 1 ? setPageNumber(pageNumber-1):null}>
        &lt;
        </span>
        <span>Page {pageNumber} of {numPages}</span>
       	//다음 페이지 보기
        <span onClick={()=> pageNumber < numPages ? setPageNumber(pageNumber+1):null}>
        &gt;
        </span>
      </p>
    </div>
  );
}

 

(추가) 4. s3 객체에 적용하기

s3 버킷의 CORS 규칙을 설정한다.

Document 태그의 file 속성을 s3 객체 퍼블릭 링크로 설정한다.

<Document
        file="s3-uploaded-file-path"
        onLoadSuccess={onDocumentLoadSuccess}>
        <Page pageNumber={pageNumber} />
</Document>