Question

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

这是创建pdf的按钮。（rollup.html）

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

在控制器中，我使用了html2canvas函数（rollup.js）在这里，我相信＆＃39; document.body.appendChild＆＃39;可能是关键因素，因为当它被取消注释时，它会在网页中显示该表格的另一个副本，当时它是“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);

我不确定如何将图像作为pdf页面的100％，但有了这个，我可以设置最适合表格的参数。希望我能找到更好的解决方案，但现在可以使用。

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

1 个答案: