HTML au PDF avec le noeud.js

Je cherche à créer une version imprimable pdf des pages Web de mon site web. Quelque chose comme {[1] } ne rend la page que pdf

Est-ce que quelqu'un connaît un module de nœud qui fait cela ?

Si ce n'est pas le cas, comment en mettriez-vous un ? J'ai vu certaines méthodes parler d'utiliser un navigateur sans tête comme phantom.js, mais je ne sais pas quel est le flux.

58
demandé sur Martin Schröder 2013-01-28 00:50:03

8 réponses

Prolongeant la réponse de Mustafa.

A) Installer http://phantomjs.org/, puis

B) installer le module phantom node https://github.com/amir20/phantomjs-node

entrez la description de l'image ici

C) voici un exemple de rendu d'un pdf

var phantom = require('phantom');   

phantom.create().then(function(ph) {
    ph.createPage().then(function(page) {
        page.open("http://www.google.com").then(function(status) {
            page.render('google.pdf').then(function() {
                console.log('Page Rendered');
                ph.exit();
            });
        });
    });
});

Sortie du PDF:

entrez la description de l'image ici

Modifier: impression silencieuse que PDF

java -jar pdfbox-app-2.0.2.jar PrintPDF -silentPrint C:\print_mypdf.pdf

79
répondu Jozzhart 2016-07-04 10:22:55

Fantôme.js est un serveur webkit sans tête et il chargera n'importe quelle page web et la rendra en mémoire, bien que vous ne puissiez pas la voir, il existe une fonction de Capture D'écran, dans laquelle vous pouvez exporter la vue actuelle en PNG, PDF, JPEG et GIF. Jetez un oeil à cet exemple de phantom.js documentation

21
répondu Mustafa 2014-10-30 08:37:11

Si vous souhaitez exporter du HTML au format PDF. Vous avez beaucoup d'options. sans noeud même

Option 1: Avoir un bouton sur votre page html qui appelle la fenêtre.la fonction print (). utilisez les navigateurs HTML natif au format pdf. utilisez les requêtes Médias pour rendre votre page html bien paraître sur un pdf. et vous avez aussi l'impression avant et après les événements que vous pouvez utiliser pour apporter des modifications à votre page avant de l'imprimer.

Option 2. htmltocanvas ou rasterizeHTML. convertissez votre html en canvas, puis appelez toDataURL() sur l'objet canvas pour obtenir l'image . et utilisez une bibliothèque JavaScript comme jsPDF pour ajouter cette image à un fichier PDF. L'inconvénient de cette approche est que le pdf ne devient pas modifiable. Si vous voulez des données extraites de PDF, il existe différentes façons pour cela.

Option 3. @ Jozzhard Réponse

11
répondu MurWade 2014-08-09 21:12:58

La meilleure solution que j'ai trouvée est html-pdf. C'est simple et fonctionne avec du gros html.

Https://www.npmjs.com/package/html-pdf

C'est aussi simple que cela:

    pdf.create(htm, options).toFile('./pdfname.pdf', function(err, res) {
        if (err) {
          console.log(err);
        }
    });
7
répondu Thermech 2017-01-18 18:35:33

Créer un PDF à partir D'une URL externe

Voici une adaptation des réponses précédentes qui utilise html-pdf, mais le combine également avec requestify de sorte qu'il fonctionne avec une URL externe:

Installez vos dépendances

npm i -S html-pdf requestify

Ensuite, créez le script:

//MakePDF.js

var pdf = require('html-pdf');
var requestify = require('requestify');
var externalURL= 'http://www.google.com';

requestify.get(externalURL).then(function (response) {
   // Get the raw HTML response body
   var html = response.body; 
   var config = {format: 'A4'}; // or format: 'letter' - see https://github.com/marcbachmann/node-html-pdf#options

// Create the PDF
   pdf.create(html, config).toFile('pathtooutput/generated.pdf', function (err, res) {
      if (err) return console.log(err);
      console.log(res); // { filename: '/pathtooutput/generated.pdf' }
   });
});

Ensuite, vous exécutez simplement à partir de la ligne de commande:

node MakePDF.js

Regardez votre beautify pixel perfect PDF être créé pour vous (gratuitement!)

5
répondu TetraDev 2016-11-10 15:45:55

Utiliser html-pdf

var fs = require('fs');
var pdf = require('html-pdf');
var html = fs.readFileSync('./test/businesscard.html', 'utf8');
var options = { format: 'Letter' };

pdf.create(html, options).toFile('./businesscard.pdf', function(err, res) {
  if (err) return console.log(err);
  console.log(res); // { filename: '/app/businesscard.pdf' } 
});
2
répondu Krishan 2017-03-10 05:38:14

Paquet

J'ai utilisé html-pdf

Facile à utiliser et permet non seulement d'enregistrer des fichiers pdf en tant que Fichier, mais aussi de rediriger le contenu pdf vers un flux D'écriture (pour que je puisse le diffuser directement sur Google Storage pour y enregistrer mes rapports).

Utilisation des images css +

Il prend en compte css. Le seul problème que j'ai rencontré-il a ignoré mes images. La solution que j'ai trouvée était de remplacer l'url dans la valeur src attribute par base64, par exemple

<img src="data:image/png;base64,iVBOR...kSuQmCC">

Vous peut le faire avec votre code ou pour utiliser l'un des convertisseurs en ligne, par exemple https://www.base64-image.de/

Compiler le code HTML valide à partir du fragment html + css

  1. j'ai dû obtenir un fragment de mon document html (je viens d'appliquer .méthode html () sur le sélecteur jQuery).
  2. ensuite, j'ai lu le contenu du fichier css pertinent.

En utilisant ces deux valeurs (stockées dans les variables html et css en conséquence), j'ai compilé un code html valide en utilisant chaîne de Modèle

var htmlContent = `
<!DOCTYPE html>
<html>
  <head>
    <style>
      ${css}
    </style>
  </head>
  <body id=direct-sellers-bill>
    ${html}
  </body>
</html>`

Et l'a transmis à create méthode de html-pdf.

2
répondu Alexander 2017-10-02 11:04:26

Essayez D'utiliser Puppeteer pour créer des PDF à partir de HTML

Exemple à partir d'ici https://github.com/chuongtrh/html_to_pdf

Ou https://github.com/GoogleChrome/puppeteer

0
répondu ChuongTran 2018-10-03 11:55:52