Javascript 来自用户输入的动态pdf仅在pdf中不反映当前页面

下面的js允许通过我的“下载pdf”按钮的复选框、表单、复选框（使用jsPDF）通过页面上的用户输入生成动态pdf，但问题是用户所在的页面也反映了动态生成pdf中解决的更改。静态页面的当前状态根本不应该改变，它只应该出现在生成的pdf文档中。目前pdf生成良好，但点击页面也会更改为类似于pdf，这不应该发生。有什么好主意吗

我假设我需要以某种方式将函数嵌套在这里，以便更改只反映在pdf而不是页面中；但是，我该如何在点击功能中保持这一点——有什么想法吗

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

完整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', '');
    });

});

$（文档）.ready（函数（）{
文本={
项目1:“项目框1内容html就在这里！Lorem ipsum dolor sit amet，Concertetur Adipising Elite，sed do eiusmod Temporal Incidedut ut Labor et dolore magna aliqua.”，
项目2:“现在它的项目框2html内容在这里！Lorem ipsum dolor sit amet，Concertetur Adipising Elite，sed do eiusmod Temporal Incidedut ut Labor et dolore magna aliqua.”，
第3项：“这是第4项的示例html！Lorem ipsum dolor sit amet，Concertetur Adipising Elite，sed do eiusmod Temporal Incidedut ut Labor et dolore magna aliqua.”，
第4项：“第5项html内容在这里！Lorem ipsum dolor sit amet，Concertetur Adipising Elite，sed do eiusmod Temporal Incidedut ut Labor et dolore magna aliqua.”，
}
$（“#容器”）.css（'background'，'#fff'））
$（'.download pdf'）。单击（函数（）{
notChecked=$（“输入[类型=复选框]：未（：选中）”）.parent（）；
隐藏（）；
yesChecked=$（“输入[类型=复选框]：选中”）.parent（）；
$.each（yesChecked，函数（索引，el）{
$（el.show（）.html（文本[$（el.attr（'id'）））；
});
var pdf=新的jsPDF（'p'，'pt'，'a4'）；
pdf.addHTML（document.getElementById（'records'），function（）{
保存（'test.pdf'）；
});
});
$（'.checkmate'）。在（'click'，function（）上{
如果（$（this）.is（':checked'））
$（this.parent（'div'）.css（{“color”：“white”，“background”：“green”}）；
其他的
$（this.parent（'div'）.css（'background-color'，''）；
});
});

另一次澄清的尝试：

定义的全局样式不是问题所在。看看这把小提琴： 问题是如何定义用户 在JS中输入，仅在PDF中反映，不在页面上反映。目前这两方面都有所反映

---

“但是点击页面也会变为类似于pdf”-这意味着什么？这意味着我在点击按钮功能下的条件，显示在当前静态html页面上，它只应该显示在生成的pdf文档中。用户所在的页面不应该更新这些更改，也可以在此处查看接受的答案。您可能想尝试为html和pdf使用单独的css文件：非常感谢大家的关注，所以我喜欢这样分割它的想法，但我没有从已接受的回答示例中看到他如何调用每个屏幕，他只是将一个设置为media=“print”（即您的pdf），另一个设置为media=“screen”（这将是呈现的html）。因此，他像通常一样导入两个CSS文件，但它只应用于指定的媒体类型。