首页 文章

jsPDF pdf 用于生成用户输入,但当前页面不显示更改

提问于
浏览
0

所以,目前我有一个带有 HTML /表格复选框的静态页面。只有选中的复选框才会生成 JS pdf;内容通过父 div 从“复选框”交换到我的 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 lib.

1 回答

  • 0

    你可以像这样在addHTML的回调中保存 pdf

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

    jsfiddle

    更新

    当前页面根本不应该改变

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

相关问题