trying to modify the js function so that it gives the same output as it was when called the other js function

Question

I am exporting the content on the webpage to the PDF file, for this i have used jsPDF API and i could able to get it work but now i want to use html2PDF as it resolves few issues which were faced when using jsPDF API.

I have written the function $scope.exportUsingJSPDF which is called when the button Export Using JSPDF is clicked. Similarly i want to implement the function $scope.exportUsingHTML2PDF which uses html2PDF API but could not succeed. Any inputs on how to modify $scope.exportUsingHTML2PDF so that it iterates the divs and shows the div content as shown when invoked using $scope.exportUsingJSPDF by clicking Export using JSPDF API.

Complete online example: https://plnkr.co/edit/454HUFF3rmLlkXLCQkbx?p=preview

js code:

    //trying to implement the below function same as $scope.exportUsingJSPDF, so
// that when user click on Export using HTML2PDF button, it exports the content to the PDF and generaes the PDF.
         $scope.exportUsingHTML2PDF = function(){
          var pdf = new jsPDF('l', 'pt', 'a4');
            var pdfName = 'test.pdf';

         pdf.canvas.height = 72 * 11;
         pdf.canvas.width = 72 * 8.5;
         html2pdf(document.getElementByClassName("myDivClass"), pdf, function(pdf){
             pdf.save(pdfName);
         });
         }

        $scope.exportUsingJSPDF = function() {
              var pdf = new jsPDF('p','pt','a4');
                var pdfName = 'test.pdf';

                var options = {   pagesplit: true};

                var $divs = $('.myDivClass')                //jQuery object of all the myDivClass divs
                var numRecursionsNeeded = $divs.length -1;     //the number of times we need to call addHtml (once per div)
                var currentRecursion=0;

                //Found a trick for using addHtml more than once per pdf. Call addHtml in the callback function of addHtml recursively.
                function recursiveAddHtmlAndSave(currentRecursion, totalRecursions){
                    //Once we have done all the divs save the pdf
                    if(currentRecursion==totalRecursions){
                        pdf.save(pdfName);
                    }else{
                        currentRecursion++;
                        pdf.addPage();
                        //$('.myDivClass')[currentRecursion] selects one of the divs out of the jquery collection as a html element
                        //addHtml requires an html element. Not a string like fromHtml.
                        pdf.fromHTML($('.myDivClass')[currentRecursion], 15, 20, options, function(){
                            console.log(currentRecursion);
                            recursiveAddHtmlAndSave(currentRecursion, totalRecursions)
                        });
                    }
                }

                pdf.fromHTML($('.myDivClass')[currentRecursion], 15, 20, options, function(){
                    recursiveAddHtmlAndSave(currentRecursion, numRecursionsNeeded);
                });
            }

PS: I was trying to modify $scope.exportUsingHTML2PDF so that it gives the same output as generated when clicked on "Export using JSPDF" button which calls the function $scope.exportUsingJSPDF.

Answer 1

The problem lies with your function using exportUsingHTML2PDF, the error is that you need to pass in the html to the function of html2PDF. Manage the page css on the basis of your need.

EDIT: You have wrong library. Please check html2pdf.js library within the plunker

Working plunker: html2pdf

    $scope.exportUsingHTML2PDF = function() {
    var element = document.getElementById('element-to-print');
    html2pdf(element, {
        margin: 1,
        filename: 'myfile.pdf',
        image: {
            type: 'jpeg',
            quality: 0.98
        },
        html2canvas: {
            dpi: 192,
            letterRendering: true
        },
        jsPDF: {
            unit: 'in',
            format: 'letter',
            orientation: 'portrait'
        }
    });
}