Html2canvas

Question

使用 Html2canvas、jsPdf 和 angularjs 截取我网页的一部分以显示为 pdf 预览。我能够成功将内容导出为pdf，但它只显示了一半的内容。我该怎么做才能解决这个问题？

这是创建 pdf 的按钮。 (rollup.html)

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

在控制器中，我使用了 html2canvas 函数 (rollup.js) 在这里，我相信 'document.body.appendChild' 可能是关键，因为当它被取消注释时，它会在点击 'pdfTest' 以及 pdf 预览时在网页中显示另一个 table 的副本，但仅一半的内容。

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

});

当然，在创建 table 的 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);

我不确定如何使图像 100% 占 pdf 页面的比例，但有了这个我至少可以设置最适合 table 的参数。希望我能找到更好的解决方案，但这暂时有效。

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

Html2canvas - Only half of the content shows in the pdf

html

pdf

angularjs

jspdf