jsPDF
v2.5.2
Une bibliothèque pour générer des PDF en JavaScript.
Vous pouvez me retrouver sur Twitter : @MrRio ou vous rendre sur le site Web de mon entreprise pour des conseils.
jsPDF est désormais co-maintenu par yWorks - les experts en création de diagrammes.
Recommandé : récupérez jsPDF à partir de npm :
npm install jspdf --save
# or
yarn add jspdfVous pouvez également le charger depuis un CDN :
< script src =" https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.2/jspdf.umd.min.js " > </ script >Ou obtenez toujours la dernière version via unpkg
< script src =" https://unpkg.com/jspdf@latest/dist/jspdf.umd.min.js " > </ script > Le dossier dist de ce package contient différents types de fichiers :
core-js , la variante umd est autonome.Il n'est généralement pas nécessaire de spécifier le fichier exact dans la déclaration d'importation. Les outils de construction ou Node déterminent automatiquement le bon fichier, il suffit donc d'importer "jspdf".
Vous êtes alors prêt à commencer à créer votre document :
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" ) ;Si vous souhaitez modifier le format, l'orientation ou les unités du papier, vous pouvez :
// Landscape export, 2×4 inches
const doc = new jsPDF ( {
orientation : "landscape" ,
unit : "in" ,
format : [ 4 , 2 ]
} ) ;
doc . text ( "Hello world!" , 1 , 1 ) ;
doc . save ( "two-by-four.pdf" ) ; const { jsPDF } = require ( "jspdf" ) ; // will automatically load the node version
const doc = new jsPDF ( ) ;
doc . text ( "Hello world!" , 10 , 10 ) ;
doc . save ( "a4.pdf" ) ; // will save the file in the current working directory require ( [ "jspdf" ] , ( { jsPDF } ) => {
const doc = new jsPDF ( ) ;
doc . text ( "Hello world!" , 10 , 10 ) ;
doc . save ( "a4.pdf" ) ;
} ) ; const { jsPDF } = window . jspdf ;
const doc = new jsPDF ( ) ;
doc . text ( "Hello world!" , 10 , 10 ) ;
doc . save ( "a4.pdf" ) ; Certaines fonctions de jsPDF nécessitent des dépendances facultatives. Par exemple, la méthode html , qui dépend de html2canvas et, lorsqu'elle est fournie avec un document HTML de chaîne, dompurify . JsPDF les charge dynamiquement lorsque cela est nécessaire (en utilisant le format de module respectif, par exemple les importations dynamiques). Les outils de construction comme Webpack créeront automatiquement des morceaux distincts pour chacune des dépendances facultatives. Si votre application n'utilise aucune des dépendances facultatives, vous pouvez empêcher Webpack de générer les fragments en les définissant comme dépendances externes :
// webpack.config.js
module . exports = {
// ...
externals : {
// only define the dependencies you are NOT using as externals!
canvg : "canvg" ,
html2canvas : "html2canvas" ,
dompurify : "dompurify"
}
} ; Dans les projets Vue CLI , les externes peuvent être définis via les propriétés configureWebpack ou chainWebpack du fichier vue.config.js (doivent d'abord être créés dans de nouveaux projets).
Dans les projets angulaires , les externes peuvent être définis à l'aide de générateurs de webpacks personnalisés.
Dans les projets React ( create-react-app ), les externes peuvent être définis soit en utilisant React-app-rewired, soit en les éjectant.
jsPDF peut être importé comme n'importe quelle autre bibliothèque tierce. Cela fonctionne avec toutes les principales boîtes à outils et frameworks. jsPDF propose également un fichier de saisie pour les projets TypeScript.
import { jsPDF } from "jspdf" ;Vous pouvez ajouter jsPDF à votre projet météore comme suit :
meteor add jspdf:core
jsPDF nécessite des API de navigateur modernes pour fonctionner. Pour utiliser jsPDF dans des navigateurs plus anciens comme Internet Explorer, des polyfills sont requis. Vous pouvez charger tous les polyfills requis comme suit :
import "jspdf/dist/polyfills.es.js" ;Vous pouvez également charger le fichier polyfill pré-groupé. Ceci n'est pas recommandé, car vous pourriez finir par charger des polyfills plusieurs fois. Cela pourrait encore être utile pour les petites applications ou les POC rapides.
< script src =" https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.2/polyfills.umd.js " > </ script > Les 14 polices standard du PDF sont limitées à la page de codes ASCII. Si vous souhaitez utiliser UTF-8, vous devez intégrer une police personnalisée, qui fournit les glyphes nécessaires. jsPDF prend en charge les fichiers .ttf. Ainsi, si vous souhaitez avoir par exemple du texte chinois dans votre pdf, votre police doit comporter les glyphes chinois nécessaires. Vérifiez donc si votre police prend en charge les glyphes souhaités, sinon elle affichera des caractères tronqués au lieu du texte correct.
Pour ajouter la police à jsPDF, utilisez notre fontconverter dans /fontconverter/fontconverter.html. Le convertisseur de polices créera un fichier js avec le contenu du fichier ttf fourni sous forme de chaîne codée en base64 et du code supplémentaire pour jsPDF. Il vous suffit d'ajouter ce fichier js généré à votre projet. Vous êtes alors prêt à utiliser la méthode setFont dans votre code et à écrire votre texte codé en UTF-8.
Alternativement, vous pouvez simplement charger le contenu du fichier *.ttf sous forme de chaîne binaire à l'aide fetch ou XMLHttpRequest et ajouter la police au fichier PDF :
const doc = new jsPDF ( ) ;
const myFont = ... // load the *.ttf font file as binary string
// add the font to jsPDF
doc . addFileToVFS ( "MyFont.ttf" , myFont ) ;
doc . addFont ( "MyFont.ttf" , "MyFont" , "normal" ) ;
doc . setFont ( "MyFont" ) ; Depuis la fusion avec le fork yWorks, il y a eu beaucoup de nouvelles fonctionnalités. Cependant, certains d'entre eux cassent l'API, c'est pourquoi il existe un commutateur API entre deux modes API :
Vous pouvez basculer entre les deux modes en appelant
doc . advancedAPI ( doc => {
// your code
} ) ;
// or
doc . compatAPI ( doc => {
// your code
} ) ;JsPDF reviendra automatiquement au mode API d'origine après l'exécution du rappel.
Veuillez vérifier si votre question est déjà traitée sur Stackoverflow https://stackoverflow.com/questions/tagged/jspdf. N'hésitez pas à y poser une question avec le tag jspdf .
Les demandes de fonctionnalités, les rapports de bogues, etc. sont les bienvenus en tant que problèmes. Notez que les rapports de bogues doivent suivre ces directives :
jsPDF ne peut pas vivre sans l'aide de la communauté ! Si vous pensez qu'une fonctionnalité manque ou si vous avez trouvé un bug, réfléchissez si vous pouvez consacrer une ou deux heures et préparez une pull request. Si vous êtes simplement intéressé par ce projet et souhaitez aider, jetez un œil aux problèmes ouverts, en particulier ceux étiquetés « bug ».
Vous pouvez trouver des informations sur la création et le test de jsPDF dans le guide de contribution
Copyright (c) 2010-2021 James Hall, https://github.com/MrRio/jsPDF (c) 2015-2021 yWorks GmbH, https://www.yworks.com/
L'autorisation est accordée par la présente, gratuitement, à toute personne obtenant une copie de ce logiciel et des fichiers de documentation associés (le « Logiciel »), d'utiliser le Logiciel sans restriction, y compris, sans limitation, les droits d'utilisation, de copie, de modification, de fusion. , publier, distribuer, accorder des sous-licences et/ou vendre des copies du Logiciel, et permettre aux personnes à qui le Logiciel est fourni de le faire, sous réserve des conditions suivantes :
L'avis de droit d'auteur ci-dessus et cet avis d'autorisation doivent être inclus dans toutes les copies ou parties substantielles du logiciel.
LE LOGICIEL EST FOURNI « TEL QUEL », SANS GARANTIE D'AUCUNE SORTE, EXPRESSE OU IMPLICITE, Y COMPRIS MAIS SANS LIMITATION LES GARANTIES DE QUALITÉ MARCHANDE, D'ADAPTATION À UN USAGE PARTICULIER ET DE NON-VIOLATION. EN AUCUN CAS LES AUTEURS OU LES TITULAIRES DES DROITS D'AUTEUR NE SERONT RESPONSABLES DE TOUTE RÉCLAMATION, DOMMAGES OU AUTRE RESPONSABILITÉ, QUE CE SOIT DANS UNE ACTION CONTRACTUELLE, DÉLIT OU AUTRE, DÉCOULANT DE, DE OU EN RELATION AVEC LE LOGICIEL OU L'UTILISATION OU D'AUTRES TRANSACTIONS DANS LE LOGICIEL.
