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 中有一个 testDiv 的 id 到我想要出现在 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);

我不确定如何使图像成为 pdf 页面的 100%，但我可以设置最适合表格的参数。希望我能找到一个更好的解决方案，但这暂时有效。