web-dev-qa-db-fra.com

Incorporation de SVG dans PDF (exportation de SVG vers PDF à l'aide de JS)

Les points de départ: je n'ai pas de serveur qui puisse fournir autre chose que des fichiers statiques. Et j'ai un élément SVG (créé dynamiquement) dans mon <body> que je souhaite exporter au format vectoriel, de préférence PDF ou SVG.

J'ai commencé à chercher à utiliser la lib déjà existante jsPDF avec downloadify . Cela a bien fonctionné. Malheureusement, cela ne prend pas en charge SVG, uniquement le texte.

J'ai lu sur le PDF pour incorporer des images SVG, et il semble avoir été activé depuis Acrobat Reader 5 (avec le plugin ImageViewer). Mais cela ne fonctionne pas. J'ai essayé avec 3 lecteurs différents PDF sans succès.

Cela signifie-t-il que les fichiers PDF ont supprimé la prise en charge de l'intégration SVG? Je n'ai rien trouvé là-dessus.

J'ai deux questions; cela peut-il être résolu? Et si oui, quelles sont les spécifications pour intégrer SVG à l'intérieur d'un PDF? Avec ces informations, je peux moi-même créer ce support dans jsPDF.

Les demandes de prise en charge du navigateur sont Safari, Chrome et Firefox. Les versions qui prennent en charge SVG.

29
Simeon

Pour tous ceux qui recherchent une solution JS uniquement: PDFKit semble être la solution supérieure pour générer PDF de JS ces jours-ci, et il prend en charge toutes les primitives de géométrie SVG (y compris l'interprétation des chaînes de géométrie path) hors de la boîte. Tout ce qui serait nécessaire pour rendre le contenu SVG existant serait un marcheur DOM qui garde une trace du style CSS et de l'héritage, si vous n'avez pas besoin de choses complexes comme des symboles, etc.

Je n'ai pas réussi avec le support SVG sommaire du jsPDF / svgToPdf combo mentionné dans l'autre réponse, et le code source de ces deux ne me semblait pas très bien conçu et complet.

24
Florian Ledermann

Je répondrai à ma propre question. J'ai fini par utiliser DocRaptor qui peut être appelé côté client à partir de JavaScript. Cela résout techniquement mon problème, même s'il s'agit d'une solution non libre. Si la réponse pouvait être une solution côté serveur, je pourrais utiliser wkhtmltopdf comme proposé par Mic.

8
Simeon

jsPDF a un plugin pour cela: svgToPdf :

https://github.com/ahwolf/jsPDF/blob/master/jspdf.plugin.svgToPdf.js

Je ne l'ai pas essayé, mais cela pourrait permettre d'éliminer l'utilisation d'une API externe et/ou de devoir s'appuyer sur une solution côté serveur.

6
stackex

Avez-vous essayé WKHTMLTOPDF? C'est un outil gratuit basé sur le webkit.
Nous avons écrit un petit tutoriel ici.

Sur un Mac, avec Safari ou Chrome, vous pouvez enregistrer une page HTML avec SVG intégré dans un PDF.
Étant donné que ces navigateurs utilisent WKHTMLTOPDF en interne, cela peut également fonctionner pour vous.

5
Mic