web-dev-qa-db-fra.com

comment utiliser jsPDF et jspdf-autotable dans Angular 5

J'essaie d'utiliser jsPDF et jspdf-autotable dans mon projet Angular 5.2.0. Mon package.json est ci-dessous (parties liées):

"dependencies": {
    ...
    "jspdf": "^1.3.5",
    "jspdf-autotable": "^2.3.2"
    ...
}

Mon angular-cli.json est ci-dessous (parties liées):

"scripts": [
    ...
    "../node_modules/jspdf/dist/jspdf.min.js",
    "../node_modules/jspdf-autotable/dist/jspdf.plugin.autotable.js"
    ...
  ]

Mon composant (pièces connexes):

import * as jsPDF from 'jspdf';
import 'jspdf-autotable';

@Component({
    selector: "energy-login",
    templateUrl: "./login.component.html",
    styleUrls: ["./login.component.scss"]
})
export class MyComponent implements OnInit {

    constructor() {}

    ngOnInit() {}

    downloadPDF() {

        let columns = ["ID", "Name", "Country"];
        let rows = [
            [1, "Shaw", "Tanzania"],
            [2, "Nelson", "Kazakhstan"],
            [3, "Garcia", "Madagascar"],
        ];

        let doc = new jsPDF('l', 'pt');
        doc.autoTable(columns, rows); // TypeScript compile time error
        doc.save('table.pdf');
    }
}

Ça dit: 

[ts] Property 'autoTable' does not exist on type 'jsPDF'.

J'ai essayé de remplacer les importations dans mon composant par

// import * as jsPDF from 'jspdf';
// import 'jspdf-autotable';
declare var jsPDF: any;

alors il n’ya pas d’erreur de compilation mais lors de l’exécution de la fonction downloadPDF (), il est écrit:

ERROR ReferenceError: jsPDF is not defined
angularjspdfjspdf-autotable
2
RIDVAN TANIK

Pour travailler avec jspdf-autotable dans Angular 5, il faut installer jspdf et jspdf-autotable via npm.

npm install jspdf-autotable --save

ajoutez également les fichiers jspdf et jspdf-autotable au tableau de scripts dans angular-cli.json.

"scripts": [
    "../node_modules/jspdf/dist/jspdf.min.js",
    "../node_modules/jspdf-autotable/dist/jspdf.plugin.autotable.js"
],

et en composant ne jamais importer jspdf ou jspdf-autotable juste 

declare var jsPDF: any;

Bien sûr, avant de travailler avec jspdf-autotable, il faut installer jspdf et pour development @ types/jspdf via npm

npm install jspdf --save
npm install @types/jspdf --save-dev
1
RIDVAN TANIK

travaille pour moi Angular 5.

Pour travailler avec jspdf-autotable dans angular 5 , il faut installer jspdf et jspdf-autotable via npm

npm install jspdf --save
npm install @types/jspdf --save-dev
npm install jspdf-autotable --save

ajoutez également les fichiers jspdf et jspdf-autotable au tableau de scripts dans angular-cli.json.

"scripts": [
"../node_modules/jspdf/dist/jspdf.min.js",
"../node_modules/jspdf-autotable/dist/jspdf.plugin.autotable.js"
],

et dans le composant jamais importer jspdf ou jspdf-autotable juste.

Oubliez l'importation suivante. 


 
 importer * en tant que jsPDF à partir de 'jspdf'; 
 importer 'jspdf-autotable';

Il suffit d'utiliser Avant @Component:

declare var jsPDF: any;

Votre composant (pièces connexes):

declare var jsPDF: any;

@Component({
    selector: "energy-login",
    templateUrl: "./login.component.html",
    styleUrls: ["./login.component.scss"]
})

export class MyComponent implements OnInit {

    constructor() {}

    ngOnInit() {}

    downloadPDF() {

        let columns = ["ID", "Name", "Country"];
        let rows = [
            [1, "Shaw", "Tanzania"],
            [2, "Nelson", "Kazakhstan"],
            [3, "Garcia", "Madagascar"],
        ];

        let doc = new jsPDF('l', 'pt');
        doc.autoTable(columns, rows); // TypeScript compile time error
        doc.save('table.pdf');
        }
    }
5
Alciomar Hollanda

D'abord, vous avez déclaré les fichiers .js dans la propriété styles dans angular-cli.json, vous devez les ajouter à scripts. Dans la configuration que vous avez, vous devez ajouter vos scripts jspdf à scripts dans angular-cli.json, donc:

"scripts": [ 
    "../node_modules/jspdf/dist/jspdf.min.js",
    "../node_modules/jspdf-autotable/dist/jspdf.plugin.autotable.js"
  ],

dans ce cas, vous n'avez pas besoin d'importer jspdf dans votre composant. declare var jsPdf: any suffira pour l'utiliser.

2
Efe

Dans angular-cli.json

"scripts": [
    "../node_modules/jspdf/dist/jspdf.min.js"
  ],

Dans votre projet

import * as jsPdf from 'jspdf';
import 'jspdf-autotable';

Ce travail pour moi

2
Jim

J'ai résolu ce problème, commencez par importer le fichier Jspdf import * en tant que jsPDF à partir de 'jspdf'; alors fonctionne bien pour moi.

sur le site officiel, vous devez utiliser // déclarer var jsPDF: any; // Important. cela ne fonctionne pas dans mon cas, essayez d'importer * en tant que jsPDF à partir de 'jspdf'; au lieu.

dans angular.json dans les scripts:

"./node_modules/jspdf/dist/jspdf.min.js" ,[.________ .____"]

0
gaston villafañe

J'utilise 7 angulaire, et declare var jsPDF: any; ne me convient pas. Après quelques recherches sur Google, la solution était la suivante:

declare const require: any;
const jsPDF = require('jspdf');
require('jspdf-autotable');

Et bien sûr, j'ai installé les modules de npm et les ai inclus dans le tableau de scripts de angular.json. Cela fonctionne bien pour moi.

0
André Pacheco