CODEWITHSUNDEEP
htmlangularjspdfjspdfhtml2canvas
Adrew
Adrew

Reputation: 227

Html2canvas - Only half of the content shows in the pdf

Using Html2canvas, jsPdf, and angularjs to take a screen shot of a portion of my webpage to show as a pdf preview. I was able to successfully export the content to the pdf, but it only shows half of the content. What can I do to fix this?

Here is the button that creates the pdf. (rollup.html)

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

Within the controller, I used the html2canvas function (rollup.js) Here I believe 'document.body.appendChild' may be the key because when it is uncommented it shows another copy of the table within the webpage when 'pdfTest' is click, as well as within the pdf preview, but only half of the content.

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

});

Of course within the html page where the table is created, I have an id of testDiv within the div to the content I want appearing in the pdf.(route.html)

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

How can I fit the full content to the pdf preview without it cutting off? Any help is greatly appreciated.

Upvotes: 0

Views: 3704

Answers (1)

Adrew
Adrew

Reputation: 227

Found a solution where I add parameters to the doc.addImage. 

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

I am not sure how to make the image 100 % of the pdf page, but with this I can set parameters that work best for the table atleast. Hopefully I can find a better solution, but this works for now.

Upvotes: 0

Related Questions