Question

146

Add Multiple Elements to PDF via jsPDF's addHTML

rated 0 times [ 152] [ 6] / answers: 1 / hits: 18528 / 10 Years ago, tue, october 7, 2014, 12:00:00

I am using an angular-ui tabset to display several separate bits of information. Because the actual content of the tabs that aren't active is hidden, it does not print if I just add the entire body of the page. The only tab content that you see after printing is the currently active tab. I'm attempting to print everything inside of these tabs along with another single element from the page using the addHTML method to preserve the way that it looks.

Printing any of these individually works well, but I can't seem to find a way to print all of the items at once.

For example, this is the code used to print a single element.

var pdf = new jsPDF('p', 'pt', 'a4');

pdf.addHTML($('#foo').first(), function() {

    pdf.save();

});

That works (although the output is all black, but I suppose that's a separate issue). Now, I would like to have several addHTML statements to finish adding the content I need and then save. Something like

var pdf = new jsPDF('p', 'pt', 'a4');

pdf.addHTML($('#foo').first());

_.each( $('.bar').first().children(), function(e) {

    pdf.addHTML(e);

});

pdf.save();

However, taking the second approach when the pdf is saved, it is just completely blank.

It's worth noting that this works, but it doesn't have the formatting that I would like to keep and has more content than I'd like:

  var doc = new jsPDF();



  doc.fromHTML($('body').get(0), 15, 15, {

    'width': 170,

  }, function() {

    doc.save();

  });

Attempting to force it to select just #foo and .bar ends up coming out to the same problem that I have above.

Any suggestoins on the correct way to do this would be greatly appreciated.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

jase

Add To Favorites

Follow

Total Points: 442

Total Questions: 107

Total Answers: 94

Location: Sao Tome and Principe

Member since Wed, Dec 29, 2021

2 Years ago

answered 10 Years ago margob · Accepted Answer

Adam's answer never quite worked for me, for one reason or another. Instead, I went with the approach of creating a new div, appending all of my stuff to it, printing it, and then destroying it. That can be accomplished via something along these lines:

      var pdf = new jsPDF('p','pt','letter');



      $(#printing-holder).append(<div id='printingDiv' style='background-color: white;'></div>);

      ($('#foo')).clone().appendTo(#printingDiv);

      _.each( $('.bar').children(), function(e) {

        $(#printingDiv).append('<br/>');

        $(e).clone().appendTo(#printingDiv);

        $(#printingDiv).append('<br/>');

      });

      pdf.addHTML(($(#printingDiv)[0]), {pagesplit: true}, function() {

        console.log(THING);

        pdf.save();

        $(#printingDiv).remove();

      });

Note that the pagesplit option splits the image up if it is larger than one page, but (as of the date of this answer) seems to vastly lower the quality of the PDF generated.