<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js" integrity="sha512-GsLlZN/3F2ErC5ifS5QtgpiJtWd43JWSuIgh7mbzZ8zBps+dvLusV+eNQATqgA/HdeKFVgA5v3S/cIrLF7QnIg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
//html화면 작성
// * style="margin:0 auto; width: 96%;" pdf로 만들었을 때 화면이 잘려서.. 임의로 줄이고 가운데로 둠.
// * 테이블의 줄이 두껍게 보이는 경우 border-top:1px; border-left:1px; 을 이용해서 하나씩 넣어야함...
style="border:1px solid black; font-weight:bold; line-height:2; font-size:1.1em;"
<table id="itemTable" style="width: 100%; border:0px solid black;">
<colgroup>
<col width="20">
<col width="20">
<col width="40">
<col width="5">
<col width="5">
<col width="5">
<col width="5">
</colgroup>
<thead>
<tr style="background-color:#c9e1f0;">
<th scope="col" colspan="7" class="textCenter" style="border:1px solid black; font-weight:bold; line-height:2; font-size:1.1em;">OOOO</th>
</tr>
<tr style="border-left:1px solid black;">
<td class="textCenter" style="width:100%; border:1px solid black; border-top:1px; border-left:1px; padding-left:5px; font-weight:bold; line-height:2;">OOOO</td>
<td class="textCenter" style="width:100%; border:1px solid black; border-top:1px; border-left:1px; padding-left:5px; font-weight:bold; line-height:2;">OOOO</td>
<td class="textCenter" style="width:100%; border:1px solid black; border-top:1px; border-left:1px; padding-left:5px; font-weight:bold; line-height:2;">OOOO</td>
<td class="textCenter" style="width:100%; border:1px solid black; border-top:1px; border-left:1px; font-weight:bold; line-height:2;">OOOO</td>
<td class="textCenter" style="width:100%; border:1px solid black; border-top:1px; border-left:1px; font-weight:bold; line-height:2;">OOOO</td>
<td class="textCenter" style="width:100%; border:1px solid black; border-top:1px; border-left:1px; font-weight:bold; line-height:2;">OOOO</td>
<td class="textCenter" style="width:100%; border:1px solid black; border-top:1px; border-left:1px; font-weight:bold; line-height:2;">OOOO</td>
</tr>
</thead>
<tbody>
<tr style="border-left:1px solid black;">
<td rowspan="3" style="width:100%; border:1px solid black; border-top:1px; border-left:1px; padding-left:5px;"><p style="font-weight:bold; line-height:1.3; margin: 0 auto; padding-top:3px;">OOOO</p><span style="color: rgb(0, 117, 200); font-size: 15pt;">OOOO</span></td>
<td rowspan="3" style="width:100%; border:1px solid black; border-top:1px; border-left:1px; padding-left:5px;"><span style="font-size: 10pt;">OOOO</span></td>
...
function fn_downloadPDF(){
document.getElementById("loadinggif").style.display = "block";
// 스크롤이 탑에 있지 않으면 이미지가 아래로 쏠림 또는 상단에 공백이 생기는 문제가 있음
$('html').scrollTop(0);
setTimeout(function() {//스크롤 탑으로 올리고 정비하는 시간필요
var element = document.getElementById('element-to-print');
var opt = {
margin: 0.2,
filename: 'PDFfilename',
image: { type: 'jpeg', quality: 0.98 },
html2canvas: { scale: 4},
/* jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' } */
jsPDF: { unit: 'in', format: 'a4', orientation: 'portrait' }
};
// New Promise-based usage:
html2pdf().set(opt).from(element).save();
// Old monolithic-style usage:
//html2pdf(element, opt);
//$("#loadinggif").hide();
document.getElementById("loadinggif").style.display = "none";
}, 3000);
}
//페이지 넘어가는 경우에 대한 코드는 다른 것 다시 확인필요..[입회테스트 출력하기]
1px보다 얇게:
https://brunch.co.kr/@euid/6
html 화면을 PDF로 출력하기:
https://gold-goblin.tistory.com/entry/html-%ED%99%94%EB%A9%B4%EC%9D%84-PDF%EB%A1%9C-%EC%B6%9C%EB%A0%A5%ED%95%98%EA%B8%B0
html -> image :
https://htmlcsstoimage.com/demo
https://html2canvas.hertzen.com
https://nevergiveup.tistory.com/entry/html-to-image-html-%ED%8E%98%EC%9D%B4%EC%A7%80%EB%A5%BC-%EC%9D%B4%EB%AF%B8%EC%A7%80%EB%A1%9C-%EB%B3%80%EA%B2%BD
https://every-time-i-pass-this-place.tistory.com/entry/html2canvas-%EC%82%AC%EC%9A%A9%EB%B2%95-%EC%BA%A1%EC%B2%98%EB%A5%BC-%EC%9D%B4%EB%AF%B8%EC%A7%80%EB%A1%9C-%EB%8B%A4%EC%9A%B4%EB%A1%9C%EB%93%9C
https://sub0709.tistory.com/48
https://docs.htmlcsstoimage.com/example-code/javascript/#generating-images-with-javascript
크롬에서 이미지 흐리게 보임
https://abcdqbbq.tistory.com/100
https://velog.io/@neojs89/html2canvas-jspdf-%ED%95%B4%EC%83%81%EB%8F%84-%EA%B0%9C%EC%84%A0
*html2canvas에서 제한사항이 하나 있었다.
이것때문에 1시간 반을 날려먹었다^^
크롬기준으로 15000픽셀을 넘어가는 페이지는 텍스트가 제대로 저장되지 않았다.
( 1920x1080 이미지를 저장하는데 이상하게 15번째 다음의 이미지를 제대로 인식 못하도라... )
그래서 쓴 방법 하나는 저장된 이미지를 display : none을 해줬다가 모두 다운 됐으면 다시 보이도록 처리해줬다 :)
https://abettercode.tistory.com/77
결국 다시 위 블로그의 html2canvas-jspdf로 원복하고 스택오버플로우에서 해결법을 찾게되었다.
pdf를 생성하는순간 스크롤이 브라우저의 최상단에 위치하고 있어야 한다는 것이고 적용하니 PDF 상단에 공백이 사라졌다.