Html2canvas -只有一半的内容显示在pdf中

Question

使用Html2canvas，jsPdf和angularjs截屏我的网页的一部分，以显示为pdf预览。我能够成功地将内容导出到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中有一个id为testDiv的内容，用于显示我想要出现在pdf中的内容。(route.html)

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

我怎样才能适合完整的内容到pdf预览而不会被切断？任何帮助都是非常感谢的。

Answer 1

我找到了一个向doc.addImage添加参数的解决方案。

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

我不确定如何使图像100%的pdf页面，但有了这个，我可以设置参数，最好的工作表至少。希望我能找到一个更好的解决方案，但目前这是可行的。