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中

回答

相关问题