无法使用jsPDF从动态内容生成PDF

Question

我在生成PDF问题时遇到了问题。

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

可以在文档中显示的内容包括文本，图像，颜色等。

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

左侧的列显示可以在文档上显示的所选内容。每个元素都有一个按钮（每个元素内部的黑色区域），它使用jQuery将完整元素克隆到文档容器（白色框）。一切正常，在将元素克隆到文档容器后，我使用Export To 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");
});