Saving HTML as PDF

Question

I need to be able to click a button and save a modal window as a PDF. It needs to take the styling and all content inside the div the modal is built in.

I'm not tied to any specific library but I need to use a client-side library to to get this to work. My project is built with ASP.NET MVC & AngularJS.

I'm using pdfMake and html2canvas. Html2canvas is taking the div content and saving it as a canvas while pdfMake takes the canvas/image and saves it as a PDF.

This works great for my modal when there is a limited amount of data/records, usually around 15. Anytime more records are displayed, the PDF is rendered with just blank pages.

I'm not sure how to fix this so that the PDF's are rendered/generated with all of my data. I'm thinking it could be related to the HTML2Canvas portion and not necessarily with the data. The code examples from the developer are multiple pages of text and render fast and correctly. This tells me that I'm either missing some settings or there could be a comparability issue between HTML2Canvas and pdfMake.

I previously tried jsPDF and apparently it does not play well with CSS. I could not get the exported files to save with the correct styling.

I am using AngularJS ng-click to call the JS method printHistoricalData().

Here is my code that currently saves the HTML as a PDF when there is limited data records.

HTML

<button type="button" class="btn btn-default pull-right" ng-click="printHistoricalData()">PRINT</button>

<div id="historicalDataModal">
     <div class="modal-body">
          Modal Data Here
     </div>
</div>

Angular/Javascript

  function printHistoricalData() {
    html2canvas(document.getElementById("historicalDataModal"), {
        onrendered: function (canvas) {
            var data = canvas.toDataURL("image/png");

            var docDefinition = {                      
                content: [
                    {
                        image: data,
                        width: 525,
                        alignment: "center"
                    }
                ],
                pageSize: "letter",
                pageOrientation: "portrait",
                styles: {
                    footer: {
                        fontSize: 8,
                        alignment: "center",
                        margin: [0, 0, 0, 80]
        }
                }
            };
            pdfMake.createPdf(docDefinition).download($scope.selectedGroup.title + ".pdf");
        }
    });
}

Thank you for you help.

Osama Azmat Khan · Answer 1 · 2017-08-16T09:03:54.577

This might Help:

$scope.pdfExport = function () {
     html2canvas($("#Div"), {
                        onrendered: function (canvas) {
                            var doc= new jsPDF("l", "mm", "a4");
                            var imgData = canvas.toDataURL('image/jpeg', 1.0);
                            doc.addHTML(document.getElementById("Div"), function () {
                                doc.save('file.pdf');
                            });

                        }
                    });
 };

or you might use these lines instead of doc.addHTML:

doc.addImage(imgData, 'JPEG', 10, 10, 180, 150);  // 180x150 mm @ (10,10)mm
                        doc.save('file.pdf');

Using the doc.addImage helped me counter this problem

UPDATE:

I found this answer on another post really helpful https://stackoverflow.com/a/34934497/8466944

Saving HTML as PDF

1 Answers1