Générer des PDF à partir de pages Web à la volée avec JSPDF

jspdf: un outil puissant pour la génération du PDF client, contrôle fin des éléments de la page

Points de base:

• JSPDF est une bibliothèque JavaScript qui permet la génération de fichiers PDF directement du côté client, accélérant ainsi le traitement. Il convient particulièrement pour un contrôle précis de la position, de la taille et de la pagination des éléments dans un document.
• La bibliothèque JSPDF est facile à utiliser pour la génération de fichiers PDF de base, mais en raison de la documentation limitée, elle peut être plus difficile pour les projets complexes. Cependant, il offre la possibilité d'ajouter du texte, des images et des formes aux PDF, et fournit un contrôle précis de la position et de la taille.
• La bibliothèque JSPDF peut être étendue à l'aide de son API. Des fonctions telles que textAlign() peuvent être ajoutées et les propriétés de texte peuvent être modifiées à l'aide de méthodes setFontSize(), setFont(), setTextColor() et setFontType().
• JSPDF permet également de créer des PDF de plusieurs pages, d'ajouter des tables à l'aide du plugin "Autotable" et y compris des hyperliens. Cependant, en raison des restrictions de sécurité du navigateur, les utilisateurs ne peuvent pas spécifier un emplacement de sauvegarde spécifique pour le PDF généré.

Le format de document portable (PDF) est une innovation majeure dans les domaines de l'édition de bureau et de l'automatisation de bureau.

Il est également largement utilisé dans l'édition Web, mais malheureusement, il est souvent utilisé de manière incorrecte - par exemple pour remplacer le contenu qui aurait dû être construit par HTML. Cela conduit à de nombreuses questions sur la convivialité, l'accessibilité, le référencement et plus encore.

Cependant, les fichiers PDF sont requis dans certains cas: lorsque des documents archivés sont nécessaires et doivent être utilisés en dehors du réseau (tels que les factures), ou lorsque un contrôle approfondi de l'impression est requis. C'est la nécessité d'un contrôle d'impression qui m'incite à étudier un moyen de générer facilement des PDF.

Le but de cet article n'est pas seulement d'expliquer simplement comment créer un PDF (il existe de nombreuses façons simples de le faire), mais aussi de se concentrer sur l'endroit où les fichiers PDF peuvent résoudre des problèmes, et comme jspdf comment aider à simple outils.

Traitement d'impression

Quiconque a traité des règles d'impression CSS comprend à quel point il est difficile d'atteindre une compatibilité décente de navigateur (par exemple, consultez le tableau de support de pause de page puis-je utiliser). Donc, quand j'ai besoin de construire quelque chose que je dois imprimer, j'essaie toujours d'éviter d'utiliser CSS, la solution la plus facile est d'utiliser le PDF. Ce dont je parle ici n'est pas une conversion HTML à PDF simple. (J'ai essayé plusieurs de ces outils, mais aucun d'entre eux ne me satisfait totalement.) Mon objectif est d'avoir un contrôle total sur la position et la taille des éléments, les pauses de page, etc.

Dans le passé, j'utilisais pour utiliser FPDF, un outil PHP qui vous donne facilement ce type de contrôle et peut facilement l'étendre avec de nombreux plugins.

Malheureusement, la bibliothèque semble avoir été abandonnée (sa dernière version remonte à 2011) (mise à jour: en fait, la dernière version semble être publiée en décembre 2015), mais grâce à certaines bibliothèques JavaScript, nous sommes maintenant PDF Les fichiers peuvent être construits directement du côté client (afin qu'ils soient générés plus rapidement).

Il y a quelques mois, lorsque j'ai commencé mon projet, j'ai recherché une bibliothèque JS et j'ai finalement trouvé deux candidats: JSPDF et PDFMake. PDFMake semble être bien documenté et facile à utiliser, mais comme il s'agit d'une version bêta, j'ai choisi JSPDF.

Créer un PDF à l'aide de jspdf

La documentation JSPDF est assez courte, y compris une page ainsi que certaines démos, ainsi que plus d'informations dans le fichier source (ou sa page JSDOC), alors n'oubliez pas que l'utiliser pour des projets complexes peut être un peu difficile au début.

Quoi qu'il en soit, JSPDF est très facile à générer des fichiers PDF de base. Regardons un exemple simple "Hello World":

var pdf = new jsPDF();
pdf.text(30, 30, 'Hello world!');
pdf.save('hello_world.pdf');

Cette page HTML génère un fichier PDF de page unique et l'enregistre sur votre ordinateur. Tout d'abord, vous devez créer un lien vers la bibliothèque JSPDF (dans ce cas, à partir de CDNJS.com), puis créer une instance JSPDF, ajouter une ligne de texte et enregistrer le résultat en tant que hello_world.pdf.

Notez que j'ai utilisé la version 1.0.272 et ce n'est pas le dernier: au moment de la rédaction, la dernière version est 1.1.135, mais elle a beaucoup de problèmes, donc j'utilise toujours la version précédente.

Vous pouvez voir à quel point il est facile de créer un fichier PDF de base (vous pouvez trouver plus d'exemples sur le site Web JSPDF).

Essayons de créer un contenu plus complexe.

Élément de dépliant

On m'a demandé de créer une application pour créer des dépliants simples il y a quelques mois. Il fait partie d'un projet plus vaste qui traite des services d'agence de voyage, la section Real Flyer est remplie de données JSON.

L'objectif principal du dépliant est de fournir un moyen facile d'afficher les offres spéciales à afficher dans la fenêtre du magasin d'agence de voyage.

J'ai reprogrammé l'application pour cet article, supprimé toutes les fonctionnalités côté serveur, simplifié la conception du dépliant, me débarrasser de la compatibilité du navigateur hérité et construit une interface utilisateur très simple à l'aide de bootstrap 3 et jQuery.

Cette démo fonctionne bien avec Firefox et Chrome, tandis que l'Explorer (ou Edge) ne vous permet pas d'afficher des aperçus, mais ne peut télécharger que le PDF généré.

Ceci est un exemple de PDF créé à l'aide de l'application (Source photo: Rafael Leão / Unsplash)

Une démonstration coulable peut être trouvée à la fin de cet article ou directement dans Codepen. Notez que puisque Codepen charge la page de résultats dans IFRAME, les prévisualisations PDF chargées dans IFRAMES ont des problèmes dans Chrome et Safari, empêchant l'aperçu d'être affiché. (Si vous le pouvez, utilisez Firefox ou essayez la démo sur mon site Web personnel).

Flyer Builder

L'interface utilisateur permet à l'utilisateur d'insérer certaines données de base (titre, résumé et prix). Vous pouvez choisir d'ajouter une image, sinon le titre "Offre spécial" de la boîte grise sera affiché.

D'autres données (nom de l'agent et URL et logo de son site Web) sont intégrés dans le code d'application.

PDF peut être prévisualisé dans Iframe (sauf l'Explorer ou Edge) ou téléchargé directement.

En cliquant sur le bouton "Mettre à jour l'aperçu" ou "Télécharger", le PDF est généré à l'aide de JSPDF et transmis à l'IFRAME en tant que chaîne URI de données ou enregistré sur disque, comme indiqué dans l'exemple ci-dessus.

Génération PDF Utilisez d'abord les options suivantes pour créer une nouvelle instance d'objet JSPDF: Orientation de portrait (P), Millimètre Unités (MM), format "A4".

var pdf = new jsPDF();
pdf.text(30, 30, 'Hello world!');
pdf.save('hello_world.pdf');

Utilisez la fonction AddImage pour ajouter des images. Notez que chaque objet placé dans une page PDF doit être positionné avec précision. Vous devez utiliser les unités déclarées pour gérer chaque coordonnée d'objet.

var pdf = new jsPDF('p', 'mm', 'a4');

L'image doit être Base64 Encoding: le logo Proxy est intégré dans le script dans ce format, tandis que l'image chargée par l'utilisateur est codée à l'aide de la méthode ReadAsDataurl dans le $ ('# Flyer-Image'). Changer l'écouteur.

Le titre est ajouté à l'aide de la fonction textalign. Notez que cette fonction ne fait pas partie du noyau JSPDF, mais, comme l'auteur le suggère dans son exemple, la bibliothèque peut être facilement étendue à l'aide de son API. Vous pouvez trouver la fonction textalign () en haut du script Flyer Builder:

// pdf.addImage(base64_source, image format, X, Y, width, height)
pdf.addImage(agency_logo.src, 'PNG', logo_sizes.centered_x, _y, logo_sizes.w, logo_sizes.h);

Cette fonction calcule la coordonnée x de la chaîne de texte pour la centrer, puis appelle la méthode Text () native:

pdf.textAlign(flyer_title, {align: "center"}, 0, _y);

Pour modifier les propriétés du texte, vous pouvez utiliser les méthodes setFontSize(), setFont(), setTextColor() et setFontType().

Par exemple, pour définir une chaîne rouge audacieuse de 20 points, vous devez taper ce qui suit:

pdf.text(text string, X, Y);

"Offre spéciale" Box gris et Circle de prix Utilisez deux méthodes similaires: roundedRect() et circle(). Les deux nécessitent les coordonnées du coin supérieur gauche, la valeur de taille (largeur et hauteur dans le premier cas et le rayon dans le deuxième cas):

pdf.setFontSize(20);
pdf.setFont("times");
pdf.setFontType("bold");
pdf.setTextColor(255, 0, 0);
pdf.text(10,10, 'This is a 20pt Times Bold red string');

Le paramètre de style

se réfère aux propriétés de remplissage et de trait d'un objet. Les styles valides incluent: S [par défaut] pour la course, F pour le rembourrage, DF (ou FD) pour le rembourrage et le trait.

Les propriétés de remplissage et de trait

doivent être prédéfinies avec setFillColor et setDrawColor, qui nécessitent la valeur RVB et setLineWidth, qui nécessitent la valeur de largeur de ligne dans les unités déclarées au début de la création de documents PDF.

Le code complet peut être trouvé dans la démonstration du codePen:

(Le lien Codepen doit être inséré ici, car je ne peux pas accéder aux sites Web externes, il ne peut pas être fourni)

Conclusion

Cet exemple de base montre comment créer un dépliant très basique à l'aide de JSPDF.

Il peut être simple à utiliser, mais le manque de documentation complète rend chaque étape très compliquée.

Je recherche toujours d'autres solutions, en me concentrant sur d'autres solutions comme PDFMake. Mais en fin de compte, je pense que la seule solution vraiment claire est de mieux prendre en charge les navigateurs qui impriment les règles CSS!

(La partie FAQ doit être incluse ici, le contenu est le même que le texte d'origine, mais le format peut être ajusté au besoin)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!