반응형
html 영역을 PDF 다운로드 할수 있는 소스 입니다.
최상단에는 jspdf.js 와 html2canvas.min.js 가 필요함.
div id="report" 부분을 전체영역으로 설정했으며, 그 안에 영역도 세분화 하였습니다. (a,b,c,d)
스크립트 all_area_array 전체 영역을 잡았으며, pdf 다운영역은 b영역을 제외한 a,c,d 부분만 다운로드 처리 하였습니다.
간단한 소스 이므로 직접 해보시면 될것 같습니다.
<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script>
<script type="text/javascript" src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
<body>
<div class="report">
<div id="a">
<h1>A 영역 입니다.</h1>
</div>
<div id="b">
<h1>B 영역 입니다.</h1>
</div>
<div id="c">
<h1>C 영역 입니다.</h1>
</div>
<div id="d">
<h1>D 영역 입니다.</h1>
</div>
</div>
<button type="button" id="pdf">pdf 다운</button>
<script type="text/javascript">
let all_area_array = ['#a','#b','#c','#d']; //전체영역 area
let area_array = ['#a','#c','#d']; //pdf 다운 영역
$('#pdf').on("click", function () {
let difference = all_area_array.filter(x => !area_array.includes(x));
$.each(difference,function(index, item){
$(item).attr('data-html2canvas-ignore', true);
});
setTimeout(pdfMake(),500);
});
const pdfMake = () => {
html2canvas($('.report')[0]).then(function(canvas) {
let imgData = canvas.toDataURL('image/png');
let imgWidth = 210; // 이미지 가로 길이(mm) A4 기준
let pageHeight = imgWidth * 1.414; // 출력 페이지 세로 길이 계산 A4 기준
let imgHeight = canvas.height * imgWidth / canvas.width;
let heightLeft = imgHeight;
let doc = new jsPDF('p', 'mm');
let position = 0;
// 첫 페이지 출력
doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
heightLeft -= pageHeight;
// 한 페이지 이상일 경우 루프 돌면서 출력
while (heightLeft >= 20) {
position = heightLeft - imgHeight;
doc.addPage();
doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
heightLeft -= pageHeight;
}
let today = new Date();
let year = today.getFullYear();
let month = ('0' + (today.getMonth() + 1)).slice(-2);
let day = ('0' + today.getDate()).slice(-2);
let hours = ('0' + today.getHours()).slice(-2);
let minutes = ('0' + today.getMinutes()).slice(-2);
let dateString = year + month + day + hours + minutes;
// 파일 저장
doc.save("Report_"+dateString+'.pdf');
});
}
</script>
</body>
</html>반응형
'jQuery' 카테고리의 다른 글
| jQuery 화폐단위 천단위 콤마 (0) | 2023.09.01 |
|---|---|
| jQuery checkbox 전체선택 선택여부 선택값 (0) | 2023.09.01 |
| jQuery select 셀렉트 박스 선택값 지정 (0) | 2023.09.01 |
| jQuery radio 라디오 버튼의 체크된 값, 체크 여부 확인 (0) | 2023.09.01 |
| jquery 숫자만 입력 (0) | 2021.02.24 |