🌟 프런트엔드 페이징 로딩 / 지연 로딩 미리보기 PDF 🌟

서문

개발 과정에서 종종 PDF를 미리 볼 필요가 있습니다. 이 시간은 일반적으로 PDF 주소이며, 어떤 방법으로 페이지에서 PDF 파일 미리보기가 될 것입니다. 예를 들어, 다음과 같은 방법 또는 타사 라이브러리:

• embed
• iframe
• pdf.js
• react-pdf

그러나 PDF가 상대적으로 큰 경우 느린 로딩 속도와 너무 많은 메모리는 더 심각한 문제가 됩니다. PDF 용량이 클수록 네트워크 전송 시간이 길어질 수밖에 없어 사용자 경험이 나빠지고, 큰 PDF를 열면 더 많은 메모리를 차지하여 탭/브라우저가 멈추거나 충돌이 발생할 수 있습니다.

일반 미리보기 방법

우선, 기존의 PDF 미리보기 방법을 살펴 보겠습니다. 여기에서는 두 가지 미리보기 방법을 간단히 언급하고 매우 간단하며 코드는 다음과 같습니다:

js
import { PDF_URL } from "./constant"

const Normal = () => {
 return (
 <div>
 <embed src={PDF_URL} type="application/pdf" width="100%" height="600px"></embed>
 <iframe width={'100%'} height={600} src={PDF_URL} />
 </div>
 )
}

export default Normal

하나는 미리 보기에 임베드 태그를 사용하고, 다른 하나는 브라우저의 자체 PDF 렌더링 엔진을 사용하여 미리 보기에 iframe 태그를 사용하는 것입니다. 또한 일반적으로 더 많은 방식으로 사용됩니다.

하지만 저에게는 100페이지 + PDF가 15M 정도이고, 대역폭이 4M인 서버에서는 전송에 30초 정도 걸리는데, 여전히 꽤 긴 시간입니다.

다음은 PDF 페이징 로딩 및 렌더링에 대해 소개합니다. 대용량 PDF 네트워크 전송이 너무 느리고 메모리를 너무 많이 차지하는 문제를 해결하기 위해 설계되었습니다.

그림으로 나누기

전체 PDF 파일을 한 번 로드하는 것이 너무 느리기 때문에 미리 보기를 위해 더 자세한 단위로 분할하는 것을 고려할 수 있습니다. 여기에서는 먼저 페이지 번호별로 전체 PDF 파일을 그림으로 바꿀 수 있으며, 1페이지 PDF는 1장의 그림에 해당합니다. 그런 다음 이러한 사전 처리 후에는 전체 PDF 파일을 한 번만 로드하는 것이 아니라 온디맨드 로드 또는 슬라이스 로드를 쉽게 수행할 수 있습니다. 따라서 사용자의 첫 화면 대기 시간이 크게 줄어들어 사용자 경험을 향상시킬 수 있습니다.

PDF

여기서 데이터를 사전 처리해야 하며 PDF 파일이 이미지로 변환됩니다. 여기서 사용하는 것은 이 라이브러리의 pdf-image, 특정 설치 튜토리얼은 링크를 클릭하여 볼 수 있습니다.

설치 후 노드를 사용하여 PDF 파일의 각 페이지를 이미지로 변환하는 전처리 스크립트를 작성할 수 있습니다.

js
const PDFImage = require("pdf-image").PDFImage;
const path = require("path");
const fs = require("fs");
const FILE_PATH = path.join(__dirname, "../public/files/test.pdf");
const outputDirectory = path.join(__dirname, "../public/files/tmp");

const pdfImage = new PDFImage(FILE_PATH, {
 convertOptions: {
 "-density": 250, // 해상도를 높이고 필요에 따라 조정
 "-quality": 100,
 "-trim": null,
 },
 outputDirectory,
});

const run = async () => {
 const info = await pdfImage.getInfo();
 for (let i = 0; i < Number(info.Pages); i++) {
 try {
 await pdfImage.convertPage(i);
 } catch (error) {
 console.log("error", error);
 }
 }
};
run();

각 페이지에 대한 이미지가 준비되면 해당 이미지를 가져와서 미리보기 기능에 사용할 수 있습니다. 여기에는 100개가 넘는 이미지가 있으므로 렌더링할 때 한 번에 모두 렌더링할 필요 없이 약간의 지연 로딩을 수행하면 됩니다. 여기서는 IntersectionObserver; 사용하여 이미지의 지연 로딩을 구현합니다. 먼저 다음과 같이 지연 로딩 훅을 구현합니다:

• 여기에서 각 요소에 기본 높이를 지정한 다음 IntersectionObserver; 사용하여 요소가 뷰포트에 표시되는지 여부를 확인할 수 있습니다.
• 뷰포트 반환에 표시되는 경우 이 이미지를 로드합니다.

js
import { useEffect,useRef,useCallback } from "react";

const useObserve = ({ rootRef, itemSelector }) => {
 const observer = useRef(null);

 const handlerObserve = entries => {
 entries.forEach(({ isIntersecting, target }) => {
 if (isIntersecting) {
 const targetImg = target.children[0];
 targetImg.src = targetImg.dataset.src;
 // src 속성을 수정한 후 데이터-src 속성을 제거하고 모니터링을 취소할 수 있습니다!
 targetImg.removeAttribute("data-src");
 observer.current.unobserve(target);
 }
 });
 };
 const addObserve = () => {
 const list = document.querySelectorAll(itemSelector);
 list.forEach(item => {
 observer.current.observe(item);
 });
 };

 const initObserver = useCallback(() => {
 observer.current = new IntersectionObserver(handlerObserve, {
 root: rootRef.current,
 rootMargin: "0px 0px 200px 0px", // 모니터 영역 아래쪽으로 확장 200px
 });
 addObserve();
 }, []);
 useEffect(() => {
 initObserver();
 return () => {
 observer.current.disconnect();
 };
 }, []);
};

export default useObserve;

그런 다음 다음과 같이 미리보기 컴포넌트를 구현합니다:

js
import { Carousel } from "antd";
import styles from "./index.module.less";
import { LeftOutlined, RightOutlined } from "@ant-design/icons";
import { useState, useEffect, useRef, useMemo, useCallback } from "react";
import { API_PREFIX } from "../../../../env";
import useObserve from "./useObserve";
const defaultImage = "";

const Preview = () => {
 const [list, setList] = useState(() => {
 return new Array(105).fill(0).map((item, index) => {
 return {
 page: index,
 originSrc: `${API_PREFIX}/files/tmp/test-${index}.png`,
 };
 });
 });
 const contentRef = useRef(null);
 useObserve({
 rootRef: contentRef,
 itemSelector: ".image-item-observe",
 });
 return (
 <div className={styles.preview}>
 <div ref={contentRef} className={styles.content}>
 {list.map((item, index) => {
 return (
 <div class={`${styles["image-item-wrapper"]} image-item-observe`}>
 {/* 로딩 과정에서 흰색 화면 현상을 피하기 위해 기본 기본 맵을 설정합니다.*/}
 <img
 class={styles["image-item"]}
 src={defaultImage}
 data-src={item.originSrc}
 key={index}
 width="100%"
 />
 </div>
 );
 })}
 </div>
 </div>
 );
};

export default Preview;

이를 통해 PDF 미리 보기 기능을 온디맨드 방식으로 로드할 수 있습니다.

페이지별로 나누기

위는 여러 이미지를 로드하여 PDF의 지연 로딩을 수행한 후 PDF를 이미지로 변환하는 방법입니다. 다음 방법은 큰 PDF를 여러 개의 작은 PDF로 자른 다음 일반 미리보기를 사용하여 미리 보는 것입니다. 먼저 데이터를 전처리하는 스크립트를 작성하고 PDF 파일을 자릅니다.

js
const fs = require("fs");
const { PDFDocument } = require("pdf-lib");
const path = require("path");
async function splitPDF(inputPath, outputPrefix) {
 const pdfBytes = await fs.promises.readFile(inputPath);
 const pdfDoc = await PDFDocument.load(pdfBytes);

 const totalPages = pdfDoc.getPageCount();
 const pagesPerChunk = 10;

 for (let startPage = 1; startPage <= totalPages; startPage += pagesPerChunk) {
 const endPage = Math.min(startPage + pagesPerChunk - 1, totalPages);

 const newPdfDoc = await PDFDocument.create();

 for (let pageNum = startPage; pageNum <= endPage; pageNum++) {
 const [copiedPage] = await newPdfDoc.copyPages(pdfDoc, [pageNum - 1]);
 newPdfDoc.addPage(copiedPage);
 }

 const outputPath = `${outputPrefix}/${Math.floor(endPage / 10)}.pdf`;
 const newPdfBytes = await newPdfDoc.save();
 await fs.promises.writeFile(outputPath, newPdfBytes);

 console.log(`PDF successfully split from page ${startPage} to ${endPage}.`);
 }
}

const FILE_PATH = path.join(__dirname, "../public/files/test.pdf");
const outputDirectory = path.join(__dirname, "../public/files/tmp-file");
splitPDF(FILE_PATH, outputDirectory);

슬라이싱 후 결과는 다음과 같습니다:

그런 다음 미리보기는 매우 간단합니다. iframe을 사용하여 직접 하나씩 미리보고 클릭하여 더 많이로드 한 다음 다음 세그먼트를로드합니다. 간단한 미리보기 구성 요소는 다음과 같으며 분할 된 PDF 파일을 하나씩로드합니다:

js
import React, { useState, useEffect, useRef } from "react";
import { API_PREFIX } from "../../../../env";
const pdfs = new Array(11)
 .fill(0)
 .map((_, index) => `${API_PREFIX}/files/tmp-file/${index + 1}.pdf`);

const Split = () => {
 const [list, setList] = useState([pdfs[0]]);
 return (
 <div>
 {list.map((url, index) => {
 return (
 <div>
 <iframe
 id={`iframe-${index}`}
 key={index}
 width={"100%"}
 height={600}
 src={url}
 />
 </div>
 );
 })}
 <button
 disabled={list.length === pdfs.length}
 onClick={() => {
 const arr = [...list];
 arr.push(pdfs[arr.length]);
 setList(arr)
 }}
 >
 더 보기
 </button>
 </div>
 );
};

export default Split;

마지막으로

위의 내용은 두 개의 큰 PDF 파일을 더 빠르게 미리 보는 방법에 대해 설명합니다. 흥미로운 방법이 있으면 브레인 스토밍 토론과 함께 의견 섹션에 오신 것을 환영합니다. 읽어 주셔서 감사합니다, 원한다면 우려되는 점을 지적하고 칭찬해 주세요~!