jsPDF

Question

으로 PDF를 생성 내가 div

<div id="content"> 
    .... 
    <img src="link"> 

    <div> 
     <?php echo $content1; ?> 
    /div> 
    <table border = 1> 
     <tr> 
      <td><?php echo $content1; ?></td> 
      <td><?php echo $content1; ?></td> 
     </tr> 
    </table> 
</div> 

<button onClick="generatePDF()" >generate PDF</button> 

function generatePDF() 
{ 
    var pdf = new jsPDF('p', 'mm', 'a0'); 
    var canvas = pdf.canvas; 

    canvas.height = 297; 
    canvas.width = 210; 

    html2canvas($('#estimateContent').get(0), { 
     canvas:canvas, 
     allowTaint: true, 
     onrendered: function (canvas) { 
      pdf.save("Current Data2.pdf") 
     } 
    }); 
} 

에서 PHP 페이지를 가지고있는 PDF가 비어 있습니다. 내 div처럼 PDF를 생성하는 방법? 같은 pdf.canvas

로 jsPDF에 대한 속성이 없습니다

덕분에 많은

Answer 1

PDF 파일로 캔버스 에서 데이터를 렌더링하는 canvas.toDataUrl()와 jsPDF.addImage()를 사용할 수 있습니다.

<div id="content"> 
.... 
<img src="link"> 

<div> 
<?php echo $content1; ?> 
/div> 
<table border = 1> 
<tr> 
<td><?php echo $content1; ?></td> 
<td><?php echo $content1; ?></td> 
</tr> 
</table> 
</div> 

<button onClick="generatePDF()" >generate PDF</button> 

function generatePDF() 
{ 
    html2canvas($('#content'), { 
     allowTaint: true, 
     onrendered: function (canvas) { 
      var imgData = canvas.toDataURL("image/jpeg", 1.0); 
      var pdf = new jsPDF('p', 'mm', 'a0'); 

      pdf.addImage(imgData, 'JPEG', 0, 0); 
      pdf.save("Current Data2.pdf") 
     } 
    }); 
} 

아니면 jsPDF 및 html2canvas에 추가 HTML2PDF를 사용할 수는 : 여기 https://github.com/eKoopmans/html2pdf

실제입니다 코드 (PDF에 대한 캔버스와 종이의 크기에 대한 약간의 조정과) 같은 것을해야한다 코드 샘플에 대한 응용 프로그램 :. (0) html2canvas입니다

<div id="content"> 
.... 
<img src="link"> 

<div> 
<?php echo $content1; ?> 
/div> 
<table border = 1> 
<tr> 
<td><?php echo $content1; ?></td> 
<td><?php echo $content1; ?></td> 
</tr> 
</table> 
</div> 

<button onClick="generatePDF()" >generate PDF</button> 

function generatePDF() 
{ 

    var element = document.getElementById('content'); 

    html2pdf(element, { 
     margin:  1, 
     filename:  'Current Data2.pdf', 
     image:  { type: 'jpeg', quality: 0.98 }, 
     html2canvas: { dpi: 192, letterRendering: true, allowTaint: true, onrendered: function(canvas) { 
      // canvas is the final rendered <canvas> element 
      //if you need to perform some actions, cleanup, etc after the canvas has been generated 
     } }, 
     jsPDF:  { unit: 'mm', format: 'a0', orientation: 'portrait' } 
    }); 

}