js 또는 php를 사용하여 html 웹 페이지를 pdf로 변환하는 방법

저자：Eve Cole 업데이트 시간：2024-12-13 08:48:02

Downcodes의 편집기는 JavaScript와 PHP를 사용하여 HTML 웹 페이지를 PDF 파일로 변환하는 방법에 대한 튜토리얼을 제공합니다. 이 기사에서는 JavaScript 라이브러리 jsPDF 사용과 PHP 라이브러리 TCPDF 또는 mPDF 사용이라는 두 가지 방법을 자세히 설명합니다. jsPDF 라이브러리는 클라이언트 측에서 직접 변환을 허용하는 반면, PHP 라이브러리는 서버 측에서 처리가 필요합니다. jsPDF 사용법을 중점적으로 설명하고 코드 예제를 제공하며 라이브러리 소개, HTML 콘텐츠 처리, PDF 인스턴스 생성, 형식 조정, 파일 저장 등의 단계를 다루겠습니다. 또한 PHP를 사용한 변환 방법 및 고급 기능에 대해서도 간략하게 소개합니다. .그림, 워터마크, 머리글 및 바닥글 추가 등의 구현 어떤 방법을 선택하든 이 문서는 HTML을 PDF로 효율적으로 변환하는 데 도움이 될 것입니다.

웹 페이지를 PDF로 변환하는 것은 일반적인 요구 사항이며 이를 통해 웹 사이트 콘텐츠를 고정된 형식으로 저장할 수 있습니다. JavaScript 또는 PHP를 사용하여 HTML 웹 페이지를 PDF로 변환하는 방법에는 JavaScript 라이브러리 사용 및 PHP 라이브러리 사용이 포함됩니다. 이러한 변환 도구 중에서 jsPDF 및 html2pdf.js와 같은 JavaScript 라이브러리가 매우 널리 사용되는 반면, PHP에는 TCPDF 또는 mPDF와 같은 라이브러리가 있습니다. 변환을 수행하기 위해 JavaScript의 jsPDF 라이브러리를 사용하는 데 중점을 둘 것입니다. 이는 jsPDF 라이브러리가 우수한 클라이언트 지원을 제공하고 작동이 간단하며 서버와 통신하지 않고도 변환을 완료할 수 있기 때문입니다.

jsPDF는 프런트엔드 환경에서 작동하고 백엔드 지원이 필요하지 않은 순수 JavaScript로 작성된 라이브러리입니다. jsPDF를 사용하려면 먼저 해당 라이브러리 파일을 프로젝트에 도입해야 합니다. jsPDF의 GitHub 저장소나 npm을 통해 설치할 수 있습니다. jsPDF 라이브러리가 도입되면 JavaScript 코드를 사용하여 HTML 내용을 읽고 jsPDF에서 제공하는 API를 사용하여 PDF 파일을 생성할 수 있습니다.

1. JSPDF 라이브러리 소개

변환 프로세스를 시작하려면 먼저 jsPDF를 웹 페이지로 가져와야 합니다. jsPDF 라이브러리를 직접 다운로드하여 전달할 수 있습니다.

또는 npm을 사용하여 설치합니다.

npm jspdf 설치

그런 다음 JavaScript 파일로 가져옵니다.

jspdf에서 { jsPDF }를 가져옵니다.

2. HTML 콘텐츠 선택 및 수정

PDF를 생성하기 전에 HTML을 수정하여 변환된 PDF 파일이 요구 사항을 충족하는지 확인할 수 있습니다. 예를 들어 특정 페이지 요소를 숨기고 기본 콘텐츠만 유지해야 할 수도 있습니다.

// 변환이 필요한 HTML 요소를 가져옵니다.

const 요소 = document.getElementById('content-to-pdf');

// 불필요한 요소를 숨기는 등 HTML 콘텐츠를 수정합니다.

element.querySelectorAll('.no-print').forEach(element => element.style.display = 'none');

3. JSPDF 인스턴스 생성 및 HTML 변환

새로운 jsPDF 인스턴스를 생성하고 jsPDF에서 제공하는 API를 사용하여 HTML 요소를 읽고 PDF 형식으로 변환합니다.

const doc = 새로운 jsPDF();

// 페이지를 A4 크기 PDF로 렌더링한다고 가정합니다.

doc.html(document.body, {

콜백: 함수(문서) {

doc.save('webpage.pdf');

x: 10,

y: 10,

폭: 190,

창 너비: document.body.scrollWidth

});

4. PDF 형식 및 레이아웃 조정

변환 프로세스 중에 페이지 크기, 여백 또는 가로 방향으로 인쇄해야 하는지 여부 등 PDF의 형식과 레이아웃을 조정해야 할 수 있습니다.

const doc = 새로운 jsPDF({

방향: 'p', // 세로

단위: 'mm', // 단위는 밀리미터입니다.

format: 'a4', // 형식은 A4 용지입니다.

});

5. PDF 파일 저장

HTML 콘텐츠가 PDF로 변환되면 save() 메서드를 사용하여 파일을 저장하거나 결과 PDF 데이터를 처리할 수 있습니다.

doc.save('converted-webpage.pdf'); // PDF 파일 저장

6. PHP를 사용하여 HTML을 PDF로 변환

서버 측에서 HTML을 PDF로 변환하려면 TCPDF 또는 mPDF와 같은 PHP 라이브러리를 사용할 수 있습니다. 이러한 라이브러리를 사용하려면 먼저 일반적으로 Composer를 통해 PHP 환경에 라이브러리를 도입해야 합니다.

작곡가는 tecnickcom/tcpdf가 필요합니다.

그런 다음 PHP 스크립트에서 TCPDF 개체를 만들고 개체에서 제공하는 메서드를 사용하여 HTML 코드를 PDF 형식으로 변환합니다.

require_once('tcpdf_include.php');

//새 PDF 문서 생성

$pdf = 새로운 TCPDF(PDF_PAGE_ORIENTATION, PDF_UNIT, PDF_PAGE_FORMAT, true, 'UTF-8', false);

//문서 정보 설정

$pdf->SetCreator(PDF_CREATOR);

$pdf->SetAuthor('당신의 이름');

$pdf->SetTitle('TCPDF 예제 001');

$pdf->SetSubject('TCPDF 튜토리얼');

$pdf->SetKeywords('TCPDF, PDF, 예제, 테스트, 가이드');

//페이지 추가

$pdf->페이지 추가();

//컨텐츠 설정

$html = '

TCPDF에 오신 것을 환영합니다!

$pdf->writeHTML($html, 참, 거짓, 참, 거짓, '');

// PDF 출력

$pdf->Output('example_001.pdf', '나');

7. 스타일 및 글꼴 관리

PDF 변환을 처리할 때 결과 PDF 파일이 웹 콘텐츠의 스타일을 유지하도록 문서의 스타일과 글꼴을 고려할 수 있습니다.

jsPDF와 TCPDF 모두 스타일에 대한 기본 지원을 제공하며 HTML에서 직접 CSS 스타일을 사용하거나 PDF를 생성할 때 스타일을 적용할 수 있습니다. 그러나 PDF는 웹 페이지와 완전히 동일하게 렌더링되지 않으므로 약간의 차이가 있을 수 있습니다. jsPDF의 경우 플러그인을 통해 CSS 지원을 향상할 수 있습니다. TCPDF를 사용하면 최상의 결과를 얻으려면 CSS를 신중하게 조정해야 합니다.

doc.setFont(helvetica);

doc.setFontStyle(bold);

doc.setFontSize(16);

doc.text(Hello World!, 10, 10);

$html = '

파란색 제목입니다.

$pdf->writeHTML($html, 참, 거짓, 참, 거짓, '');

8. 고급 기능 및 사용자 정의

PDF 변환 프로세스 중에 머리글 및 바닥글, 워터마크, 표, 이미지 등과 같은 일부 고급 기능을 처리해야 할 수도 있습니다. 이러한 기능은 일반적으로 jsPDF 및 TCPDF 라이브러리에서 지원되지만 약간 다르게 구현됩니다. 특정 요구에 따라 해당 라이브러리 함수를 호출하여 이를 달성할 수 있습니다.

jsPDF는 이미지 추가를 위한 addImage(), 문서 속성 설정을 위한 setProperties() 등 PDF의 기능을 향상시키는 다양한 방법을 제공합니다.

// 이미지 추가

doc.addImage(imgData, 'JPEG', 15, 40, 180, 160);

TCPDF는 PDF의 고급 콘텐츠를 처리할 수 있는 강력한 기능도 제공합니다.

// 헤더 설정

$pdf->setHeaderData('', 0, '제목', '헤더', 배열(0,64,255), 배열(0,64,128));

$pdf->setHeaderFont(Array('helvetica', '', 10));

//워터마크 추가

$pdf->SetAlpha(0.3);

$pdf->Image('watermark.png', 25, 110, 160, 40, '', '', '', false, 300, '', false, false, 0);

//완전한 투명도 복원

$pdf->SetAlpha(1);

요약하자면 JavaScript 또는 PHP를 사용하여 HTML 웹 페이지를 PDF 파일로 변환하려면 적절한 라이브러리 선택, 웹 페이지 콘텐츠 처리, PDF 레이아웃 조정 및 라이브러리에서 제공하는 고급 기능을 사용하여 복잡한 사용자 정의 요구 사항을 충족해야 합니다. 클라이언트 측에서 jsPDF를 선택하든 서버 측에서 TCPDF를 선택하든 상관없이 기본 구현 단계와 방법은 유사합니다. 특정 구현 중에는 프로젝트의 실제 요구 사항과 환경에 따라 가장 적절한 도구와 방법을 선택해야 합니다.