최근 프로젝트에서 클라이언트가 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>코드 설명
위 코드에서 각 부분이 어떻게 동작하는지 좀 더 상세히 설명해볼게요.
- html2pdf.js 라이브러리 로드
먼저, html2pdf.js 라이브러리를 사용하려면 해당 스크립트를 포함해야 합니다.
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.9.2/html2pdf.bundle.min.js"></script>
위 코드에서를 통해 CDN으로부터 라이브러리를 불러오고 있습니다. 이렇게 하면 별도의 설치 없이 라이브러리를 바로 사용할 수 있습니다. - 버튼과 HTML 요소 설정
HTML의 <button> 요소를 사용해 "Download PDF" 버튼을 만들었고, id="download" 속성으로 버튼을 식별할 수 있게 했습니다. 이 버튼이 클릭되면 JavaScript가 실행되어 PDF가 생성됩니다. - PDF 생성 로직
JavaScript 코드에서는 document.getElementById("download").addEventListener("click", () => {...}) 구문을 사용해 버튼 클릭 이벤트를 처리하고 있습니다. 버튼이 클릭되면 html2pdf() 함수가 실행되며, 이 함수는 PDF로 변환할 HTML 요소인 #content를 선택해 PDF로 변환합니다. - PDF 설정
html2pdf() 함수 내부에서는 여러 설정이 가능합니다:- margin: 1: PDF의 여백을 1인치로 설정합니다.
- filename: "example.pdf": 다운로드되는 PDF 파일의 이름을 지정합니다.
- html2canvas: { scale: 2 }: PDF를 만들 때 캔버스의 해상도를 2배로 높여서 좀 더 선명한 결과물을 얻을 수 있습니다.
- jsPDF: { orientation: "portrait" }: PDF의 페이지 방향을 세로(portrait)로 설정합니다. 가로 방향이 필요하면 landscape로 변경할 수 있습니다.
- 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>
'js' 카테고리의 다른 글
| axios 장단점 및 사용 법 (0) | 2023.05.10 |
|---|---|
| 숫자에 콤마 표기 in javascript (0) | 2023.05.10 |
| promise (0) | 2021.04.23 |
| 비동기처리 (0) | 2021.04.23 |
| Truthy and Falsy (0) | 2021.04.23 |
댓글