0

the below js allows generation of dynamic pdf via on-page user input via checkboxes, form, checkboxes (utilizing jsPDF library) with my 'download pdf' button, however it the problem is the page the user is on also reflects the changes that resolves in dynamic generated pdf. the current state of static page is not supposed to change at all, it's only supposed to be in the generated pdf document. currently the pdf generates fine, but on click the page also changes to similar as the pdf, this should not occur. any hack ideas?

I assume I need to nest the functions in here somehow for changes to only be reflective in pdf not page; but then how do I maintain this to happen within the on click function -- any ideas?!

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

full js.

$(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() {

    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(){
        pdf.save('test.pdf');
    });
 });

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

});

Another attempt at clarifying:

defined global styles are not the issue. take a look at this fiddle: https://jsfiddle.net/gke49474/1/ the issue is getting the user defined input in the JS to only reflect in PDF not onpage. Currently it's reflecting in both.

Dr Upvote
  • 8,023
  • 24
  • 91
  • 204
  • "but on click the page also changes to similar as the pdf" - what does that mean? – QuestionMarks Dec 10 '15 at 20:55
  • it means the conditions I have under the button on click function, shows on the current static html page, it's only supposed to show within the pdf document that is generated. the page the user is on isn't supposed to update to these changes as well – Dr Upvote Dec 10 '15 at 20:56
  • Check out the accepted answer here. You might want to try using separate css files for your html and your pdf: http://stackoverflow.com/questions/20460035/jspdf-cant-get-any-styling-to-work – QuestionMarks Dec 10 '15 at 21:03
  • thanks a bunch for taking a look, so I like the idea of dividing it like that, but I don't see from the accepted-answered example on how he is calling each screen – Dr Upvote Dec 10 '15 at 21:12
  • He just set one as media = "print" (that would be your pdf) and one as media = "screen" (that would be the rendered html). So he's importing both CSS files as you normally would, but it only gets applied to the media type specified. – QuestionMarks Dec 10 '15 at 21:17
  • You could also try using media queries and just specifying @media print in the CSS for anything you want to style specific to the PDF (then you would only need a single CSS file). http://www.w3schools.com/css/css3_mediaqueries.asp – QuestionMarks Dec 10 '15 at 21:21
  • Thanks, but I don't think that's the issue - defined global styles are not the issue. take a look at this fiddle: https://jsfiddle.net/gke49474/1/ the issue is getting the user defined input in the JS to only reflect in PDF not onpage – Dr Upvote Dec 10 '15 at 21:21
  • https://mrrio.github.io/jsPDF/doc/symbols/jsPDF.html – Dr Upvote Dec 10 '15 at 23:15

0 Answers0