web-dev-qa-db-fra.com

Générer PDF à partir de html en utilisant angular2 / typescript

Je veux prendre une partie de mon modèle HTML et le convertir en PDF pour donner à l'utilisateur une option pour le télécharger. (Après avoir cliqué sur un bouton par exemple).

J'ai trouvé une bibliothèque appelée jsPDF, comment utiliser jsPDF dans une application Angular2 (RC4)?

je vous remercie

pdfangulartypescriptjspdf
12
khalil _diouri

Si vous voulez l'utiliser en production, vous ne voulez certainement pas dépendre d'un lien Internet référencé dans votre index.html, comme proposé par @khalil_diouri.

Donc, pour l'utiliser correctement dans un environnement Angular2/TypeScript, installez-le d'abord à partir de npm

npm install --save jspdf

Si vous utilisez SystemJS, mappez-le dans votre fichier de configuration

map: {
    "jspdf": "node_modules/jspdf/dist/jspdf.min.js"
}

Installer le package de définition: (s'il n'est pas installé)

npm install typings --global

Installez les fichiers de définition:

typings install dt~jspdf --global --save

Et enfin, importez-le dans votre fichier component.ts

import jsPDF from 'jspdf'
...
    let doc = new jsPDF();
    doc.text(20,20,'Hello world');
    doc.save('Test.pdf');
...
18
crtormen

comme réponse

ce lien est nécessaire pour importer du contenu jsPDF

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script> // to use jsPDF for registring pdf file

puis en vous component.ts

vous faites cela

declare let jsPDF;

@Component({
    template: `
        <button
          (click)="download()">download
        </button>
        `
})

export class DocSection {


    constructor() {
    }

    public download() {

        var doc = new jsPDF();
        doc.text(20, 20, 'Hello world!');
        doc.text(20, 30, 'This is client-side Javascript, pumping out a PDF.');
        doc.addPage();
        doc.text(20, 20, 'Do you like that?');

        // Save the PDF
        doc.save('Test.pdf');
    }

}
12
khalil _diouri

la méthode AddHtml est obsolète:

Source: plugins/addhtml.js, ligne 12 Déconseillé: il est en cours de remplacement par une API prenant en charge les vecteurs. voir ici

Rend un élément HTML en objet canvas ajouté au PDF

Cette fonctionnalité nécessite html2canvas ou rasterizeHTML

2
Mohammed Yassine CHABLI

Pourquoi utiliser des fichiers de définition (également appelés déclaration)?

Pour utiliser des bibliothèques javascript externes (jsPDF, par exemple) avec des applications Angular2 (qui utilisent TypeScript), vous allez vouloir des fichiers de définition de type pour ces bibliothèques javascript. Ces fichiers fournissent des informations de type (comme dans String, Number, boolean, etc.) à TypeScript pour obtenir de l'aide sur la vérification du type de compilation. (Étant donné que javascript est typé de manière lâche)

Une autre explication sur les fichiers d.ts peut être trouvée ici .

Comment utiliser

Vous pouvez télécharger un package npm appelé typings qui aidera à accélérer le processus. Voici un petit guide sur la façon de l'utiliser. Une fois les saisies installées, vous pouvez exécuter:

npm run -- typings install dt~jspdf --global --save

pour obtenir le fichier de dactylographie que vous pourrez ensuite utiliser dans votre projet.

1
Scrambo