Угловое преобразование html в pdf с помощью css

Я исправил эту проблему, выполнив две вещи:

1. Добавление минимизации css:

Вы можете использовать этот веб-сайт CSS Formatter для минимизации вашего css.

2. Я решил проблему с изображением, добавив базовый URL:

Во-первых, вам нужно установить несколько пакетов в ваше угловое приложение. Итак, откройте терминал и выполните следующие команды:

npm install --save pdfmake
npm install html-to-pdfmake
npm install jspdf --save

Добавьте код в файл просмотра, например:

<div class = "container">
  <div id = "pdfTable" #pdfTable>
    <h2>Angular HTML To PDF Generator Example</h2>
               
    <table class = "table table-bordered">
      <thead>
        <tr>
          <th>Firstname</th>
          <th>Lastname</th>
          <th>Website</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Sam</td>
          <td>Sam</td>
          <td>tutsmake.com</td>
        </tr>
        <tr>
          <td>john</td>
          <td>dam</td>
          <td>w3school.com</td>
        </tr>
        <tr>
          <td>jonhy</td>
          <td>hid</td>
          <td>geeks.com</td>
        </tr>
      </tbody>
    </table>
  </div>
  <button class = "btn btn-primary" (click) = "downloadAsPDF()">Export To PDF</button>
</div>

Добавьте код в файл .ts компонента, например:

import { Component, ViewChild, ElementRef } from '@angular/core';
   
import jsPDF from 'jspdf';
import pdfMake from 'pdfmake/build/pdfmake';
import pdfFonts from 'pdfmake/build/vfs_fonts';
pdfMake.vfs = pdfFonts.pdfMake.vfs;
import htmlToPdfmake from 'html-to-pdfmake';
    
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'htmlToPDF';
   
  @ViewChild('pdfTable') pdfTable: ElementRef;
   
  public downloadAsPDF() {
    const doc = new jsPDF();
    
    const pdfTable = this.pdfTable.nativeElement;
    
    var html = htmlToPdfmake(pdfTable.innerHTML);
      
    const documentDefinition = { content: html };
    pdfMake.createPdf(documentDefinition).open(); 
      
  }
}

Наконец, протестируйте свое приложение.

Я решаю свою проблему для экспорта HTML в многостраничный PDF. Я создаю холст для каждого div. Возможно, это поможет вам всем.

private canvas: any = {
        monthYearCanvas: null,
        monthYearHeight: 0,
        periodCanvas: null,
        periodHeight: 0,
        assetCanvas: null,
        assetHeight: 0,
        badActorCanvas: null,
        badActorHeight: 0,
        eventCanvas: null,
        eventHeight: 0,
        tenLowOffCanvas: null,
        tenLowOffHeight: 0,
    };

public triggerPrintReport(): void {
            if (
                this.isLoadingMonthYear ||
                this.isLoadingOnPeriod ||
                this.isLoadingOnAsset ||
                this.isLoadingOnBadActor ||
                this.isLoadingOnEvent ||
                this.isLoadingTenLowOff
            ) {
                alert('Wait for load data');
                return;
            }
    
            this.messageReport = true;
    
            const monthYearHTML = document.getElementById('htmlData-monthYear');
            const periodHTML = document.getElementById('htmlData-period');
            const assetHTML = document.getElementById('htmlData-asset');
            const badActorHTML = document.getElementById('htmlData-badActor');
            const eventHTML = document.getElementById('htmlData-event');
            const tenLowOffHTML = document.getElementById('htmlData-tenLowOff');
    
            this.createCanvasURL(monthYearHTML, 'monthYear');
            this.createCanvasURL(periodHTML, 'period');
            this.createCanvasURL(assetHTML, 'asset');
            this.createCanvasURL(badActorHTML, 'badActor');
            this.createCanvasURL(eventHTML, 'event');
            this.createCanvasURL(tenLowOffHTML, 'tenLowOff');
        }
    
        private createCanvasURL(element: any, type: string): void {
            html2canvas(element).then(canvas => {
                const width = 208;
    
                if (type === 'monthYear') {
                    this.canvas.monthYearHeight = canvas.height * width / canvas.width;
                    this.canvas.monthYearCanvas = canvas.toDataURL('image/png');
                } else if (type === 'period') {
                    this.canvas.periodHeight = canvas.height * width / canvas.width;
                    this.canvas.periodCanvas = canvas.toDataURL('image/png');
                } else if (type === 'asset') {
                    this.canvas.assetHeight = canvas.height * width / canvas.width;
                    this.canvas.assetCanvas = canvas.toDataURL('image/png');
                } else if (type === 'badActor') {
                    this.canvas.badActorHeight = canvas.height * width / canvas.width;
                    this.canvas.badActorCanvas = canvas.toDataURL('image/png');
                } else if (type === 'event') {
                    this.canvas.eventHeight = canvas.height * width / canvas.width;
                    this.canvas.eventCanvas = canvas.toDataURL('image/png');
                } else if (type === 'tenLowOff') {
                    this.canvas.tenLowOffHeight = canvas.height * width / canvas.width;
                    this.canvas.tenLowOffCanvas = canvas.toDataURL('image/png');
                }
    
                this.exportPDF();
            });
        }
    
        private exportPDF(): void {
            const PDF = new jsPDF('p', 'mm', 'a4');
    
            if (
                this.canvas.monthYearCanvas &&
                this.canvas.periodCanvas &&
                this.canvas.assetCanvas &&
                this.canvas.badActorCanvas &&
                this.canvas.badActorCanvas &&
                this.canvas.tenLowOffCanvas
            ) {
                PDF.addImage(this.canvas.monthYearCanvas, 'PNG', 1, 10, 208, this.canvas.monthYearHeight);
                PDF.addImage(this.canvas.periodCanvas, 'PNG', 1, 125, 208, this.canvas.periodHeight);
                PDF.addPage();
                PDF.addImage(this.canvas.assetCanvas, 'PNG', 1, 10, 208, this.canvas.assetHeight);
                PDF.addPage();
                PDF.addImage(this.canvas.badActorCanvas, 'PNG', 1, 10, 208, this.canvas.badActorHeight);
                PDF.addPage();
                PDF.addImage(this.canvas.eventCanvas, 'PNG', 1, 10, 208, this.canvas.eventHeight);
                PDF.addPage('l');
                PDF.addImage(this.canvas.tenLowOffCanvas, 'PNG', 1, 10, 208, this.canvas.tenLowOffHeight);
    
                this.messageReport = false;
    
                PDF.save('angular-demo.pdf');
            }
        }

Библиотека html2pdf.js npm преобразует html в pdf, но может повлиять на производительность приложения.