JavaScript에서 PDF 생성
이 기사에서는 JavaScript 소스 코드에서 PDF 작성을 위한 최상의 라이브러리와 JavaScript 코드에서 해당 라이브러리를 사용하는 방법을 배웁니다.
JavaScript에서 PDF 생성
우리는 종종 PDF와 같은 웹 페이지에서 파일 다운로드 옵션을 보았습니다. 개발자는 이 기능을 사용자에게 제공하기 위해 프로그램 코드를 사용하여 PDF 파일을 생성해야 합니다.
JavaScript에서 여러 라이브러리를 사용하여 PDF 파일을 만들 수 있습니다. 예를 들어, 많은 웹사이트는 인보이스, 티켓, 이력서 등과 같은 파일을 생성하고 다운로드하는 기능을 제공합니다.
이러한 웹 사이트는 이 기능을 수행하기 위해 다른 라이브러리를 사용합니다. 예제를 통해 가장 일반적으로 사용되는 두 가지 라이브러리에 대해 토론하고 학습합니다.
jsPDF 라이브러리를 사용하여 JavaScript에서 PDF 생성
JavaScript의 경우에만 PDF를 생성하기 위한 npm 라이브러리 패키지 jsPDF가 있습니다. 이 라이브러리를 사용하는 동안 서버 측 스크립팅이 필요하지 않습니다.
동적 콘텐츠를 처리하여 PDF 파일을 생성할 수 있습니다. 아래와 같이 3줄의 코드로 PDF 파일을 생성하는 빠르고 간단한 방법입니다.
기본 구문:
var myDoc = new jsPDF(); // object
myDoc.text(10, 10, 'DelftStack Website!'); // content
myDoc.save('dummyFile.pdf'); // saving
객체를 생성하고 new 키워드와 jsPDF()를 사용하여 변수에 저장해야 합니다. 그런 다음 객체의 텍스트 속성을 사용하여 콘텐츠를 문자열로 설정해야 합니다.
마지막으로 저장 속성을 사용하여 PDF 파일을 저장합니다.
html2pdf 라이브러리를 사용하여 JavaScript에서 PDF 생성
html2pdf 라이브러리를 사용하면 JavaScript 소스를 사용하여 웹사이트에 포함하고 웹 페이지 콘텐츠를 PDF 문서로 변환할 수 있습니다. PDF 문서는 PDF로 다운로드할 수 있습니다.
라이브러리를 다운로드하고 사용하기 전에 소스로 가져오기만 하면 됩니다.
기본 구문:
const docElement = document.getElementById('ticket');
html2pdf().from(docElement).save();
위에 표시된 것처럼 document.getElementById()로 요소 콘텐츠를 가져오고 html2pdf().from(docElement).save()를 사용하여 콘텐츠를 PDF로 변환하고 파일을 다운로드할 수 있습니다.
예:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>HTML to PDF conversion</title>
<script src="html2pdf.bundle.min.js"></script>
<script>
function createPDF() {
// get the element of ticket content.
const docElement = document.getElementById('ticket');
// select the element and save as the PDF.
html2pdf().from(docElement).save();
}
</script>
</head>
<body>
<h1 style="color:blueviolet">DelftStack Learning</h1>
<h3>JavaScript create and download pdf</h3>
<div id="ticket">
<h1>Our Ticket</h1>
<p>Ticket content here</p>
</div>
<button onclick="createPDF()">Download as PDF</button>
</body>
</html>
출력:
위의 HTML 소스 예제에서는 html2pdf 라이브러리를 이미 다운로드하고 <head> 태그로 가져왔습니다. 우리는 티켓에 대한 div 요소를 생성하고 여기에 id ticket을 정의하고 더미 콘텐츠를 HTML의 해당 div 요소에 제공했습니다.
그런 다음 해당 버튼의 클릭 이벤트에 PDF로 다운로드 버튼 요소가 있습니다. createPDF() 함수를 호출했습니다. 그 함수 내에서 우선 document.getElementById('ticket')을 사용하여 요소를 만들고 변수에 저장합니다.
마지막으로 html2pdf 라이브러리 메서드 from() 및 save()를 사용했습니다. from() 메서드의 요소를 인수로 전달하고 save() 메서드를 호출하기만 하면 됩니다.
이 라이브러리를 다운로드하고 HTML 확장자로 위의 소스를 저장하고 브라우저에서 열어 결과를 확인하십시오.