Конвертировать HTML в PDF в Angular 6

Question

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

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

Answer 1

Сначала установите следующее: 1) npm установите jspdf 2) npm установите html2canvas

Позже импортируйте и используйте следующий код

 public captureScreen() {
      const data = document.getElementById('invoice');
      html2canvas(data).then(canvas => {
      const imgWidth = 208;
      const pageHeight = 295;
      const imgHeight = canvas.height * imgWidth / canvas.width;
      const heightLeft = imgHeight;
      const contentDataURL = canvas.toDataURL('image/png');
      const pdf = new jspdf('p', 'mm', 'a4'); 
      const position = 0;
      pdf.addImage(contentDataURL, 'PNG', 0, position, imgWidth, imgHeight);
      pdf.save('invoice.pdf'); 
      });
      }

Answer 2

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

Вам необходимо установить следующие пакеты с 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');

  });

}

ОБНОВЛЕНИЕ:

Придумали другое решение.Мне не удалось разбить его на страницы формата A4, но я смог создать один файл PDF.

Пакеты:

dom-to-image

jspdf

import domtoimage from 'dom-to-image';
import * as jsPDF from 'jspdf';



            downloadPDF()
            {

              var node = document.getElementById('parentdiv');

              var img;
              var filename;
              var newImage;


              domtoimage.toPng(node, { bgcolor: '#fff' })

                .then(function(dataUrl) {

                  img = new Image();
                  img.src = dataUrl;
                  newImage = img.src;

                  img.onload = function(){

                  var pdfWidth = img.width;
                  var pdfHeight = img.height;

                    // FileSaver.saveAs(dataUrl, 'my-pdfimage.png'); // Save as Image

                    var doc;

                    if(pdfWidth > pdfHeight)
                    {
                      doc = new jsPDF('l', 'px', [pdfWidth , pdfHeight]);
                    }
                    else
                    {
                      doc = new jsPDF('p', 'px', [pdfWidth , pdfHeight]);
                    }


                    var width = doc.internal.pageSize.getWidth();
                    var height = doc.internal.pageSize.getHeight();


                    doc.addImage(newImage, 'PNG',  10, 10, width, height);
                    filename = 'mypdf_' + '.pdf';
                    doc.save(filename);

                  };


                })
                .catch(function(error) {

                 // Error Handling

                });



            }

Answer 3

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

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

Answer 4

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

Answer 5

Обращайтесь, вы можете получить некоторые идеи pdf-angular

npm-angular