JavaScript에서 HTML을 PDF로 변환
Kushank Singh
2023년10월12일
웹 응용 프로그램에서 대용량 데이터를 다운로드할 때 PDF 파일 형식이 유용합니다. 이를 통해 사용자는 동적 자료를 오프라인 사용을 위한 파일로 다운로드할 수 있습니다. HTML 자료는 PDF 문서로 변환되고 PDF로 내보내기 기능을 사용하여 PDF 파일로 다운로드됩니다. 서버측 스크립트는 동적 웹 응용 프로그램에서 HTML을 PDF로 변환합니다.
이 자습서에서는 JavaScript를 사용하여 이러한 변환을 수행합니다.
jsPDF 라이브러리를 사용하여 HTML을 PDF로 변환
이 방법에서는 jsPDF 라이브러리를 사용하여 HTML을 PDF로 변환합니다. 사용하기에 가장 좋은 라이브러리 중 하나입니다. jsPDF 라이브러리는 PDF 생성을 사용자 정의하기 위한 여러 기술과 옵션을 제공합니다.
아래 코드를 확인하세요.
- HTML
<!DOCTYPE html>
<html>
<body>
<div>
<p>Convert this text to PDF.</p>
</div>
<div id="hidden-element">This will not be printed</div>
</body>
</html>
- 자바스크립트
var source = window.document.getElementsByTagName('body')[0];
var specialElementHandlers = {
'#hidden-element': function(element, renderer) {
return true;
}
};
var doc = new jsPDF({orientation: 'landscape'});
doc.setFont('courier');
doc.setFontType('normal');
doc.setFontSize(24);
doc.setTextColor(100);
doc.fromHTML(
elementHTML, 15, 15,
{'width': 170, 'elementHandlers': specialElementHandlers});
orientation 속성은 용지의 방향을 설정합니다. setFont() 및 setFontType() 옵션은 텍스트의 글꼴 및 글꼴 스타일을 설정하는 데 사용됩니다. setFontSize() 및 setTextColor() 함수는 텍스트의 글꼴 크기와 색상을 설정하는 데 사용됩니다.
창 개체를 사용하여 HTML을 PDF로 변환
이 방법에서는 연결된 문서를 만들고 파일에 HTML 텍스트를 작성하여 PDF로 내보내는 데 사용할 창 개체를 만듭니다.
아래 코드 참조
<html>
<head>
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$("#btnPrint").live("click", function () {
var divContents = $("#text").html();
var printWindow = window.open('', '', 'height=400,width=800');
printWindow.document.write('<html><head><title>Html to PDF</title>');
printWindow.document.write('</head><body >');
printWindow.document.write(text);
printWindow.document.write('</body></html>');
printWindow.document.close();
printWindow.print();
});
</script>
</head>
<body>
<form id="form1">
<div id="text">
Convert this text to PDF.
</div>
<input type="button" value="Print Div Contents" id="btnPrint" />
</form>
</body>
</html>
위의 예에서 window.open() 함수는 지정된 크기의 문서를 열고 document.write() 메서드는 열린 문서에 텍스트를 쓰는 데 사용됩니다.