반응형
[JavaScript] 자바스크립트를 활용하여 html을 pdf로 다운 받는 방법 !!
HTML 페이지를 PDF로 변환하기 위해 JavaScript에서는 일반적으로
jsPDF 라이브러리와 함께 html2canvas 라이브러리를 사용합니다.
이 두 라이브러리를 활용하면 웹 페이지의 특정 부분이나 전체를 캡처하여 PDF 문서로 만들 수 있습니다 !!
아래는 HTML 페이지의 내용을 PDF로 변환하는 JavaScript 코드 예시입니다 :)
예제코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form id="userForm">
<label for="userId">User ID:</label><br>
<input type="text" id="userId" name="user_id"><br>
<label for="userName">User Name:</label><br>
<input type="text" id="userName" name="user_name"><br><br>
</form>
<button onclick="downloadPDF()">PDF로 다운로드</button>
</body>
</html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.3.1/jspdf.umd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.3.2/html2canvas.min.js"></script>
<script>
function downloadPDF() {
const element = document.body; // PDF로 변환하고자 하는 HTML 요소를 선택합니다. 예: document.getElementById('your-element-id')
html2canvas(element).then((canvas) => {
const imgData = canvas.toDataURL('image/png');
const pdf = new jspdf.jsPDF();
const imgProps= pdf.getImageProperties(imgData);
const pdfWidth = pdf.internal.pageSize.getWidth();
const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width;
pdf.addImage(imgData, 'PNG', 0, 0, pdfWidth, pdfHeight);
pdf.save("download.pdf");
});
}
</script>728x90
반응형
'Coding > JavaScript' 카테고리의 다른 글
| [JavaScript] 자바스크립트로 sessionStorage 데이터 저장 및 사용, 삭제 하는 방법 !! (0) | 2024.01.27 |
|---|---|
| [JavaScript] 자바스크립트를 활용하여 localStorage 에 데이터 넣고 지우는 방법 !! (0) | 2024.01.22 |
| [JavaScript] 자바스크립트로 wav 파일 실행하는 방법 !! (0) | 2024.01.04 |
| [JavaScript] 자바스크립트로 초간단 미사일 피하기 게임 만들기 5 !! (게임오버 사진추가 기능) (2) | 2023.12.31 |
| [JavaScript] 자바스크립트로 초간단 미사일 피하기 게임 만들기 4 !! (배경화면 추가 및 게임오버 화면 추가) (11) | 2023.12.27 |
댓글