react로 웹을 개발하면서 서버에 올려놓은 PDF를 브라우저에서
바로 볼 수 있도록 처리하기 위해서 뷰어가 필요한 상태라서..
(물론 다운받아서 acrobat reader로 읽어도 되긴 하죠.. 그런데 조금 불편하겠지요)
뷰어를 직접 개발할 수 있는건 아니구 ㅎㅎ
만들어져 있는것을 조금 포장했을 뿐입니다.
리액트는 18.2.0 버전에서 진행하였습니다.
노드 모듈중에서 react-pdf 를 활용하였습니다.
버전은 7.3.3 최신 버전(2023.08.22일 기준)
아래 링크를 통해서 버전 및 기능에대해서 확인하실 수 있습니다.
뷰어는 모달로 띄우고 모달닫기 버튼과 페이징 버튼을 추가하였습니다.
css는 정렬 뿐이 할줄 모르는데 작업하느라고
고생좀 했습니다.
Test.js
PdfViewer.js
문제 해결
최신 브라우저를 위한 import 정의(공식 문서 참조)
pdfjs.GlobalWorkerOptions.workerSrc = new URL(
"pdfjs-dist/build/pdf.worker.min.js",
import.meta.url
).toString();
아래 부분을 요 윗 부분으로 변경하고나서는 에러는 없었습니다.
레거시(ie 11 같은 브라우저) 지원을 위해서 사용하는 것 같은데
이게 크롬에서 여러번 새로고침 랜더링을 해보면 에러가 터지면서 안됩니다.
렌더링 이슈라고 하는데
간혹 해결책으로
PdfViewer.js 에서
const [isRender, setIsRender] = useState(false);
useEffect(() => {
setTimeout(() => setIsRender(true), 500)
}, []);
return (
isRender && (
<Document>
...
</Document
)
)
이런식으로 해결 하는 방법으로 소개되고 있으나,
100% 해결책으로는 활용할 수 없더라구요.
//pdfjs.GlobalWorkerOptions.workerSrc = `//unpkg.com/pdfjs-dist@${pdfjs.version}/legacy/build/pdf.worker.min.js`;
최종 결과
이상 하루 하루 성장하는 에단버드였습니다.
감사합니다.
