html을 pdf로 변환 하는데 .. 가로방향과 여백 질문 ..!
본문
안녕하세요 초보 퍼블리셔입니다 !
브라우저를 pdf로 저장하는데 스크립트에서 어려움을 겪고있어서 도움좀 부탁드립니다 .ㅠㅠ
//pdf저장하기
$(document).ready(function() {
$('#savePdf').click(function() { // pdf저장 button id
html2canvas($('#pdfDiv')[0]).then(function(canvas) { //저장 영역 div id
// 캔버스를 이미지로 변환
var imgData = canvas.toDataURL('image/png');
var imgWidth = 190 // 이미지 가로 길이(mm) / A4 기준 210mm
var pageHeight = imgWidth * 1.414; // 출력 페이지 세로 길이 계산 A4 기준
var imgHeight = canvas.height * imgWidth / canvas.width;
var heightLeft = imgHeight;
var margin = 10; // 출력 페이지 여백설정
var doc = new jsPDF('p', 'mm', 'a4');
var position = 0;
// 첫 페이지 출력
doc.addImage(imgData, 'PNG', margin, position, imgWidth, imgHeight);
heightLeft -= pageHeight;
// 한 페이지 이상일 경우 루프 돌면서 출력
while (heightLeft >= 20) {
position = heightLeft - imgHeight;
doc.addPage();
doc.addImage(imgData, 'PNG', margin, position, imgWidth, imgHeight);
heightLeft -= pageHeight;
}
// 파일 저장
doc.save('file-name.pdf');
});
});
})
제가 이렇게 스크립트를 썼는데.. 가로방향으로 출력되게 하고싶거든요 ..
var doc = new jsPDF('l', 'mm', 'a4'); 여기까진 알겠는데
나머지부분을 어떻게바꿔야할지 .ㅠㅠ바보같지만 너무 어려워서 질문드립니다 .
그리고 출력화면에 좌우여백만생기고 상하여백이 생기지않는데 그부분도 도움 부탁드립니다 ..!
답변 1
var imgWidth = 190 // 이미지 가로 길이(mm) / A4 기준 210mm
var pageHeight = imgWidth * 1.414; // 출력 페이지 세로 길이 계산 A4 기준
var imgHeight = canvas.height * imgWidth / canvas.width;
이 부분, 가로,세크 크기 계산을
서로 바꿔야겠네요.