2017-08-21 11 views
0

でPDFに現在のページをエクスポートし、JSPDF私はPDFに現在のWebページをエクスポートしたいのjavascript

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.min.js"> </script> 
     <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script> 

     <script type="text/javascript"> 

      function getPDF() 
      { 

       html2canvas(document.body,{ 

        onrendered: function(canvas) 
        { 
        var img = canvas.toDataURL("image/png"); 
        var doc = new jsPDF(); 
        var width = doc.internal.pageSize.width;  
        var height = doc.internal.pageSize.height; 


        doc.setFont("helvetica"); 
        doc.setFontType("bold"); 
        doc.setFontSize(9); 


        alert(width) 
        alert(height) 
        // pdf.addImage(img, 'JPEG', 0, 0,width,height); 
       doc.addImage(img, 'JPEG', 0, 0,width,height); 
        doc.save("test.pdf"); 
        } 
       } 

       ); 
      } 


     </script> 

    </head> 

    <body> 

     <div id="dv" style="margin-top:120px"> 
     <span style="float:right"> 

      <input type="button" name="btn" id="btn" value="Download-pdf" onclick="getPDF();"/> 
     </span><br><br> 
     <table width="100%" border='1' style="text-align:center;border-collapse:collapse"> 

     <thead> 
       <tr> 

        <th> Row ddddd </th> 
        <th> Row ddddd </th> 
        <th> Row ddddd </th> 
        <th> Row ddddd </th> 
        <th> Row ddddd </th> 
        <th> Row ddddd </th><th> Row ddddd </th><th> Row ddddd </th> 


       </tr> 
     </thead> 
     <tbody> 

      <tr> 
      <td> Row ddddd </td><td> Row ddddd </td> 
      <td> Row ddddd </td><td> Row ddddd </td> 
      <td> Row ddddd </td><td> Row ddddd </td> 
      <td> Row ddddd </td><td> Row ddddd </td> 

      </tr> 
      <tr> 
      <td> Row ddddd </td><td> Row ddddd </td> 
      <td> Row ddddd </td><td> Row ddddd </td> 
      <td> Row ddddd </td><td> Row ddddd </td> 
      <td> Row ddddd </td><td> Row ddddd </td> 

      </tr><tr> 
      <td> Row ddddd </td><td> Row ddddd </td> 
      <td> Row ddddd </td><td> Row ddddd </td> 
      <td> Row ddddd </td><td> Row ddddd </td> 
      <td> Row ddddd </td><td> Row ddddd </td> 

      </tr><tr> 
      <td> Row ddddd </td><td> Row ddddd </td> 
      <td> Row ddddd </td><td> Row ddddd </td> 
      <td> Row ddddd </td><td> Row ddddd </td> 
      <td> Row ddddd </td><td> Row ddddd </td> 

      </tr><tr> 
      <td> Row ddddd </td><td> Row ddddd </td> 
      <td> Row ddddd </td><td> Row ddddd </td> 
      <td> Row ddddd </td><td> Row ddddd </td> 
      <td> Row ddddd </td><td> Row ddddd </td> 

      </tr><tr> 
      <td> Row ddddd </td><td> Row ddddd </td> 
      <td> Row ddddd </td><td> Row ddddd </td> 
      <td> Row ddddd </td><td> Row ddddd </td> 
      <td> Row ddddd </td><td> Row ddddd </td> 

      </tr><tr> 
      <td> Row ddddd </td><td> Row ddddd </td> 
      <td> Row ddddd </td><td> Row ddddd </td> 
      <td> Row ddddd </td><td> Row ddddd </td> 
      <td> Row ddddd </td><td> Row ddddd </td> 

      </tr><tr> 
      <td> Row ddddd </td><td> Row ddddd </td> 
      <td> Row ddddd </td><td> Row ddddd </td> 
      <td> Row ddddd </td><td> Row ddddd </td> 
      <td> Row ddddd </td><td> Row ddddd </td> 

      </tr><tr> 
      <td> Row ddddd </td><td> Row ddddd </td> 
      <td> Row ddddd </td><td> Row ddddd </td> 
      <td> Row ddddd </td><td> Row ddddd </td> 
      <td> Row ddddd </td><td> Row ddddd </td> 

      </tr><tr> 
      <td> Row ddddd </td><td> Row ddddd </td> 
      <td> Row ddddd </td><td> Row ddddd </td> 
      <td> Row ddddd </td><td> Row ddddd </td> 
      <td> Row ddddd </td><td> Row ddddd </td> 

      </tr><tr> 
      <td> Row ddddd </td><td> Row ddddd </td> 
      <td> Row ddddd </td><td> Row ddddd </td> 
      <td> Row ddddd </td><td> Row ddddd </td> 
      <td> Row ddddd </td><td> Row ddddd </td> 

      </tr><tr> 
      <td> Row ddddd </td><td> Row ddddd </td> 
      <td> Row ddddd </td><td> Row ddddd </td> 
      <td> Row ddddd </td><td> Row ddddd </td> 
      <td> Row ddddd </td><td> Row ddddd </td> 

      </tr><tr> 
      <td> Row ddddd </td><td> Row ddddd </td> 
      <td> Row ddddd </td><td> Row ddddd </td> 
      <td> Row ddddd </td><td> Row ddddd </td> 
      <td> Row ddddd </td><td> Row ddddd </td> 

      </tr><tr> 
      <td> Row ddddd </td><td> Row ddddd </td> 
      <td> Row ddddd </td><td> Row ddddd </td> 
      <td> Row ddddd </td><td> Row ddddd </td> 
      <td> Row ddddd </td><td> Row ddddd </td> 

      </tr><tr> 
      <td> Row ddddd </td><td> Row ddddd </td> 
      <td> Row ddddd </td><td> Row ddddd </td> 
      <td> Row ddddd </td><td> Row ddddd </td> 
      <td> Row ddddd </td><td> Row ddddd </td> 

      </tr><tr> 
      <td> Row ddddd </td><td> Row ddddd </td> 
      <td> Row ddddd </td><td> Row ddddd </td> 
      <td> Row ddddd </td><td> Row ddddd </td> 
      <td> Row ddddd </td><td> Row ddddd </td> 

      </tr><tr> 
      <td> Row ddddd </td><td> Row ddddd </td> 
      <td> Row ddddd </td><td> Row ddddd </td> 
      <td> Row ddddd </td><td> Row ddddd </td> 
      <td> Row ddddd </td><td> Row ddddd </td> 

      </tr><tr> 
      <td> Row ddddd </td><td> Row ddddd </td> 
      <td> Row ddddd </td><td> Row ddddd </td> 
      <td> Row ddddd </td><td> Row ddddd </td> 
      <td> Row ddddd </td><td> Row ddddd </td> 

      </tr><tr> 
      <td> Row ddddd </td><td> Row ddddd </td> 
      <td> Row ddddd </td><td> Row ddddd </td> 
      <td> Row ddddd </td><td> Row ddddd </td> 
      <td> Row ddddd </td><td> Row ddddd </td> 

      </tr> 
     </tbody> 
     </table> 

     </div> 
    </body> 

とブラウザを使用して、次のように私がしたが enter image description here

Iとしてページを表示しますpdfで同じページを得るでしょう enter image description here

pdfは元のものとは何か異なっています..正確なものを得るには何か提案をお願いしますpdfの品質を改善し、事前に感謝します。

+0

あなたのコードをjsfiddleにコピーするだけでコピーできます。 Pdfは問題ありません。これを見てくださいhttps://jsfiddle.net/2do0jy8v/ – Manoj

+0

ええ、上記の画像に示すようにpdfの品質は低いです..品質を改善するための提案 – rch

答えて

0

getPDFをより良いpdfに変更しました。 addHTML source code

function getPDF() { 
    var doc = new jsPDF(); 
    doc.addHTML(document.body, function() { 
     doc.save('test.pdf') 
    }) 
} 
関連する問題