SVG 태그가 PDF 변환에 문제를 일으키는 경우, SVG 요소를 이미지로 변환한 다음 PDF에 추가할 수 있습니다. 아래 코드에서는 SVG를 이미지로 변환하고 jsPDF를 사용하여 PDF에 추가하는 방법을 보여줍니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML을 PDF로 변환하여 다운로드</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.4.0/jspdf.umd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is a sample content.</p>
<button onclick="generatePDF()">Generate PDF</button>
<script>
function generatePDF() {
const { jsPDF } = window.jspdf;
const pdf = new jsPDF();
const element = document.body;
html2canvas(element).then(canvas => {
const imageData = canvas.toDataURL('image/png');
pdf.addImage(imageData, 'PNG', 0, 0, pdf.internal.pageSize.getWidth(), pdf.internal.pageSize.getHeight());
pdf.save('output.pdf');
});
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML to PDF</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.4.0/jspdf.umd.min.js"></script>
</head>
<body>
<!-- 여기에 화면 내용을 추가합니다. -->
<h1>Hello, World!</h1>
<p>This is a sample content.</p>
<!-- SVG를 이미지로 변환하여 추가할 div 요소 -->
<div id="svgContainer">
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
</svg>
</div>
<button onclick="generatePDF()">Generate PDF</button>
<script>
async function generatePDF() {
const { jsPDF } = window.jspdf;
const pdf = new jsPDF();
const element = document.body; // 화면 내용을 포함하는 요소
const svgContainer = document.getElementById('svgContainer');
// SVG를 이미지로 변환하고 PDF에 추가
const svgElement = svgContainer.querySelector('svg');
const svgData = new XMLSerializer().serializeToString(svgElement);
const canvas = document.createElement('canvas');
const img = new Image();
img.src = 'data:image/svg+xml;base64,' + btoa(svgData);
img.onload = function() {
canvas.width = img.width;
canvas.height = img.height;
const ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0);
const imageData = canvas.toDataURL('image/jpeg');
pdf.addImage(imageData, 'JPEG', 10, 150, 100, 100);
// jsPDF의 html2pdf 모듈을 사용하여 HTML을 PDF로 변환
pdf.html(element, {
callback: function (pdf) {
// 생성된 PDF를 다운로드
pdf.save('output.pdf');
}
});
};
}
</script>
</body>
</html>
'웹 프로그래밍' 카테고리의 다른 글
| [웹프로그래밍] 로컬스토리지/세션저장소/쿠키 차이점 (0) | 2024.08.22 |
|---|---|
| [HTML/JS] js로 보이는 화면 PDF로 다운로드하기 (0) | 2023.09.18 |
| [웹페이지] HTML 내 변수 속성 'data-*' (0) | 2023.08.16 |
| sql datetime 타입을 파이썬으로 날짜형식으로 출력 (0) | 2023.08.08 |
| 제이쿼리로 첫번째 select 태그가 선택 될때마다 아래의 select option 태그 변경하기 (0) | 2023.08.08 |
댓글