Générer un PDF via l'API JavaScript Open Source
Bibliothèque JavaScript Open Source pour créer et convertir des fichiers PDF, ajouter des graphiques et du texte au PDF via JavaScript.
JSPDF est une solution open source côté client HTML5 pour la création et la gestion de documents PDF. Il prend en charge d'excellentes fonctionnalités telles que les rapports, les certificats, la billetterie et bien plus encore. Le format PDF étant très populaire sur le Web, presque toutes les entreprises l'utilisent pour partager des documents et des rapports. En utilisant seulement quelques commandes, vous pouvez accéder à toutes les fonctionnalités intéressantes de votre propre application et les réutiliser.
La grande idée de la bibliothèque JsPDF est qu'elle génère un fichier PDF lorsque les utilisateurs cliquent sur le bouton de téléchargement. Il a inclus la prise en charge de plusieurs fonctionnalités importantes, telles que la génération de documents PDF, le dessin de formes et l'insertion d'images dans des fichiers PDF, l'ajout de pages au PDF, l'ajout et l'affichage de texte, l'exportation de cartes au format PDF, la conversion de HTML en PDF et bien d'autres.
Premiers pas avec JsPDF
La méthode recommandée et la plus simple pour commencer est de déposer la bibliothèque hébergée CDN dans votre page, ci-dessous se trouve la commande.
utiliser le code d'installation
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.debug.js" integrity="sha384-NaWTHo/8YCBYJ59830LTz/P4aQZK1sS0SneOgAvhsIl3zBu8r9RevNg5lHCHAuQ/" crossorigin="anonymous"></script> Génération de documents PDF via la bibliothèque JavaScript
JsPDF offre la fonctionnalité de génération de documents PDF ainsi que des modifications dans les applications JavaScript. Vous pouvez facilement générer des documents PDF et y ajouter une nouvelle page. Vous pouvez définir l'orientation du document, les unités et le format de page par défaut lors de la création du nouveau document. Une fois le PDF généré, vous pouvez facilement y ajouter de nouvelles pages, y insérer des images, etc.
Créer des documents PDF via JavaScript
import { jsPDF } from "jspdf";
// Default export is a4 paper, portrait, using millimeters for units
const doc = new jsPDF();
doc.text("Hello world!", 10, 10);
doc.save("a4.pdf");
Insertion de texte dans des documents PDF via JavaScript
L'API JsPDF permet aux développeurs JavaScript d'ajouter et d'afficher du texte dans un document PDF. Pour dessiner le texte, vous devez définir le nom de la police. Nous pouvons choisir parmi les polices disponibles. Il est également possible de modifier la famille de polices et le style de police. Après cela, nous pouvons définir la taille de la police, la couleur du texte et plus encore.
Ajouter du texte à un PDF existant à l'aide de JavaScript
//Add Text to Existing PDF
var doc = new jsPDF();
doc.addHTML(document.body, function() {
doc.text(20, 20, 'Hello world!');
doc.text(20, 30, 'This is client-side Javascript, pumping out a PDF.');
doc.addPage();
doc.text(20, 20, 'Do you like that?');
printData();
});
printData = function() {
var str = doc.output('datauristring');
console.log(str);
// window.open(str); Optional
}
Ajout de graphiques aux documents PDF via JavaScript
La bibliothèque JsPDF permet à JavaScript professionnel de dessiner des graphiques dans des documents PDF. Les graphiques ajoutent toujours plus de valeur au contenu. Tout d'abord, nous devons définir les couleurs de remplissage et de trait des formes dessinées. Nous pouvons également définir la largeur du trait. Chaque fonction de dessin de forme prend les coordonnées du point central comme deux premiers paramètres (sauf le triangle). Ils prennent également le style de dessin du dernier paramètre. Nous pouvons dessiner une ellipse, en passant deux rayons ou un cercle, en passant un seul rayon, un triangle, en passant les coordonnées de chaque coin et plus encore.
Ajouter une image au PDF en utilisant JavaScript
// Add image to PDF
var img = new Image()
img.src = 'assets/sample.png'
pdf.addImage(img, 'png', 10, 78, 12, 15)
