web-dev-qa-db-fra.com

Comment convertir avec angulaire: HTML EN PDF

J'utilise Angular et je veux convertir une table de HTML en PDF, ceci est mon code dans le composant.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');
}

et mon code HTML est:

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

En fait, je peux télécharger un PDF, mais il est complètement blanc.

angulartypescriptjspdfhtml-to-pdf
3
Sternisic

Entendre est Code de démonstration de Stackblitz

J'espère que cela aidera

1
DeC

Vous pouvez utiliser la bibliothèque 'Printjs' pour convertir des modèles HTML en PDF. https://printjs.crabbly.com/

1
Ashish Sharma

D'abord installer ce paquet

npm install jspdf
npm install [email protected] //working with this html2canvas version.

Importer dans notre composant à l'aide de l'instruction IMPORT (APPLOPONENT.TS).

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

Ajouter app.component.html

<div class="abc" id="content">
    <h1>Hello World!</h1>
    <button (click)="Screen()">make pdf</button>
</div>

Ajouter app.component.ts

Screen()
{  
    var data = document.getElementById('content');  
    html2canvas(data).then(canvas => {  
        // Few necessary setting options  
        var imgWidth = 208;   
        var pageHeight = 295;    
        var imgHeight = canvas.height * imgWidth / canvas.width;  
        var heightLeft = imgHeight;  

        const contentDataURL = canvas.toDataURL('image/png')  
        let pdf = new jspdf('p', 'mm', 'a4'); // A4 size page of PDF  
        var position = 0;  
        pdf.addImage(contentDataURL, 'PNG', 0, position, imgWidth, imgHeight)  
        pdf.save('MYPdf.pdf'); // Generated PDF   
    });  
}
1
Pandurang Zanwar