Проблемы с созданием PDF-файлов из динамического содержимого с помощью jsPDF

Question

У меня возникла проблема с созданием PDF-файлов.

Наш клиент хочет создать PDF-документы, содержащие выбранный контент, из данных, предоставленных пользователями сайта. Я пытаюсь использовать клиентское решение, используя javascript, jQuery и jsPDF, но у меня возникают некоторые проблемы.

Содержимое, которое может отображаться в документе, это текст, изображения, цвета и другие.

Это грубый экран генератора документов.

В столбце слева показан выбранный контент, который может быть отображен на документе. Каждый элемент имеет кнопку (черная область внутри каждой), которая клонирует полный элемент с помощью jQuery в контейнер документа (белый ящик). Все работает отлично и после клонирования элементов в контейнере документов я использую кнопку «Экспорт в PDF», чтобы вызвать событие jQuery, чтобы использовать библиотеку jsPDF и сгенерировать документ. Но здесь все идет не так.

Если я нажимаю на кнопку Export, Сохранить файл диалоговое окно, в и просит меня, чтобы сохранить или просмотреть файл. Когда я открываю этот новый PDF-файл, документ полностью пуст, он не имеет никаких элементов. НО, если я не добавлял выбранный контент в контейнер документа, сохраненный файл PDF показывает содержимое заголовка документа, которое является содержимым по умолчанию для каждого файла.

Я не знаю, что я делаю неправильно. Консоль javascript не показывает никаких сообщений об ошибках.

Каждый выбранный элемент имеет класс grid__item, контейнер документ имеет класс документ-страницу.

Мой код выглядит следующим образом:

$(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() - асинхронная функция. Вам нужно будет вызвать «сохранить» в обратном вызове, который вы передаете.

Поскольку у вас много контента, addHTML, возможно, не был выполнен, когда вы вызываете save. Вот почему сохраненный pdf-файл пуст.

пример -

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