jspdf 플러그인을 사용하여 pdf를 생성합니다.

1988 단어
html2canvas.js 다운로드 링크https://download.csdn.net/download/qq_27224549/10038984
원리: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');
         }
     })
 }
 });

 
 

좋은 웹페이지 즐겨찾기