Comment créer un PDF à partir de votre application Web

Les possibilités de création d'un fichier PDF à partir d'une application Web sont très variées. Dans cet article, Rachel Andrew examine les outils disponibles et partage ses recommandations pour vous aider à trouver l'outil qui vous convient le mieux.

De nombreuses applications Web exigent de donner à l'utilisateur la possibilité de télécharger quelque chose. Format PDF. Dans le cas d'applications (telles que les magasins de commerce électronique), ces fichiers PDF doivent être créés à l'aide de données dynamiques et être immédiatement disponibles pour l'utilisateur.

Dans cet article, nous allons explorer les moyens de générer une PDF directement à partir d'une application Web à la volée. Ce n’est pas une liste complète d’outils, mais j’essaie plutôt de montrer les différentes approches. Si vous souhaitez partager un outil ou des expériences de votre choix, ajoutez-les aux commentaires ci-dessous.

Démarrer avec HTML et CSS

Il est probable que notre application Web crée déjà un document HTML à l'aide des informations qui sera ajouté à notre PDF. Dans le cas d'une facture, l'utilisateur pourrait peut-être visualiser les informations en ligne, puis cliquer pour télécharger un fichier PDF pour ses enregistrements. Vous créez peut-être des bordereaux de marchandises; encore une fois, les informations sont déjà conservées dans le système. Vous souhaitez formater cela de manière agréable pour le téléchargement et l’impression. Par conséquent, un bon point de départ serait de déterminer s’il est possible d’utiliser ces codes HTML et CSS pour générer une version PDF.

CSS dispose d’une spécification qui traite de CSS pour l’impression, il s’agit de la page . Module média . J'ai un aperçu de cette spécification dans mon article « Concevoir pour imprimer avec CSS », et de nombreux éditeurs de livres utilisent CSS pour toutes leurs impressions. Par conséquent, CSS ayant lui-même des spécifications pour les documents imprimés, nous devrions pouvoir les utiliser.

La manière la plus simple de générer un fichier PDF est de l’utilisateur via son navigateur. En choisissant d'imprimer au format PDF plutôt que sur une imprimante, un fichier PDF sera généré. Malheureusement, ce PDF n’est généralement pas tout à fait satisfaisant! Pour commencer, les en-têtes et les pieds de page sont automatiquement ajoutés lorsque vous imprimez quelque chose à partir d'une page Web. Il sera également formaté en fonction de votre feuille de style d'impression – en supposant que vous en ayez une.

Le problème que nous rencontrons ici est le support médiocre de la spécification de fragmentation dans les navigateurs; cela peut signifier que le contenu de vos pages se brise de manière inhabituelle. La prise en charge de la fragmentation est inégale, comme je l’ai découvert lors de la recherche dans mon article, « Breaking Boxes With CSS Fragmentation ». Cela signifie que vous ne pourrez peut-être pas empêcher la rupture suboptimale du contenu, les en-têtes étant laissés comme dernier élément de la page, etc.

De plus, nous ne sommes pas en mesure de contrôler le contenu dans les zones de marge de page, par exemple ajouter un en-tête de notre choix à chaque page ou numérotation de page pour indiquer le nombre de pages d'une facture complexe. Ces éléments font partie de la spécification Paged Media, mais n'ont été implémentés dans aucun navigateur.

Mon article « Un guide sur l'état des feuilles de style d'impression en 2018 » est toujours précis en ce qui concerne le type Le support utilisé par les navigateurs pour imprimer directement à partir du navigateur, à l'aide d'une feuille de style d'impression.

Impression à l'aide de moteurs de rendu du navigateur

Il existe des moyens d'imprimer au format PDF à l'aide des moteurs de rendu du navigateur, sans passer par le menu Imprimer du navigateur, et se retrouver avec les en-têtes et les pieds de page comme si vous aviez imprimé le document. Les options les plus populaires en réponse à mon tweet étaient wkhtmltopdf et l’impression avec Chrome sans tête et Puppeteer.

wkhtmltopdf

Une solution mentionnée à plusieurs reprises sur Twitter est un outil en ligne de commande appelé . . Cet outil prend un fichier HTML ou plusieurs fichiers, ainsi qu'une feuille de style et les transforme en PDF. Pour ce faire, il utilise le moteur de rendu WebKit.

See more

Nous utilisons wkhtmltopdf. Ce n'est pas parfait, bien qu'il s'agisse probablement d'une erreur de l'utilisateur, mais suffisamment bon pour une application de production.

– Paul Cardno (@pcardno) 15 février 2019

Cet outil fait essentiellement la même chose. en tant qu’impression depuis le navigateur, vous n’obtiendrez pas les en-têtes et les pieds de page ajoutés automatiquement. Sur cet aspect positif, si vous avez une feuille de style d’impression fonctionnelle pour votre contenu, elle devrait également être générée au format PDF à l’aide de cet outil, de sorte qu’une simple présentation peut très bien s’imprimer.

Malheureusement, vous rencontrerez toujours mêmes problèmes que lors de l’impression directe à partir du navigateur Web en ce qui concerne le manque de prise en charge de la spécification du support paginé et des propriétés de fragmentation, étant donné que vous imprimez toujours à l’aide d’un moteur de rendu du navigateur. Vous pouvez insérer certains indicateurs dans wkhtmltopdf afin de rétablir certaines des fonctionnalités manquantes que vous auriez par défaut à l'aide de la spécification Paged Media. Cependant, cela nécessite un travail supplémentaire en plus de l'écriture de bons codes HTML et CSS.

Chrome sans tête

Une autre possibilité intéressante est celle de d'utiliser Headless Chrome et Puppeteer pour imprimer au format PDF.

See more

Marionnettiste. C'est incroyable pour cela.

– Alex Russell (@slightlylate) Le 15 février 2019

Cependant, encore une fois, vous êtes limité par le support du navigateur pour les supports paginés et la fragmentation. Il y a quelques options qui peuvent être passées dans la fonction page.pdf () . Comme avec wkhtmltopdf, ceux-ci ajoutent certaines des fonctionnalités qui seraient possibles à partir de CSS si le navigateur était pris en charge.

Il se peut qu'une de ces solutions fasse tout ce dont vous avez besoin, cependant, si vous constatez que vous êtes Si vous affrontez une bataille, il est probable que vous atteignez les limites de ce qui est possible avec les moteurs de rendu de navigateur actuels et que vous deviez rechercher une meilleure solution.

Polyfills JavaScript pour les supports paginés

Il y a quelques-uns tente de reproduire essentiellement la spécification du support paginé dans le navigateur à l'aide de JavaScript, ce qui crée essentiellement un Polyfill de support paginé. Cela pourrait vous apporter un soutien Paged Media lors de l'utilisation de Puppeteer. Jetez un coup d'œil à paged.js et Vivliostyle .

See more

Oui. Pour les documents simples, tels que les certificats de cours, nous pouvons utiliser Chrome, qui ne supporte qu'un minimum de @ pages. Pour le reste, nous utilisons PrinceXML ou le polyfill paged.js en Chrome. Voici une preuve de concept WIP utilisant paged.js pour les livres: https://t.co/AZ9fO94PT2

– Electric Book Works (@electricbook) le 15 février 2019

Utilisation de A Imprimer l'agent utilisateur

Si vous souhaitez conserver une solution HTML et CSS, vous devez vous tourner vers un agent utilisateur conçu pour imprimer à partir de HTML et CSS, qui dispose d'une API permettant de générer le PDF à partir de vos fichiers. Ces agents d'utilisateur implémentent la spécification Paged Media et prennent beaucoup mieux en charge les propriétés de fragmentation CSS. cela vous donnera un plus grand contrôle sur la sortie. Les principaux choix sont les suivants:

Un agent d’impression imprimera les documents en CSS, comme le ferait un navigateur Web. Comme pour la prise en charge de CSS par le navigateur, vous devez consulter la documentation de ces AU pour savoir ce qu’ils prennent en charge. Par exemple, Prince (que je connais le mieux) supporte Flexbox mais pas CSS Grid Layout au moment de la rédaction. Lorsque vous envoyez vos pages à l'outil que vous utilisez, il s'agira généralement d'une feuille de style spécifique à imprimer. Comme avec une feuille de style d'impression classique, les CSS que vous utilisez sur votre site ne conviendront pas toutes pour la version PDF.

La création d'une feuille de style pour ces outils est très similaire à la création d'une feuille de style d'impression normale, en prenant des décisions de ce genre. de ce qu’il faut afficher ou masquer, en utilisant éventuellement une taille de police ou des couleurs différentes. Vous pourrez alors tirer parti des fonctionnalités de la spécification de support paginé, en ajoutant des notes de bas de page, des numéros de page, etc.

Pour utiliser ces outils à partir de votre application Web, vous devez les installer sur votre serveur. (ayant acheté une licence pour le faire, bien sûr). Le principal problème de ces outils est qu’ils sont coûteux. Cela dit, étant donné la facilité avec laquelle vous pouvez ensuite produire des documents imprimés avec eux, ils pourraient bien se permettre de gagner du temps en développement.

Il est possible d’utiliser Prince via une API, sur la base du paiement par document, via service appelé DocRaptor . Ce serait certainement un bon point de départ pour de nombreuses applications, comme si cela devenait plus rentable d’héberger les vôtres, le coût de développement du basculement serait minime.

Une alternative gratuite, qui n’est pas tout à fait aussi WeasyPrint est un outil aussi complet que les outils ci-dessus, mais pouvant donner les résultats dont vous avez besoin. Il ne met pas complètement en œuvre tous les supports paginés, mais il en implémente plus qu’un moteur de navigateur.

Parmi les autres outils qui prétendent prendre en charge la conversion de HTML et CSS, on citera PDFCrowd, qui prétend hardiment supporter HTML5, CSS3 et JavaScript . Cependant, je n’ai trouvé aucun détail sur ce qui était pris en charge et sur la spécification d’un support paginé. On a également mentionné dans les réponses à mon tweet mPDF .

S'éloigner de HTML et de CSS

Il existe un certain nombre d'autres solutions qui abandonnent l'utilisation de HTML et de CSS et vous obligent à créer une sortie spécifique pour l'outil. Voici quelques exemples de candidats JavaScript:

See more

Le navigateur sans en-tête + l'enregistrement au format PDF était autrefois mon premier choix, mais produisait toujours des résultats médiocres pour autre chose qu'un document d'une seule page. Nous sommes passés à https://t.co/3o8Ce23F1t pour des rapports de plusieurs pages qui demandaient beaucoup plus d'efforts mais en valaient la peine à la fin!

– JimmyJoy (@jimle_uk) 15 février 2019

Recommandations

Outre les approches basées sur JavaScript, qui vous obligeraient à créer une représentation complètement différente de votre contenu pour l'impression, la beauté de beaucoup de ces solutions est qu'elles sont interchangeables. Si votre solution consiste à appeler un outil en ligne de commande et à lui transmettre votre code HTML, CSS et éventuellement du JavaScript, il est assez simple de basculer d'un outil à l'autre.

Au cours de la rédaction de cet article, j'ai également découvert un Emballage Python pouvant exécuter un certain nombre d’outils différents. (Notez que vous devez déjà avoir installé les outils eux-mêmes. Toutefois, cela pourrait être un bon moyen de tester les différents outils sur un document exemple.)

Pour la prise en charge des supports paginés et fragmentation, Prince, Antenna House et PDFReactor vont sortir en haut. En tant que produits commerciaux, ils sont également accompagnés. Si vous avez un budget, des pages complexes à imprimer au format PDF et que votre délai est limité par le temps dont disposent les développeurs, il est très probable que ce soit le moyen le plus rapide pour que votre création PDF fonctionne correctement.

Cependant, dans de nombreux cas, le des outils gratuits fonctionneront bien pour vous. Si vos exigences sont très simples, alors wkhtmltopdf, ou une solution de base sans tête Chrome et Puppeteer, peut faire l'affaire. Cela a certainement semblé fonctionner pour de nombreuses personnes qui ont répondu à mon tweet original.

Si vous avez du mal à obtenir le résultat souhaité, sachez toutefois que cela peut constituer une limitation de l'impression par navigateur. font mal. Si vous souhaitez davantage de support Paged Media, mais que vous n'êtes pas en mesure de choisir un produit commercial, jetez un coup d'œil à WeasyPrint.

J'espère que c'est un aperçu utile des outils disponibles pour créer des fichiers PDF à partir de votre application web. Si rien d’autre, cela montre qu’il existe une grande variété de choix, si votre choix initial ne donne pas les résultats escomptés.

Merci d’ajouter vos propres expériences et suggestions dans les commentaires, c’est l’une de ces choses que beaucoup d’entre nous En fin de compte, l'expérience personnelle partagée peut s'avérer extrêmement utile.

Pour en savoir plus

Une synthèse des divers outils et ressources mentionnés dans cet article, ainsi que d'autres ressources utiles pour l'utilisation de fichiers PDF à partir d'applications Web.

Spécifications

Articles et ressources

Outils