Html2canvas - 只有一半的內容顯示在pdf中

使用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預覽中，但只有一半的內容在網頁內。

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 
    });  
} 

});

在其中創建表的HTML頁面中。當然，我有div來我要出現在PDF中的內容中的testDiv的ID。（route.html）

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

如何在不截斷的情況下將全部內容放入pdf預覽？任何幫助是極大的讚賞。

來源

2017-02-16 Adrew

找到了一個解決方案，將參數添加到doc.addImage中。

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

我不知道如何使PDF頁面的圖像100％，但這個我可以設置爲工作表中最好的ATLEAST參數。希望我能找到一個更好的解決方案，但現在這個工作。

來源

2017-02-16 19:07:39 Adrew

你有沒有找到更好的解決方案？ –

我放棄了html2canvas方法，並開始使用pdfmake併爲作爲pdf生成的內容設置邊距。這種方法更適合打印PDF文件。 – Adrew

Html2canvas - 只有一半的內容顯示在pdf中

回答

相關問題