web-dev-qa-db-fra.com

Angular2: Comment utiliser la bibliothèque pdfmake

Essayer d'utiliser la bibliothèque pdf côté client pdfmake dans mon projet Angular 2 (version = 4.2.x)).

Dans le fichier .angular-cli.json, j'ai déclaré js comme ceci:

"scripts": [
    "../node_modules/pdfmake/build/pdfmake.js",
    "../node_modules/pdfmake/build/vfs_fonts.js"
  ]

Et puis dans app.component.ts, je l'ai utilisé comme ceci:

import * as pdfMake from 'pdfmake';

@Component({
selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
   pdf: any;
   downloadPdf() {
    let item = {firstName: 'Peter', lastName: 'Parker'};
    this.pdf = pdfMake;
    this.pdf.createPdf(buildPdf(item)).open();
  }
}

function buildPdf(value) {
   var pdfContent = value;
   var docDefinition = {
     content: [{
    text: 'My name is: ' + pdfContent.firstName  + ' ' + pdfContent.lastName + '.'
     }]
   }
   console.log(pdfContent);
   return docDefinition;
}

J'ai touché l'erreur ci-dessous dans la console du navigateur lors du chargement de l'application:

Uncaught TypeError: fs.readFileSync is not a function
at Object.<anonymous> (linebreaker.js:15)
at Object.<anonymous> (linebreaker.js:161)
at Object.../../../../linebreak/src/linebreaker.js (linebreaker.js:161)
at __webpack_require__ (bootstrap b937441…:54)
at Object.../../../../pdfmake/src/textTools.js (textTools.js:4)
at __webpack_require__ (bootstrap b937441…:54)
at Object.../../../../pdfmake/src/docMeasure.js (docMeasure.js:4)
at __webpack_require__ (bootstrap b937441…:54)
at Object.../../../../pdfmake/src/layoutBuilder.js (layoutBuilder.js:7)
at __webpack_require__ (bootstrap b937441…:54)

Ma solution de contournement pour résoudre ce problème est la suivante:

Copiez pdfmake.js et vfs_fonts.js dans le dossier d'actifs, puis ajoutez-le dans index.html:

<script src='assets/pdfmake.min.js'></script>
<script src='assets/vfs_fonts.js'></script>

Supprimer cela de app.component.ts

import * as pdfMake from 'pdfmake';

Et ajoutez ceci à app.component.ts:

declare var pdfMake: any;

Enfin, supprimez cela de .angular-cli.js:

"../node_modules/pdfmake/build/pdfmake.js",
"../node_modules/pdfmake/build/vfs_fonts.js"

Cela fonctionne mais c'est toujours une solution de contournement.

Tout le monde sait comment utiliser cette bibliothèque de manière angulaire/typographique?

Merci beaucoup!

angularpdfmake
11
Softhinker.com

En suivant les instructions ci-dessus faites par @benny_boe, je l'ai fait fonctionner! Permettez-moi de le résumer comme suit:

Premier,

npm install pdfmake --save

Deuxièmement, ajoutez ci-dessous à typings.d.ts:

declare module 'pdfmake/build/pdfmake.js';
declare module 'pdfmake/build/vfs_fonts.js';

Troisièmement, dans le fichier où pdfMake est utilisé, composant ou service, ajoutez les lignes ci-dessous:

import * as pdfMake from 'pdfmake/build/pdfmake.js';
import * as pdfFonts from 'pdfmake/build/vfs_fonts.js';
pdfMake.vfs = pdfFonts.pdfMake.vfs;

Enfin, utilisez pdfMake.xxx () comme d'habitude.

21
Softhinker.com

Alors, tout d'abord. Vous n'avez pas besoin d'ajouter vos scripts tiers au .angular-cli.json [~ # ~] et [~ # ~] ajoutez une importation dans vos fichiers TS. Jetez un œil à la scripts globaux histoire de la CLI Angular CLI.

Une fois que vous avez importé une bibliothèque via le tableau de scripts, vous ne devez pas l'importer via une instruction d'importation dans votre code TypeScript ...

(Il n'y a pas de typage pour pdfmake, vous devrez donc les déclarer lors de la suppression du fichier de configuration ..)

Donc, si vous voulez l'ajouter à votre fichier TS ... remplacez votre import * as pdfMake from 'pdfmake'; (c'est la version côté serveur!) avec la version côté client ('pdfmake/build/pdfmake'). Vous devrez également ajouter les polices ('pdfmake/build/vfs_fonts') sinon vous obtiendrez également une erreur.

Lorsque vos importations ressemblent à ceci, cela devrait fonctionner:

import pdfMake from 'pdfmake/build/pdfmake';
import pdfFonts from 'pdfmake/build/vfs_fonts';
pdfMake.vfs = pdfFonts.pdfMake.vfs;
11
benny_boe

Une autre approche simple lors de l'utilisation de scripts globaux selon angular-cli Stories Global Scripts si vous suivez attentivement les instructions. [~ # ~] si [~ # ~] la bibliothèque n'a pas de typage.

Sur le fichier angular-cli.json 

"scripts": [
  "../node_modules/pdfmake/build/pdfmake.min.js",
  "../node_modules/pdfmake/build/vfs_fonts.js"
],

ON fichier src/typings.d.ts

Ajouter declare var pdfMake: any; ligne ci-dessous.

Maintenant, n'importe où dans votre application, la variable globale pdfMake est désormais disponible.

Essayez de vous connecter pdfMake dans le constructeur ou toute autre méthode d'initialisation

ngOnInit() { console.log(pdfMake); }

[~ # ~] sortie [~ # ~] 

{
    createdPdf: f(t),
    vfs: {
        Roboto-Italic.ttf: "some long encoded string...",
        Roboto-Medium.ttf: "some long encoded string...",
        Roboto-MediumItalic.ttf: "some long encoded string...",
        Roboto-Regular.ttf: "some long encoded string...",
    }
}

Ce qui signifie qu'il est prêt à l'emploi.

2
Roel
npm i pdfmake;

import * as pdfMake from 'pdfmake/build/pdfmake';
import * as pdfFonts from 'pdfmake/build/vfs_fonts';

pdfMake.vfs = pdfFonts.pdfMake.vfs;
  var dd = {
    content: [
      {
        layout: 'lightHorizontalLines', // optional
        table: {
          // headers are automatically repeated if the table spans over multiple pages
          // you can declare how many rows should be treated as headers
          headerRows: 1,
          widths: [ '*', 'auto', 100, '*' ],

          body: [
            [ 'First', 'Second', 'Third', 'The last one' ],
            [ 'Value 1', 'Value 2', 'Value 3', 'Value 4' ],
            [ { text: 'Bold value', bold: true }, 'Val 2', 'Val 3', 'Val 4' ]
          ]
        }
      }
    ]
  };
pdfMake.createPdf(dd).download();
1
Ayush Bhadauria