dynamic pdf from user input not reflective on current page ONLY in the pdf

问题

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.

来源：https://stackoverflow.com/questions/34211409/dynamic-pdf-from-user-input-not-reflective-on-current-page-only-in-the-pdf