2024.09.09 서류 발급 서비스 개선 프로젝트 회고

서비스 개선의 필요성 대두

기존 서류 발급 기능은 불편한 점이 더러 있었는데 그 중 하나는 여러 문서를 한 번에 인쇄, 다운로드를 할 수 없는 것이었다.

최대 네 개의 문서를 발급할 수 있는데, 저장이나 인쇄를 하기 위해서는 각 문서마다 네 번의 저장이나, 네 번의 다운로드 버튼 클릭이 필요했다.

pdf 병합 기능 검토

현재 사용하는 pdf 관련 라이브러리는 다음과 같다.

react-pdf - pdf 미리보기 라이브러리

@react-pdf/renderer - pdf 문서 생성 라이브러리

react-pdf 라이브러리 공식문서를 확인해 보아도 pdf를 병합해 하나의 파일로 만들어 주는 기능을 찾을 수는 없었다.

 

pdf-merger-js 라이브러리를 알게 되었는데 이름 그대로 pdf를 병합할 수 있는 라이브러리다.

node.js 기반의 라이브러리이기 때문에 클라이언트 측에서 실행이 불가능 했다고 하는데 업데이트로 클라이언트 측에서 실행이 가능하도록 기능이 변경됐다고 한다.

 

개략적인 pdf 병합 기능 사용 방법

개선 전 사용 방법

1. @react-pdf/renderer는 pdf 문서를 생성하는 라이브러리이다. 라이브러리가 제공하는 태그를 이용해 pdf 문서를 생성할 수 있고, 만들어진 pdf 문서를 url, blob의 형태로 반환한다.
2. react-pdf는 만들어진 pdf 문서를 보여주는 것이 주된 기능이다.
3. @react-pdf/renderer로 만든 pdf를 url이나 blob의 형태로 react-pdf에 전달한 후 pdf 문서를 미리보기 할 수 있다.

개선 후 사용 방법 (pdf-merger-js 사용)

1. @react-pdf/renderer로 만든 pdf를 url이나 blob의 형태로 배열로 만든다. (예. [blob1, blob2, ......])
2. blob 배열을 pdf-merger-js로 전달한다.

   1.   const [mergedPdfUrl, setMergedPdfUrl] = useState();
      
        useEffect(() => {
          if (blobs.length > 0) {
            const render = async () => {
              const merger = new PDFMerger();
              for (const file of blobs) {
                await merger.add(file);
              }
              await merger.setMetadata({
                producer: "test pdf",
              });
              const mergedPdf = await merger.saveAsBlob();
              const url = URL.createObjectURL(mergedPdf);
              setMergedPdfUrl(url);
            };
            render().catch((err) => {
              console.error("Failed to merge PDFs", err);
            });
      
            return () => {
              setMergedPdfUrl(undefined);
            };
          }
        }, [blobs]);

       
   2. mergedPdfUrl에 저장된 pdf 병합 문서를 react-pdf로 전달한다.