Как мне конвертировать с Angular: HTML в PDF - PullRequest
Новая
       39

Как мне конвертировать с Angular: HTML в PDF

0 голосов
/ 10 июля 2019

Я использую Angular и хочу преобразовать таблицу из html в pdf, это мой код в component.ts: 

downloadPDF() {
    const doc = new jsPDF();
    const specialElememtHandlers = {
        '#editor'(element, renderer) {
            return true;
        }
    };

    doc.fromHTML(this.content.nativeElement.innerHTML, 15, 15, {
        width: 190,
        elementHandlers: specialElememtHandlers
    });
    doc.save('test.pdf');
}

и мой HTML-код: 

<button (click)="downloadPDF()">Save as PDF</button>

Я действительно могу скачать pdf, но он полностью белый.

Ответы [ 2 ]

2 голосов
/ 10 июля 2019

Сначала установите этот пакет

npm установите jspdf

И установите пакет html2canvas.

npm установите html2canvas

Импортируйте его в наш компонент, используя оператор импорта. 

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

в вашем коде TS: 

import { Component, OnInit, ElementRef ,ViewChild} from '@angular/core';  
import * as jspdf from 'jspdf';  
import html2canvas from 'html2canvas';  

@Component({  
  selector: 'app-htmltopdf',  
  templateUrl: './htmltopdf.component.html',  
  styleUrls: ['./htmltopdf.component.css']  
})  
export class HtmltopdfComponent{  
  public captureScreen()  
  {  
    var data = document.getElementById('contentToConvert');  //Id of the table
    html2canvas(data).then(canvas => {  
      // Few necessary setting options  
      let imgWidth = 208;   
      let pageHeight = 295;    
      let imgHeight = canvas.height * imgWidth / canvas.width;  
      let heightLeft = imgHeight;  

      const contentDataURL = canvas.toDataURL('image/png')  
      let pdf = new jspdf('p', 'mm', 'a4'); // A4 size page of PDF  
      let position = 0;  
      pdf.addImage(contentDataURL, 'PNG', 0, position, imgWidth, imgHeight)  
      pdf.save('MYPdf.pdf'); // Generated PDF   
    });  
  }  
}
0 голосов
/ 10 июля 2019

Вы можете использовать библиотеку «PrintJS» для преобразования HTML-шаблонов в PDF. https://printjs.crabbly.com/

...