HTML to PDF 변환기 (1)

Front-End 개발 중 인쇄 기능이 필요하다면 어떻게 하실 건가요?

프론트엔드 개발 중에는 종종 웹 페이지를 인쇄할 수 있는 기능을 구현해야 할 때가 있습니다. 이번 글에서는 프론트엔드에서 인쇄 기능을 구현하는 여러 가지 방법을 소개하겠습니다.

기본적인 방법: window.print()

가장 간단한 방법은 JavaScript의 기본 내장 함수인 window.print()를 사용하는 것입니다. 이 함수를 호출하면 브라우저의 인쇄 대화상자가 열리고 사용자가 페이지를 인쇄할 수 있습니다. 다음은 window.print() 함수를 사용한 예시 코드입니다.

function printPage() {
  window.print();
}

외부 라이브러리: jsPDF, Print.js 등

더욱 다양한 기능을 제공하기 위해 외부 라이브러리를 사용할 수도 있습니다. 여러 라이브러리 중에서는 jsPDF와 Print.js가 널리 사용되는데요. jsPDF는 JavaScript로 PDF를 생성하는 라이브러리이며, Print.js는 프린트 기능을 쉽게 사용할 수 있도록 도와주는 라이브러리입니다.

jsPDF를 사용한 예시 코드입니다.

function generatePDF() {
  const doc = new jsPDF();
  doc.text('Hello, World!', 10, 10);
  doc.save('sample.pdf');
}

Print.js를 사용한 예시 코드입니다.

function printPage() {
  PrintJS({
    printable: 'elementID',
    type: 'html',
    css: 'path/to/print.css'
  });
}

html2pdf 라이브러리

html2pdf는 HTML 요소를 PDF로 변환하여 다운로드할 수 있는 기능을 제공합니다. 이 라이브러리는 HTML의 특정 부분 또는 전체 페이지를 선택하여 PDF로 변환할 수 있으며, 다양한 옵션을 설정할 수 있습니다.

html2pdf를 사용한 예시 코드입니다.

function generatePDF() {
  const element = document.getElementById('elementID');
  html2pdf()
    .from(element)
    .save('sample.pdf');
}

html2pdf 라이브러리는 HTML을 PDF로 변환할 때 스타일과 레이아웃을 가능한 한 유지하려는 노력을 합니다. 이를 통해 인쇄된 PDF가 웹 페이지의 디자인과 구조를 최대한으로 보존하도록 도와줍니다.

회고

비교적 간단한 인쇄 기능을 구현하기 위해서는 window.print() 함수를 사용하는 것이 일반적입니다. 그러나 window.print() 함수는 브라우저에서 기본적으로 제공되는 인쇄 기능을 활용하기 때문에, 웹 페이지의 디자인과 레이아웃이 그대로 반영되지 않을 수 있습니다. 또한, 사용자가 브라우저 인쇄 대화상자에서 다양한 옵션을 선택할 수 있어, 개발자가 원하는 형태의 인쇄 결과물을 보장하기 어렵습니다.

이와 달리 html2pdf는 인쇄 시 디자인과 레이아웃을 가능한 한 웹 페이지와 동일하게 유지하려는 목표를 가지고 있습니다. html2pdf는 CSS 스타일을 잘 해석하여 PDF에 적용하며, HTML 요소의 위치와 크기를 웹 페이지와 동일하게 배치합니다. 따라서 사용자는 인쇄된 PDF에서도 웹 페이지의 디자인, 레이아웃, 텍스트 스타일 등을 거의 동일하게 확인할 수 있습니다.

비교적 간단한 인쇄 기능을 제공하는 라이브러리인 jsPDF나 Print.js의 경우, 인쇄 시에 HTML의 스타일과 레이아웃을 완벽하게 유지하는 것은 어려울 수 있습니다. 이러한 라이브러리들은 주로 HTML의 내용을 PDF로 변환하는 데 초점을 맞추고 있으며, CSS 스타일의 일부만을 적용할 수 있습니다. 따라서 웹 페이지의 복잡한 디자인이나 레이아웃을 그대로 인쇄할 필요가 있는 경우에는 html2pdf가 더 적합한 선택일 수 있습니다.

다음 포스팅에서는 html2pdf 라이브러리를 사용하여 이미지를 포함한 HTML 레이아웃을 PDF 로 변환하는 기능을 개발한 내용에 대해 작성하겠습니다.