jsPDF pdf to generate with user input, but current page does not display changes

Question

So, currently I have a static page with HTML / form checkboxes. Only the checkboxes that are selected generate into the JS pdf; the content is swapped from 'checkbox' to my HTML via the parent div. The problem is after the 'Generate PDF' button is hit. The current page, then shows the changes made and what resolves into the PDF, only the PDF should generate via this code. The current page should not change at all. Any thoughts? Basically after 'Download PDF' is hit, the PDF downloads via the user input that is described above and written in JS below, however; the page itself should not reflect these changes. Currently the PDF generates accurately, but the page also changes to what the PDF is.

$(document).ready(function() {

texts = {
    item1: 'Item Box 1 Content <strong>html</strong> right here! Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
    item2: 'Now its Item Box 2 <strong>html</strong> content here ! Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
    item3: 'This is the example <strong>html</strong> of Item box 4! Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
    item4: 'Item box number 5 <strong>html</strong> content is here! Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
  }
  $("#container").css('background', '#fff')

   $('.download-pdf').click(function() { 
   // this should trigger the below to generate in the PDF,
   // not display it on page > then generate to pdf. Just pdf!

    notChecked = $("input[type=checkbox]:not(:checked)").parent();
    notChecked.hide();
    yesChecked = $("input[type=checkbox]:checked").parent();

    $.each(yesChecked, function( index, el ) {
      $(el).show().html(texts[$(el).attr('id')]);
    });

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

    pdf.addHTML(document.getElementById('records'), function() {

        setTimeout(function(){
         location.reload();
         },3000);

    }); 

    var file = 'test';
    if (typeof doc !== 'undefined') {
        doc.save(file + '.pdf');
    } else if (typeof pdf !== 'undefined') {
        setTimeout(function() {
            pdf.save(file + '.pdf');
            // $("#item4").hide();

        }, 2000);
    } else {
        alert('Error 0xE001BADF');
    }

 });

    $('.checkmate').on('click', function() {
      if ($(this).is(':checked'))
        $(this).parent('div').css({"color":"white","background":"green"});
      else
        $(this).parent('div').css('background-color', '');
    });

});

HERE IS A SAMPLE JSFIDDLE DEMO.. to help illustrate (however the PDF generation functionality requires live server) So, if you can imagine maintaining the functioning 'Static Page checkbox conditions > PDF' and just not having the static page itself, change that the user is on. That is the goal.

jsPDF lib.

It is from the JSpdf js library I'm using for the pdf generation. — Dr Upvote, Dec 09 '15 at 21:23
I do nothing, all my code is there. This question is somewhat relevant 'http://stackoverflow.com/questions/16858954/how-to-properly-use-jspdf-library' but I haven't found anyone generating a PDF based on user input as me. — Dr Upvote, Dec 09 '15 at 21:25

score 0 · Accepted Answer · edited Jun 20 '20 at 09:12

0

You can save the pdf in the callback of addHTML like this

var pdf = new jsPDF('p', 'pt', 'a4');
pdf.addHTML(document.getElementById('records'), function(){
    pdf.save('test.pdf');
});

jsfiddle

Update

The current page should not change at all

You are making changes to the DOM so the page will change. If you don't want to edit the current DOM you need to clone the node and pass it to pdf.save(). This doesn't work and I can't find any reason for it in the documentation because it is too outdated. You can still reload the page after the user has saved his document which will revert the DOM to the default state.

edited Jun 20 '20 at 09:12

Community

1
1

answered Dec 09 '15 at 21:42

A1rPun

16,287
7
57
90

Thanks a bunch, but the static page still changes...with the button click. The question is, not how to generate the PDF, the PDF is generating just fine, the question is how to get it so ONLY the pdf is generated with the changes, and the page itself does not alter, change, or anything; so that the user can change his input again if they like. What you sent is exactly what I already had... thank you for looking at it though! – Dr Upvote Dec 09 '15 at 21:46
@BondJamesBond Yeah excuse me I was a little fast there. I think you need to clone the node before and then make changes to the clone. I can't seem to get it working though. – A1rPun Dec 09 '15 at 21:55
Do you have an example at all? Reloading the page would reset form fields which is not ideal. – Dr Upvote Dec 10 '15 at 20:35
1

@BondJamesBond Yeah that's the documentation which is outdated, the methods `addHTML` and `save` are not there. I just thought about another solution, I will update my answer today. – A1rPun Dec 11 '15 at 08:47
Sweet! lets try! @A1rPun – Dr Upvote Dec 12 '15 at 00:59
do you have a suggestion? – Dr Upvote Dec 13 '15 at 17:35
@BondJamesBond Yeah, sorry for the delay. You can try to save the `innerHTML` of the `records` element before you make changes to it and then revert it back to it's original state when the pdf has saved. You can also unhide the `notChecked` collection and revert the html of the `yesChecked` collection. You can save the `innerHTML` from each element in the `each` function with jQuery's [`$.data`](https://api.jquery.com/jquery.data/) function. – A1rPun Dec 13 '15 at 22:11

jsPDF pdf to generate with user input, but current page does not display changes

1 Answers1

jsfiddle

Update