Преобразование HTML в PDF в Angular 6

Ответ 1

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

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

  });

}

UPDATE:

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

Пакеты:

дом к изображению

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

                });



            }

Ответ 2

См. Это, вы можете получить некоторые идеи PDF-угловой

NPM-угловой

Ответ 3

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

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

Ответ 4

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

Ответ 5

Сначала установите следующее: 1) npm install jspdf 2) npm install 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'); 
      });
      }

Ответ 6

Я попробовал почти все пакеты npm для генерации HTML-контента в PDF. та или иная функция не работает, так как содержимое таблицы повреждено или не загружает изображения. После стольких попыток я нашел Kendo UI Angular PDF Export. Пользовательский интерфейс Kendo Angular экспорт работал для многих функций, кроме динамической загрузки изображений. Итак, я искал, чтобы решить эту проблему, но, к сожалению, я не нашел надлежащей документации для решения этой проблемы. После стольких следов я решил это.

Следуйте приведенным ниже инструкциям, чтобы сгенерировать HTML-контент в PDF с помощью пакета Kendo UI Angular export npm.

Загрузите и установите пакет.

npm install --save @progress/kendo-angular-pdf-export @progress/kendo-drawing

Для Angular 6 установите пакет rxjs-compat. Для получения дополнительной информации обратитесь к статье об обновлении до Angular 6.

npm install --save rxjs-compat @6

Для Angular 5 или более ранней версии установите RxJS v5. 5+.

npm install --save [email protected]^5.5

После установки импортируйте PDFExportModule в корневой или функциональный модуль приложения.

import { NgModule } from '@angular/core'; 

import { BrowserModule } from '@angular/platform-browser'; 

import { PDFExportModule } from '@progress/kendo-angular-pdf-export'; 

import { AppComponent } from './app.component';  



@NgModule({ 

bootstrap:[AppComponent],   

declarations: [AppComponent],    

imports:BrowserModule, PDFExportModule] }) 


export class AppModule { } 

Для полного рабочего примера, пожалуйста, прочитайте мой блог https://www.stackquery.com/articles/how-to-generate-pdf-in-angular-with-repeated-headers-images-and-watermark/75.

Приведенный выше пример блога разрешает большие динамические таблицы с автоматически повторяющимися заголовками на каждой странице и большими динамическими изображениями, а также позволяет использовать разрывы страниц между страницами.

Примечание. В приведенном выше примере не делаются снимки экрана, такие как jsPDF или другие пакеты npm. Приведенный выше пример очень эффективен, для создания PDF с высоким разрешением и высокой скоростью требуется всего менее 200 КБ.