js

웹에서 PDF 파일을 다운받아보자: 라이브러리 html2pdf.js

멋진 개구리 2024. 10. 23. 13:02
반응형

최근 프로젝트에서 클라이언트가 PDF로 변환된 문서가 필요하다는 요청을 했습니다. 처음에는 간단한 요청처럼 들렸지만, 화면 정의서를 보다 보니 화면에 표시된 HTML을 바로 PDF로 변환할 수 있는 기능이 필요하다는 것을 알게 되었죠.

어떻게 이 기능을 찾게 되었나?

사실 이 기능을 처음부터 알고 있었던 건 아닙니다. 제가 구글링을 하던 중 html2pdf.js라는 라이브러리를 발견하게 된 건 우연이었어요. 당시 상황을 설명하자면, 먼저 클라이언트의 요구 사항을 깊이 이해하기 위해 화면 정의서를 찬찬히 읽던 중이었는데, 한 가지 의문이 생겼습니다. "HTML 화면을 어떻게 효율적으로 PDF로 변환할 수 있을까?" 하는 생각이었죠.

그래서 HTML을 PDF로 변환하는 방법을 찾아보았고, 다행히도 금세 html2pdf.js라는 라이브러리에 대한 정보를 얻게 되었습니다. 바로 이 라이브러리가 제가 찾던 기능을 손쉽게 구현할 수 있는 방법을 제공하고 있었어요.

html2pdf.js: 쉽고 강력한 도구

이 라이브러리는 간단한 코드 몇 줄로 HTML 요소를 PDF로 변환할 수 있게 도와줍니다. 제일 마음에 들었던 부분은, PDF의 파일명부터 페이지 설정까지 손쉽게 커스터마이즈할 수 있다는 점이었죠. 제가 아래와 같은 코드를 추가해본 후, 브라우저에서 PDF로 다운로드가 되는 모습을 보고는 정말 놀랐습니다.

 

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.9.2/html2pdf.bundle.min.js"></script>

<button id="download">Download PDF</button>

<script>
  document.getElementById("download").addEventListener("click", () => {
    const element = document.getElementById("content");
    html2pdf()
      .from(element)
      .set({
        margin: 1,
        filename: "example.pdf",
        html2canvas: { scale: 2 },
        jsPDF: { orientation: "portrait" },
      })
      .save();
  });
</script>

코드 설명

위 코드에서 각 부분이 어떻게 동작하는지 좀 더 상세히 설명해볼게요.

  1. html2pdf.js 라이브러리 로드
    먼저, html2pdf.js 라이브러리를 사용하려면 해당 스크립트를 포함해야 합니다.
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.9.2/html2pdf.bundle.min.js"></script>
    위 코드에서를 통해 CDN으로부터 라이브러리를 불러오고 있습니다. 이렇게 하면 별도의 설치 없이 라이브러리를 바로 사용할 수 있습니다.
  2. 버튼과 HTML 요소 설정
    HTML의 <button> 요소를 사용해 "Download PDF" 버튼을 만들었고, id="download" 속성으로 버튼을 식별할 수 있게 했습니다. 이 버튼이 클릭되면 JavaScript가 실행되어 PDF가 생성됩니다.
  3. PDF 생성 로직
    JavaScript 코드에서는 document.getElementById("download").addEventListener("click", () => {...}) 구문을 사용해 버튼 클릭 이벤트를 처리하고 있습니다. 버튼이 클릭되면 html2pdf() 함수가 실행되며, 이 함수는 PDF로 변환할 HTML 요소인 #content를 선택해 PDF로 변환합니다.
  4. PDF 설정
    html2pdf() 함수 내부에서는 여러 설정이 가능합니다:
    • margin: 1: PDF의 여백을 1인치로 설정합니다.
    • filename: "example.pdf": 다운로드되는 PDF 파일의 이름을 지정합니다.
    • html2canvas: { scale: 2 }: PDF를 만들 때 캔버스의 해상도를 2배로 높여서 좀 더 선명한 결과물을 얻을 수 있습니다.
    • jsPDF: { orientation: "portrait" }: PDF의 페이지 방향을 세로(portrait)로 설정합니다. 가로 방향이 필요하면 landscape로 변경할 수 있습니다.
  5. PDF 다운로드
    마지막으로 .save() 메서드를 사용해 PDF 파일을 다운로드하도록 설정합니다. 사용자가 버튼을 클릭하면 PDF가 생성되어 자동으로 다운로드됩니다.

마무리하며

결국 이 기능은 클라이언트에게 아주 유용한 솔루션이 되었고, 앞으로도 여러 프로젝트에서 적극 활용할 수 있을 것 같다는 생각이 들었습니다. 가끔은 단순한 클라이언트의 요구가 새로운 기술을 발견하는 계기가 되기도 하죠. 여러분도 혹시 HTML을 PDF로 변환하는 기능이 필요하다면, html2pdf.js를 한 번 시도해보세요!

아래는 sample 소스 입니다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>HTML to PDF Example with html2pdf.js</title>
    <!-- html2pdf.js 라이브러리 CDN -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.9.2/html2pdf.bundle.min.js"></script>
    <style>
      #content {
        width: 600px;
        margin: 0 auto;
        padding: 20px;
        border: 1px solid #ccc;
        background-color: #f9f9f9;
      }
    </style>
  </head>
  <body>
    <!-- PDF로 변환할 HTML 요소 -->
    <div id="content">
      <h1>HTML to PDF 샘플</h1>
      <p>" html2pdf.js를 사용하여 PDF로 변환될 예시 문단입니다."</p>
      <ul>
        <li>안녕하세요 1</li>
        <li>안녕하세요 2</li>
        <li>안녕하세요 3</li>
        <li>반갑습니다. 3</li>
      </ul>
    </div>
    <div>sssssssssssssssssssssssssssssssssssssssssss</div>
    <!-- 버튼을 클릭하면 PDF를 생성 -->
    <button id="download">PDF 다운로드</button>

    <script>
      // 버튼 클릭 이벤트 리스너 등록
      document.getElementById("download").addEventListener("click", () => {
        // PDF로 변환할 HTML 요소 선택
        const element = document.getElementById("content");
        // html2pdf.js를 사용하여 PDF 생성
        html2pdf()
          .from(element) // HTML 요소로부터
          .set({
            margin: 1,
            filename: "example.pdf",
            html2canvas: { scale: 2 },
            jsPDF: { orientation: "portrait" },
          })
          .save(); // PDF 저장
      });
    </script>
  </body>
</html>

 

 

 

반응형