분류 html

브라우저에서 HTML 요소의 PDF 생성

컨텐츠 정보

  • 조회 14 (작성일 )

본문

이 기사에서는 브라우저에서 모든 HTML 요소의 PDF를 생성 할 수 있는 방법, 즉 완전히 클라이언트 측에 대해 살펴 보겠습니다.


html2pdf 패키지를 사용하여 PDF를 생성합니다.


html2pdf는 html2canvas를 사용하여 HTML 요소를 캔버스로 변환 한 다음 이미지로 변환합니다. 그런 다음 jsPDF의 도움으로 이미지의 PDF를 생성합니다.


html2canvas에 대해 더 알고 싶다면 이 기사를 확인하세요. 


Implementation 


html2pdf 패키지의 작은 구현을 살펴 보겠습니다.


index.html 


패키지의 번들 링크가 포함 된 기본 HTML 페이지입니다.


간단한 콘텐츠의 div 블록과 PDF 내보내기 버튼을 만들었습니다. PDF 내보내기 버튼을 클릭하면 ID가 뷰인 div의 PDF를 생성합니다.


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML2PDF</title>
    <script src="https://raw.githack.com/eKoopmans/html2pdf/master/dist/html2pdf.bundle.js" defer></script>
    <script src="./script.js" defer></script>
</head>

<body onload="main()" align="center">
    <div id="view" align="center">
        <h1>Export PDF</h1>
        <h3>Using HTML2PDF</h3>
    </div>
    <button id="export-pdf">Export PDF</button>
</body>

</html>


script.js 


사이트가 로드되고 PDF 내보내기 버튼에서 onclick 이벤트를 수신하면 호출되는 기본 메소드가 포함 된 JavaScript 파일입니다.


PDF 내보내기 버튼을 클릭하면 요소 (div)에 대한 참조를 인수로 사용하는 html2pdf 메서드가 호출됩니다.


function main() {
    var view = document.getElementById("view");
    var exportPDF = document.getElementById("export-pdf");
    exportPDF.onclick = (e) => html2pdf(view);
}


버튼을 클릭하면 PDF가 생성되어 시스템에 직접 다운로드됩니다.


이미지 유형, 품질, 파일 이름 등을 처리하기 위해 html2pdf 메소드의 일부 구성 옵션을 전달할 수도 있습니다. 이에 대한 자세한 내용은 여기를 확인하십시오.


참고 : 이미지 기반 PDF는 검색 할 수 없습니다.


Github 저장소 : PDF 생성기


https://dev.to/bibekkakati/generate-pdf-of-html-element-in-browser-lg9



PDF