jspdf 플러그인을 사용하여 pdf를 생성합니다.
원리:canvas를 통해div를 그림으로 절단한다.동적 계산 페이지를 나누고 그림을 pdf에 삽입합니다.
설명:document.conn conn이 conn이면 인쇄할 div입니다.
주의:div에 그림이 있습니다. 그림 경로는 상대 경로를 써야 합니다. 그렇지 않으면 그림이 인쇄되지 않습니다.div의 배경은 흰색으로 설정해야 합니다. 그렇지 않으면 생성된 pdf는 검은색입니다.
$(document).ready(function(){
//
var downPdf = document.getElementById("renderPdf");
var name = document.getElementById("name").innerHTML;
downPdf.onclick = function() {
html2canvas(document.conn, {
onrendered:function(canvas) {
var contentWidth = canvas.width;
var contentHeight = canvas.height;
// pdf html canvas ;
var pageHeight = contentWidth / 592.28 * 841.89;
// pdf html
var leftHeight = contentHeight;
//pdf
var position = 0;
//a4 [595.28,841.89],html canvas pdf
var imgWidth = 595.28;
var imgHeight = 592.28/contentWidth * contentHeight;
var pageData = canvas.toDataURL('image/jpeg', 1.0);
var pdf = new jsPDF('', 'pt', 'a4');
// , html , pdf (841.89)
// pdf ,
if (leftHeight < pageHeight) {
pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight );
} else {
while(leftHeight > 0) {
pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
leftHeight -= pageHeight;
position -= 841.89;
//
if(leftHeight > 0) {
pdf.addPage();
}
}
}
pdf.save(name+'.pdf');
}
})
}
});
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다양한 언어의 JSONJSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.