javascript - 使用 jsPDF 从动态内容生成 PDF 时遇到问题

Question

我在生成 PDF 时遇到问题。

我们的客户希望生成包含从网站用户提供的数据中选择的内容的 PDF 文档。我正在尝试使用 javascript、jQuery 和 jsPDF 的客户端解决方案，但遇到了一些麻烦。

文档中可以显示的内容有文本、图像、颜色等。

这是文档生成器的粗略屏幕。

左边一栏显示了所选的可以在文档上显示的内容。每个元素都有一个按钮(每个元素内部的黑色区域)，它使用 jQuery 将完整元素克隆到文档容器(白色框)。一切正常，将元素克隆到文档容器后，我使用导出到 PDF 按钮调用 jQuery 事件以使用 jsPDF 库并生成文档。但这就是一切出错的地方。

如果我单击“导出”按钮，则会弹出“保存文件”对话框并要求我保存或查看文件。当我打开这个新的 PDF 文件时，该文档是空白的，没有任何元素。但是，如果我没有将任何选定的内容添加到文档容器中，则保存的 PDF 文件将显示文档的标题内容，这是每个文件的默认内容。

我不知道我做错了什么。 JavaScript 控制台不显示任何错误消息。

每个选定的项目都有类grid__item，文档容器有类document-page。

我的代码如下:

$(document).on('click', '.js-add-element-to-document', function () {
     $(this).parent().parent('.grid__item').clone().appendTo('.document-page');
} );
$('.js-export-to-pdf').on('click', function () {
    var pdf = new jsPDF('p','pt','a4');
    pdf.addHTML( $('.document-page'), function () {
        var string = pdf.output( 'datauristring' );
    });
    if( typeof pdf !== 'undefined' ) {
        setTimeout( function () {
            pdf.save( 'travel-document.pdf' );
        }, 500);
    } else {
        alert(' Error on generating document ');
    }
});

我是否忽略了其他事情？是否有什么内容破坏了我生成的文档的内容？谢谢。

Answer 1

addHTML() 是一个异步函数。您必须在传递的回调中调用“save”。

由于您有很多内容，当您调用 save 时，addHTML 可能尚未完成。这就是保存的 pdf 为空的原因。

示例 -

pdf.addHTML($("#someDiv"), function(){
   //addHTML completed 
   pdf.save("test.pdf");
});