Générer des fichiers PDF avec JavaScript

Question

J'essaie de convertir des données XML en fichiers PDF à partir d'une page Web et j'espérais pouvoir le faire entièrement en JavaScript. Je dois être en mesure de dessiner du texte, des images et des formes simples. J'aimerais pouvoir le faire entièrement dans le navigateur.

Answer 1

Je viens d'écrire une bibliothèque appelée jsPDF qui génère des PDF en utilisant uniquement Javascript. Il est encore très jeune, et j'ajouterai bientôt des fonctionnalités et des corrections de bogues. J'ai aussi quelques idées de contournement pour les navigateurs qui ne supportent pas les URIs de données. Il est sous une licence MIT libérale.

Je suis tombée sur cette question avant de commencer à l'écrire et j'ai pensé revenir pour vous en faire part :)

Générer des PDF en Javascript

Exemple de création d'un fichier PDF "Hello World".

// Default export is a4 paper, portrait, using milimeters for units
var doc = new jsPDF()

doc.text('Hello world!', 10, 10)
doc.save('a4.pdf')

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.debug.js"></script>

Answer 2

Une autre bibliothèque javascript qui mérite d'être mentionnée est pdfmake .

• terrain de jeu pdfmake
• pdfmake sur github

La prise en charge du navigateur ne semble pas être aussi forte que celle de jsPDF, et il ne semble pas y avoir d'option pour les formes, mais les options de formatage du texte sont plus avancées que les options actuellement disponibles dans jsPDF.

Answer 3

Je maintiens PDFKit qui fait aussi fonctionner pdfmake (déjà mentionné ici). Elle fonctionne à la fois dans Node et dans le navigateur, et supporte un tas de choses que les autres bibliothèques ne supportent pas :

• Intégration de polices sous-ensembles, avec prise en charge de l'unicode.
• Beaucoup de fonctionnalités avancées de mise en page (colonnes, saut de page, saut de ligne unicode complet, texte riche de base, etc.)
• Je travaille sur encore plus de polices pour la typographie avancée (ligatures OpenType/AAT, substitution contextuelle, etc.). Prochainement : voir la branche fontkit si vous êtes intéressés.
• Plus de trucs graphiques : gradients, etc.
• Construit avec des outils modernes comme browserify et streams. Utilisable à la fois dans le navigateur et dans le nœud.

Vérifiez http://pdfkit.org/ pour un tutoriel complet afin de voir par vous-même ce que PDFKit peut faire. Et pour avoir un exemple des types de documents qui peuvent être produits, regardez les documents au format PDF. généré à partir de certains fichiers Markdown en utilisant PDFKit lui-même : http://pdfkit.org/docs/guide.pdf .

Vous pouvez également l'essayer de manière interactive dans le navigateur ici : http://pdfkit.org/demo/browser.html .

Answer 4

Un autre projet intéressant est texlive.js .

Il vous permet de compiler (La)TeX en PDF dans le navigateur.

Answer 5

Pour les amateurs de réactions, il existe une autre grande ressource pour la génération de PDF : React-PDF

Il est idéal pour créer des fichiers PDF en React et même permettre à l'utilisateur de les télécharger du côté client lui-même, sans serveur !

Voici un petit exemple de React-PDF pour créer un fichier PDF à 2 sections.

import React from 'react';
import { Page, Text, View, Document, StyleSheet } from '@react-pdf/renderer';

// Create styles
const styles = StyleSheet.create({
  page: {
    flexDirection: 'row',
    backgroundColor: '#E4E4E4'
  },
  section: {
    margin: 10,
    padding: 10,
    flexGrow: 1
  }
});

// Create Document Component
const MyDocument = () => (
  <Document>
    <Page size="A4" style={styles.page}>
      <View style={styles.section}>
        <Text>Section #1</Text>
      </View>
      <View style={styles.section}>
        <Text>Section #2</Text>
      </View>
    </Page>
  </Document>
);

Cela produira un document PDF d'une seule page. À l'intérieur, deux blocs différents, chacun d'eux rendant un texte différent. Ce ne sont pas les seules primitives valides que vous pouvez utiliser. Vous pouvez vous référer à l'outil Composants o Exemples pour plus d'informations.