jsPDF-pdf可以通过用户输入生成，但当前页面不显示更改

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

本文关键字：当前页 显示 用户 可以通过 输入 jsPDF-pdf      更新时间：2023-09-26

所以，目前我有一个带有HTML/form复选框的静态页面。只有选中的复选框才会生成JS pdf；内容通过父div从"checkbox"交换到我的HTML。问题是在点击"生成PDF"按钮之后。当前页面，然后显示所做的更改以及解析为PDF的内容，只有PDF应该通过此代码生成。当前页面根本不应该更改。有什么想法吗基本上，在"下载PDF"被点击后，PDF会通过上面描述的用户输入下载，并在下面用JS编写；页面本身不应反映这些更改。目前PDF生成准确，但页面也会更改为PDF。

$(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', '');
    });
});

这是一个示例JSFIDDLE演示。。为了帮助说明（然而，PDF生成功能需要实时服务器）因此，如果你可以想象保持"静态页面复选框条件>PDF"的功能，而不是静态页面本身，那么就改变用户所在的位置。这就是目标。

jsPDF库。

您可以将pdf保存在addHTML的回调中，如下所示

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

jsfiddle

更新

当前页面根本不应更改

您正在对DOM进行更改，因此页面将发生更改。如果不想编辑当前DOM，则需要克隆节点并将其传递给pdf.save()。这不起作用，我在文档中找不到任何原因，因为它太过时了。用户保存文档后，您仍然可以重新加载页面，这将使DOM恢复到默认状态。

相关文章：