2017-02-16 26 views
0

Html2canvas、jsPdf、およびangularjsを使用して、私のウェブページの一部のスクリーンショットを取ってPDFプレビューとして表示します。私は正常にPDFにコンテンツをエクスポートすることができたが、それはコンテンツの半分を示しています。これを修正するにはどうすればよいですか?Html2canvas - コンテンツの半分だけがpdfに表示されます

ここにpdfを作成するボタンがあります。 (rollup.html)

<button ng-click="genPDF()">PDF Test</button> 

は、コントローラの中で、私はここで私は信じhtml2canvas関数(rollup.js) を用い「document.body.appendChild」はコメントアウトされたとき、それは別のコピーを示すための鍵であってもよいです'pdfTest'がクリックされたときのウェブページ内の表の、PDFプレビュー内ではなく、コンテンツの半分だけである。

テーブルが作成されたHTMLページ内もちろん
app.controller('Rollup', function($scope, $rootScope, $http, $uibModal, headersvc, locFiltersvc) { 

..... 
$scope.genPDF = function(){ 

    html2canvas(document.getElementById("testDiv"), { 
     onrendered: function (canvas) { 

      //document.body.appendChild(canvas); 

      var img = canvas.toDataURL("image/png"); 
      var doc = new jsPDF(); 
      doc.addImage(img, 'JPEG',10,10); 
      doc.save('test.pdf'); 


      //IE 9-11 WORK AROUND 
      if (navigator.userAgent.indexOf("MSIE ") > 0 || 
        navigator.userAgent.match(/Trident.*rv\:11\./)) 
      { 
       var blob = canvas.msToBlob(); 
       window.navigator.msSaveBlob(blob,'Test file.png'); 
      } 

     }, 
     //width: 300, 
     //height: 300 
    });  
} 

}); 

、私はPDFファイルに登場するコンテンツへのdiv内testDivのIDを持っている。(route.html)

<div class="row" id="testDiv"> 
....all the table content 
</div> 

どのように私はそれを切断せずにPDFプレビューに完全なコンテンツを合わせることができますか?どんな助けでも大歓迎です。

答えて

0

解決策が見つかりました。ここでは、doc.addImageにパラメータを追加します。

doc.addImage(img, 'JPEG',10,10,190,200); 

は、私は、PDFのページの画像が100%を作成する方法がわからないのですが、これで私は、少なくともテーブルのために最適に動作パラメータを設定することができます。うまくいけば、私はより良い解決策を見つけることができますが、これは今のところうまくいきます。

+0

もっと良い解決策を見つけたことがありますか? –

+0

私はhtml2canvasメソッドを削除し、pdfmakeの使用を開始し、pdfとして生成されるコンテンツのマージンを設定しました。この方法はpdfsの印刷に適しています。 – Adrew

関連する問題