- 터보링크를 사용하여 자바스크립트 앱의 PDF 뷰어 기능 개발하기

09 Nov 2023

javascript

PDF 파일은 많은 웹 애플리케이션에서 자주 사용되는 형식입니다. 터보링크(TurboLinks)를 이용하여 자바스크립트 앱에 PDF 뷰어 기능을 개발하는 방법을 알아보겠습니다. 터보링크는 페이지 간 전환을 빠르게 처리하고 렌더링을 최적화하는 데에 도움이 됩니다.

1. PDF.js 라이브러리 추가하기

PDF 뷰어 기능을 개발하기 위해 우리는 PDF.js 라이브러리를 사용할 것입니다. PDF.js는 자바스크립트로 PDF 파일을 로드하고 렌더링하는 데에 유용한 라이브러리입니다. 다음과 같이 해당 라이브러리 스크립트를 HTML 파일에 추가합니다.

<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.7.570/pdf.js"></script>

2. PDF 파일 로드하기

PDF.js를 사용하여 PDF 파일을 로드하는 방법은 다음과 같습니다. 먼저, 로드할 PDF 파일의 경로를 지정하고, 해당 PDF 파일을 로드하기 위해 필요한 설정을 정의합니다.

const pdfPath = 'path/to/pdf/file.pdf';
const loadingTask = pdfjsLib.getDocument(pdfPath);

3. PDF 페이지 렌더링하기

PDF 페이지를 렌더링하여 사용자에게 보여주기 위해서는 다음과 같은 단계를 따릅니다. 우선, 렌더링할 캔버스 엘리먼트와 페이지 번호, 그리고 스케일 설정을 정의합니다.

const canvas = document.getElementById('pdf-canvas');
const pageNumber = 1;
const scale = 1.5;

그리고 로드한 PDF 파일에서 해당 페이지를 가져와 렌더링을 수행합니다.

loadingTask.promise.then(function(pdf) {
  pdf.getPage(pageNumber).then(function(page) {
    const viewport = page.getViewport({scale: scale});
    const context = canvas.getContext('2d');
    canvas.height = viewport.height;
    canvas.width = viewport.width;
    page.render({canvasContext: context, viewport: viewport});
  });
});

4. 터보링크를 활용한 렌더링 최적화

PDF 페이지 렌더링은 시간이 많이 소요되는 작업중 하나입니다. 터보링크를 사용하여 페이지 간 전환을 더 빠르게 처리하고 렌더링을 최적화할 수 있습니다. 터보링크는 페이지 간 전환 시 필요한 자바스크립트 파일과 스타일시트만 로드하여 페이지를 업데이트하는 방식으로 작동합니다.

터보링크를 적용하려면 우선 해당 라이브러리 스크립트를 추가합니다.

<script src="https://cdn.jsdelivr.net/npm/@hotwired/turbo"></script>

그리고 터보링크를 초기화하고 필요한 요소를 캐시합니다.

document.addEventListener("turbo:load", function() {
  const pdfPath = 'path/to/pdf/file.pdf';
  const loadingTask = pdfjsLib.getDocument(pdfPath);
  
  // PDF 뷰어 기능 개발 코드 작성
});

5. 마무리

위에서 설명한 방법을 따라 자바스크립트 앱에 PDF 뷰어 기능을 개발할 수 있습니다. PDF.js와 터보링크를 사용하여 PDF 파일을 로드하고 페이지를 렌더링하면서 빠른 성능을 제공할 수 있습니다.

더 자세한 정보는 아래 참고 자료를 확인해보세요.

PDF.js 공식 문서: https://mozilla.github.io/pdf.js/
터보링크 공식 문서: https://turbo.hotwire.dev/

#javascript #PDF #PDF뷰어 #자바스크립트