[리액트] PDF 프리뷰어 만들기, PDF 미리보기_📜 / react-pdf, 서버에서 받은 파일 미리보기

 

[React_ react-pdf]

 

리액트로 PDF 프리뷰어 만드는 방법에 대해 알아보자

 

---

 

<STUDY>

 

1. react-pdf 설치

npm install react-pdf

 

 

2. 필요한 컴포넌트 임포트 + pdf.worker.js 활성화

 

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

// pdf.worker.js 활성화
pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;

    📜 pdf.worker.js를 활성화하지 않으면 pdf 파일이 보이지 않으니 유의해 주세요!

 

 

3. 코드 추가

 

import React from 'react';
import { Document, Page, pdfjs } from 'react-pdf';
import { Box, Typography } from '@mui/material';

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

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

  const onLoadSuccess = ({ numPages }) => { setNumPages(numPages) };

  return (
    <Box>
      <Document file="somefile.pdf" onLoadSuccess={onLoadSuccess}>
        <Page pageNumber={pageNumber} />
      </Document>
      
      <Typography>
        Page {pageNumber} of {numPages}
      </Typography>
    </Box>
  );
}

    📜 file : pdf 파일

 

 

❓ 서버에서 받아온 pdf 파일을 미리보기 하는 경우

import React, {useEffect} from 'react';
import axios from 'axios';

function App() {
  const [pdf, setPdf] = useState<string>();
  
  // 서버에서 pdf 파일 받아오는 코드
  useEffect(() => {
    axios.get(`url`)
      .then(res => setPdf(URL.createObjectURL(res.data)))
  }, []);

  return (
    <Box>
      <Document file={pdf} onLoadSuccess={onLoadSuccess}>
        <Page pageNumber={pageNumber} />
      </Document>
      
      <Typography>
        Page {pageNumber} of {numPages}
      </Typography>
    </Box>
  );
}

 

   ❕ 이렇게 서버에서 받아온 파일을 URL.createObjectURL 을 사용하여 local path 를 생성한 다음 file에 추가하면 된다

 

 

<자세한 내용은 이곳을 참고해 주세요.>

 

react-pdf

---

 

내가 보려고 정리하는 리액트🔆

 

👉ez1n github 구경하기👈 

 

ez1n - Overview