자바스크립트에서 pdf 출력하기 (html2canvas + jspdf)
https://rawgit.com/MrRio/jsPDF/master/docs/jsPDF.html
jsPDF - Documentation
The identity matrix (equivalent to new Matrix(1, 0, 0, 1, 0, 0)). Starts a new pdf form object, which means that all consequent draw calls target a new independent object until endFormObject is called. The created object can be referenced and drawn later u
rawgit.com
<script src="/lib/pdfjs/jspdf.min.js"></script>
<script src="/lib/pdfjs/bluebird.min.js"></script>
<script src="/lib/pdfjs/html2canvas.min.js"></script>
<script>
function pdfPrint(){
// 현재 document.body의 html을 A4 크기에 맞춰 PDF로 변환
html2canvas(document.body, {
onrendered: function (canvas) {
// 캔버스를 이미지로 변환
var imgData = canvas.toDataURL('image/png');
var imgWidth = 210; // 이미지 가로 길이(mm) A4 기준
var pageHeight = imgWidth * 1.414; // 출력 페이지 세로 길이 계산 A4 기준
var imgHeight = canvas.height * imgWidth / canvas.width;
var heightLeft = imgHeight;
var doc = new jsPDF('p', 'mm');
var 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;
}
// 파일 저장
doc.save('sample.pdf');
//이미지로 표현
//document.write('<img src="'+imgData+'" />');
}
});
}
window.onload = function(){
pdfPrint();
}
</script>
* chart.js 를 출력할 경우
애니메이션을 사용하지 않아야 그래프 길이가 정상 적으로 나온다.
responsiveAnimationDuration: 0,
animation: { duration: 0 },
참고
[JS] HTML 화면을 PDF로 출력
프로젝트에서 화면(html)을 PDF로 출력해야하는 경우가 생겼다. iText 라이브러리의 경우 html을 pdf로 변환해주지만 CSS 적용에 한계가 있어서(매우 제한적이다) 결국 이미지로 변환을 거쳐 PDF로 출력하는 방법..
otep.tistory.com
// 현재 document.body의 html을 A4 크기에 맞춰 PDF로 변환
html2canvas(document.body, {
onrendered: function(canvas) {
// 캔버스를 이미지로 변환
var imgData = canvas.toDataURL('image/png');
var imgWidth = 210; // 이미지 가로 길이(mm) A4 기준
var pageHeight = imgWidth * 1.414; // 출력 페이지 세로 길이 계산 A4 기준
var imgHeight = canvas.height * imgWidth / canvas.width;
var heightLeft = imgHeight;
var doc = new jsPDF('p', 'mm');
var 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;
}
// 파일 저장
doc.save('sample_A4.pdf');
}
});
https://jsfiddle.net/crabbly/kL68ey5z/
Chart.js and jsPDF - JSFiddle
jsfiddle.net
https://itinerant.tistory.com/51
[JavaScript] html2canvas 사용 방법
[JavaScript] html2canvas html2canvas : 웹(html)에서 화면을 캡쳐하는 기능. 실질적으로는 선택한 요소를 Canvas에 그린다. 하위 자식들까지 모두 canvas에 그린다. 예1) Body 안의 모든 요소를 Canvas에 그릴..
itinerant.tistory.com
//
html2canvas(document.body, {
backgroundColor: "#000000" # 배경 색 선택. 기본값 : 흰색
}).then(function(canvas) {
var base64image = canvas.toDataURL("image/png");
window.open(base64image , "_blank"); // Open the image in a new window
});
// Javascript일 경우
html2canvas(document.getElementById("capture")).then(function(canvas) {
});
// JQuery일 경우
html2canvas($("capture")[0]).then(function(canvas) {
});
data-html2canvas-ignore="true"로 canvas에서 보여지지 않게 처리
<div id="capture">
<span>a</span>
<span>b</span>
<div id="hide" data-html2canvas-ignore="true">
<span>c</span>
</div>
</div>
a태그 사용해서 저장할 경우
html2canvas(document.body, {
onrendered: function (canvas) {
var a = document.createElement('a');
a.href = canvas.toDataURL("image/jpeg").replace("image/jpeg", "image/octet-stream");
a.download = 'out.jpg';
a.click();
}
});