web-dev-qa-db-fra.com

html2canvas pour rendre le document PDF avec un style css utilisant angular2/dactylographe

Comment générer un fichier de sortie PDF en utilisant html2canvas avec angular2

J'ai essayé d'importer le fichier html2canvas TypeScript et fait une déclaration comme celle-ci pour l'utiliser

declare let html2canvas: Html2CanvasStatic;

mais je reçois html2canvas n'est pas défini 

html2canvas(document.body, {
  onrendered: function(canvas) {
    document.body.appendChild(canvas);
  }
});

J'ai trouvé ce fichier TypeScript sur github html2canvas TypeScript

comment puis-je l'utiliser pour mon application angular2

pdfangulartypescripthtml2canvas
7
khalil _diouri

Je pourrais utiliser html2canvas avec les modifications suivantes:

package.json:

 "dependencies": {
     "html2canvas": "0.5.0-beta4",
     "@types/html2canvas": "0.5.32",
 }

Après avoir utilisé npm install, je pourrais utiliser html2canvas dans mes fichiers composant.ts comme ceci:

import * as html2canvas from "html2canvas"

test() {
    html2canvas(document.body, {
        onrendered: function(canvas) {
        var img = canvas.toDataURL()
        window.open(img);
     }
    });

}

Sans installer @types/html2canvas, je pourrais utiliser la bibliothèque via require mais pas via l'importation:

html2canvas = require('hmtl2canvas');
11
mszalbach

Si vous utilisez Angular 4, vous pouvez inclure html2canvas dans la liste des scripts de .angular-cli.json as

"scripts": [
    "../node_modules/html2canvas/dist/html2canvas.min.js"
]

Après cela, importez-le dans votre classe comme ci-dessous 

import * as html2canvas from "html2canvas"

puis utilisez-le dans vos fonctions comme ci-dessous 

html2canvas(parameters);
4
Anil Agrawal

En 2018:

html2canvas(document.body).then((canvas) => {
    window.open().document.write('<img src="' + canvas.toDataURL() + '" />');
  });
2
Ismaestro

Ceci s’ajoute à la réponse ci-dessus, c’est-à-dire ajoutez @ types/html2canvas à des dépendances et ajoutez une instruction d’importation dans votre code.

Cependant, en utilisant l'exemple de code ci-dessus, je reçois une erreur dans VisualStudioCode i.e. 

'onrendered' n'existe pas dans le type 'Html2CanvasOptions'.

Pour résoudre cela, j'ai utilisé "alors" comme ci-dessous:

html2canvas(document.body).then((canvas) => {
  document.body.appendChild(canvas);
});
1
pradeep
myClickFunction(event: any) {
html2canvas(event.target)
  .then((canvas) => {
    var img = canvas.toDataURL()
    window.open(img);
  })
  .catch(err => {
    console.log("error canvas", err);
  });
}
0
Vinayak Bappanadu