it-roy-ru.com

Преобразовать HTML в PDF в Angular 6

У меня есть компонент (Angular 6), который представляет собой совокупность нескольких компонентов. Это приводит к длинному HTML (я использую Bootstrap 4). Теперь я хочу конвертировать этот HTML в PDF. Я искал повсюду и нашел много решений, которые работают на jsPDF. Требуется создать четкий макет, как он отображается в HTML (чтобы пользователи могли выбирать, копировать и т.д.). Но решения, которые я нашел, либо пытаются добавить строки текста вручную, что невозможно в моем сценарии; или они конвертируют (растеризируют?) HTML в формат изображения. Кроме того, я хочу сохранить форматирование, шрифты и стилизацию моего HTML.

До сих пор я пытался: это и это .

7
Vivekanand P V

Лучшее возможное решение, которое я мог придумать до сих пор. 

Вы должны будете установить ниже пакеты из npm

html2canvas

jspdf

import * as jsPDF from 'jspdf';
import html2canvas from 'html2canvas';

htmltoPDF()
{
    // parentdiv is the html element which has to be converted to PDF
    html2canvas(document.querySelector("#parentdiv")).then(canvas => {

      var pdf = new jsPDF('p', 'pt', [canvas.width, canvas.height]);

      var imgData  = canvas.toDataURL("image/jpeg", 1.0);
      pdf.addImage(imgData,0,0,canvas.width, canvas.height);
      pdf.save('converteddoc.pdf');

  });

}
2
Anirudh

Попробуйте использовать для этого бэкэнд-сервис, такой как Thymeleaf или itextpdf с Spring Boot. 

0
Dasun Senadeera

С некоторыми усилиями лучшее решение, которое мы с моей командой нашли для решения наших собственных проблем Angular HTML для PDF, заключалось в отправке необработанного HTML в наш API Java и последующем использовании wkhtmltopdf ( https://github.com/ wkhtmltopdf/wkhtmltopdf ) с помощью оболочки Java ( https://github.com/jhonnymertz/Java-wkhtmltopdf-wrapper ). Преодолев несколько ошибок (например, убедившись, что на сервере установлены правильно установленные шрифты; все правильно закодировано; выяснение разрывов страниц и обеспечение их работы), мы смогли точно воспроизвести нашу страницу и использовать наш Angular HTML в качестве универсального шаблона (который изменения на основе разных сценариев). Это нелегкий путь, но он дает отличные результаты в производственной среде уровня предприятия, как только вы это выясните.

Следует отметить, что мы также попробовали jspdf (и другие библиотеки) и пришли к тем же выводам, что и вы: они просто не делали того, что нам было нужно. Надеюсь, это поможет.

0
MapLion

Ссылаясь на это, вы можете получить некоторые идеи pdf-angular

npm-угловой

0
chethu