Génération de fichiers PDF avec JavaScript

268

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. J'ai besoin de pouvoir dessiner du texte, des images et des formes simples. J'adorerais pouvoir le faire entièrement dans le navigateur.

amibe
la source

Réponses:

446

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 bugs. Vous avez également quelques idées de solutions de contournement dans les navigateurs qui ne prennent pas en charge les URI de données. Il est sous licence libérale MIT.

Je suis tombé sur cette question avant de commencer à l'écrire et j'ai pensé revenir et vous le faire savoir :)

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>

James Hall
la source
10
Ai-je inspiré partiellement jsPDF? J'ai entendu parler de jsPDF le jour où vous l'avez annoncé. En regardant bien jusqu'à présent. J'ai fini par choisir Prawn car c'est facilement la meilleure bibliothèque de génération de PDF pour mes besoins. J'aimerais toujours faire tout mon travail dans le navigateur car je ne suis pas certain que Ruby sera installé sur le système sur lequel je déploie. J'observe jsPDF de très près. J'aimerais aider, mais mon temps est très limité. Cela pourrait changer à l'avenir.
amibe
7
Vous l'avez un peu inspiré :), je regardais autour d'Internet pour voir s'il existait déjà et j'ai vu que certaines personnes le trouveraient utile. Faites-moi savoir si vous souhaitez aider. Je suis @MrRio sur Twitter.
James Hall
23
Il est toujours bien vivant. 0.9.0rc2 Publié aujourd'hui.
James Hall du
87
@JamesHall, je tiens à vous remercier pour tout le travail qu'il faut pour l'écrire, et pour les licences du MIT pour rendre le monde meilleur quand vous auriez pu le commercialiser pour votre propre profit.
Charles Burns
16
Les downvoters peuvent-ils nous proposer leurs «meilleures» idées ou solutions? C'est un excellent effort.
Onur Yıldırım
138

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

La prise en charge du navigateur ne semble pas être aussi solide que jsPDF, ni semble-t-il y avoir une option pour les formes, mais les options de mise en forme du texte sont plus avancées que les options actuellement disponibles dans jsPDF.

mg1075
la source
7
Cette réponse devrait être beaucoup plus appréciée, pdfmake est tellement plus robuste que jspdf. Cependant, juste une note latérale, il enveloppe la bibliothèque PDFKit.
vittore
2
une autre note latérale, jspdf ne prend pas en charge utf-8 et pdfmake ne prend en charge utf-8 que pour les polices par défaut.
Leo
"pdfmake.min.js - 0.1.22 - il y a 9 heures" Il n'est pas mort, mis à jour ce jour.
zenbeni
En comparant les deux terrains de jeux, il me semble que jsPDF est plus ciblé sur la création de PDF "graphique", alors que pdfmake vise davantage à générer des documents "simples" bien formatés, il semble avoir beaucoup plus d'options pour la mise en forme de texte générique.
cslotty
Cet IE est-il convivial?
Wildhammer
59

Je maintiens PDFKit , qui alimente également pdfmake (déjà mentionné ici). Il fonctionne à la fois dans Node et dans le navigateur, et prend en charge un tas de choses que les autres bibliothèques ne font pas:

  • Incorporation de polices sous-définies, avec prise en charge de l'unicode.
  • Beaucoup de trucs avancés de mise en page de texte (colonnes, saut de page, saut de ligne unicode complet, texte riche de base, etc.).
  • Travailler sur encore plus de polices pour une typographie avancée (ligatures OpenType / AAT, substitution contextuelle, etc.). À venir: consultez la branche fontkit si vous êtes intéressé.
  • Plus de trucs graphiques: dégradés, etc.
  • Construit avec des outils modernes comme browserify et streams. Utilisable à la fois dans le navigateur et le nœud.

Consultez http://pdfkit.org/ pour un tutoriel complet pour voir par vous-même ce que PDFKit peut faire. Et pour un exemple des types de documents qui peuvent être produits, consultez les documents en tant que PDF généré à partir de certains fichiers Markdown à l'aide de 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 .

devongovett
la source
N'est-ce pas une bibliothèque côté serveur? Je pense que la discussion est sur la bibliothèque js côté client.
Ash Catchem
10
PDFKit fonctionne à la fois dans Node et dans le navigateur, comme mentionné dans la réponse. Voir le lien vers une démo de navigateur.
devongovett
Est-ce que cela comprime les images? Je travaille sur une application Web qui fonctionne de manière similaire à camscanner et je recherche la création de PDF via javascript pour tirer parti de la compression et du format multi-page.
Trevor
@devongovett pouvez-vous regarder ma question sur votre bibliothèque?
ninbit
8

Un autre projet intéressant est texlive.js .

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

Kpym
la source
L'exemple bonjour au monde rend bien mais prend environ 30 secondes pour terminer.
Sam Sippe
2

Vous pouvez utiliser ce service gratuit en ajoutant un lien qui crée un pdf à partir de n'importe quelle URL (par exemple http://www.phys.org ):

http://freehtmltopdf.com/?convert=http%3A%2F%2Fwww.phys.org&size=US_Letter&orientation=portrait&framesize=800&language=en

bateaueng
la source
1
Mise à jour: Quand je suis allé vérifier ce service freehtmltopdf.com , il a dit qu'il n'était plus disponible. On dirait que c'était incroyable!
Mark Duiker
vérifié maintenant - fonctionne. et c'est incroyable, j'utilise un service où je paie pour chaque pdf, et j'ai besoin de coder, c'est un tel solutionneur de problèmes.
Sergey Sob
-29

Même si vous pouviez générer le PDF en mémoire en JavaScript, vous auriez toujours la question de savoir comment transférer ces données à l'utilisateur. Il est difficile pour JavaScript de simplement envoyer un fichier à l'utilisateur.

Pour envoyer le fichier à l'utilisateur, vous voudriez faire une soumission de serveur afin que le navigateur affiche la boîte de dialogue d'enregistrement.

Cela dit, il n'est vraiment pas trop difficile de générer des PDF. Il suffit de lire les spécifications.

Frank Krueger
la source
1
Ce n'est pas difficile du tout, par exemple, il semble fonctionner avec les URI de données en.wikipedia.org/wiki/Data_URI_scheme (je l'ai déjà fait mais je ne me souviens pas si j'ai utilisé des URI de données).
Björn
58
De nos jours, vous pouvez facilement créer des fichiers en JavaScript. (Je viens du futur)
Derek 朕 會 功夫
5
C'est vraiment simple de nos jours .. vérifiez cela par exemple: github.com/ChenWenBrian/FileSaver.js
roy riojas
9
@FrankKrueger si vous supprimez votre réponse, vous gagnerez 6 points: P
Kamil Kiełczewski
8
@FrankKreuger, "Allez lire les spécifications" n'est presque jamais la bonne réponse sur SO.
Krishnan Venkiteswaran