show each div content individually in each page

Question

I am exporting the data present inside the div to PDF when user click on the export button. I want to show each div content to show in individual pages inside the PDF.

The above scenario is working in the demo https://plnkr.co/edit/KvkVlYmmmJiZ71sghb1l?p=preview

The same when applied to below code, it is not working. Demo here : https://plnkr.co/edit/P9nUSRY5TytkonM6dUHl?p=preview

js code:

$scope.export = function() {
   var pdf = new jsPDF('landscape');
   var source = $('#append-source');
    $('.myDivClass').each(function(){
     var html = "<div>"+$(this) + "</div><!--ADD_PAGE-->";//the code is broken with this line
     // var html = $(this);
      source.append(html);
    });
    console.log(source);
    pdf.addHTML(
          source, 0, 0, {
              pagesplit: true
          },
          function(dispose){
              pdf.save('test3.pdf');
          }
      );
     }

Answer 1

It is not recommended to use jquery like this inside an angular app. To see why look here: Can we use both jQuery and Angular in our Web Application?

However what you want to do is possible if you put the following into your controller:

$scope.export = function() {
    var pdf = new jsPDF('landscape');
    var source = "";
    var width1 = pdf.internal.pageSize.width;

    $('.myDivClass').each(function(){
        var textForPdfPage = $(this).children().eq(1).children()[0].textContent;
        var html = "<div>"+ textForPdfPage + " </div><!--ADD_PAGE-->";
        source+=html;
    });

    margins = {
        top: 80,
        bottom: 60,
        left: 10,
        width: '100%'
    };

    pdf.fromHTML(
        source, // HTML string or DOM elem ref.
        margins.left, // x coord
        margins.top, { // y coord
            'width': width1 // max width of content on PDF
        },
        function (dispose) {
            pdf.save('test.pdf');
        },
        margins
    );
}

Your main problem is that when you where trying to create your html string you only used $(this). $(this) gives you a jquery object. The string you want to put on the page is inside this object and is accessed using the jquery .children() method.

Answer 2

Here is a way of doing what you asked using addHTML() instead of fromHTML():

$scope.export = function() {

        var pdf = new jsPDF('landscape');
        var pdfName = 'test.pdf';

        var options = {};

        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.addHTML($('.myDivClass')[currentRecursion], 15, 20, options, function(){
                    console.log(currentRecursion);
                    recursiveAddHtmlAndSave(currentRecursion, totalRecursions)
                });
            }
        }

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

I left the other answer so people can see both ways of doing it.