jsPDF
v2.5.2
Eine Bibliothek zum Generieren von PDFs in JavaScript.
Sie können mich auf Twitter erreichen: @MrRio oder zur Beratung auf die Website meines Unternehmens gehen.
jsPDF wird jetzt von yWorks mitverwaltet – den Diagrammexperten.
Empfohlen: Holen Sie sich jsPDF von npm:
npm install jspdf --save
# or
yarn add jspdfAlternativ können Sie es auch von einem CDN laden:
< script src =" https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.2/jspdf.umd.min.js " > </ script >Oder holen Sie sich immer die neueste Version über unpkg
< script src =" https://unpkg.com/jspdf@latest/dist/jspdf.umd.min.js " > </ script > Der dist -Ordner dieses Pakets enthält verschiedene Arten von Dateien:
core-js , die umd-Variante ist eigenständig.Normalerweise ist es nicht notwendig, die genaue Datei in der Importanweisung anzugeben. Build-Tools oder Node ermitteln automatisch die richtige Datei, daher reicht der Import von „jspdf“.
Dann können Sie mit der Erstellung Ihres Dokuments beginnen:
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" ) ;Wenn Sie das Papierformat, die Ausrichtung oder die Einheiten ändern möchten, können Sie Folgendes tun:
// 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" ) ; Einige Funktionen von jsPDF erfordern optionale Abhängigkeiten. Zum Beispiel die html -Methode, die von html2canvas abhängt und, wenn sie mit einem HTML-Dokument als Zeichenfolge bereitgestellt wird, dompurify . JsPDF lädt sie bei Bedarf dynamisch (unter Verwendung des jeweiligen Modulformats, z. B. dynamische Importe). Build-Tools wie Webpack erstellen automatisch separate Blöcke für jede der optionalen Abhängigkeiten. Wenn Ihre Anwendung keine der optionalen Abhängigkeiten verwendet, können Sie verhindern, dass Webpack die Blöcke generiert, indem Sie sie als externe Abhängigkeiten definieren:
// webpack.config.js
module . exports = {
// ...
externals : {
// only define the dependencies you are NOT using as externals!
canvg : "canvg" ,
html2canvas : "html2canvas" ,
dompurify : "dompurify"
}
} ; In Vue CLI- Projekten können externe Elemente über die Eigenschaften configureWebpack oder chainWebpack der Datei vue.config.js definiert werden (muss in neuen Projekten zuerst erstellt werden).
In Angular -Projekten können Externals mithilfe benutzerdefinierter Webpack-Builder definiert werden.
In React- Projekten ( create-react-app ) können Externals entweder durch React-App-Rewired oder Ejecting definiert werden.
jsPDF kann wie jede andere Bibliothek eines Drittanbieters importiert werden. Dies funktioniert mit allen gängigen Toolkits und Frameworks. jsPDF bietet auch eine Typisierungsdatei für TypeScript-Projekte.
import { jsPDF } from "jspdf" ;Sie können jsPDF wie folgt zu Ihrem Meteor-Projekt hinzufügen:
meteor add jspdf:core
jsPDF benötigt moderne Browser-APIs, um zu funktionieren. Um jsPDF in älteren Browsern wie dem Internet Explorer verwenden zu können, sind Polyfills erforderlich. Sie können alle erforderlichen Polyfills wie folgt laden:
import "jspdf/dist/polyfills.es.js" ;Alternativ können Sie die vorgebündelte Polyfill-Datei laden. Dies wird nicht empfohlen, da Sie Polyfills möglicherweise mehrmals laden müssen. Könnte für kleine Anwendungen oder schnelle POCs immer noch nützlich sein.
< script src =" https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.2/polyfills.umd.js " > </ script > Die 14 Standardschriftarten in PDF sind auf die ASCII-Codepage beschränkt. Wenn Sie UTF-8 verwenden möchten, müssen Sie eine benutzerdefinierte Schriftart integrieren, die die benötigten Glyphen bereitstellt. jsPDF unterstützt .ttf-Dateien. Wenn Sie also beispielsweise chinesischen Text in Ihrem PDF haben möchten, muss Ihre Schriftart über die erforderlichen chinesischen Glyphen verfügen. Überprüfen Sie daher, ob Ihre Schriftart die gewünschten Glyphen unterstützt. Andernfalls werden verstümmelte Zeichen anstelle des richtigen Textes angezeigt.
Um die Schriftart zu jsPDF hinzuzufügen, verwenden Sie unseren Fontconverter in /fontconverter/fontconverter.html. Der Fontconverter erstellt eine js-Datei mit dem Inhalt der bereitgestellten ttf-Datei als Base64-codierten String und zusätzlichem Code für jsPDF. Sie müssen nur diese generierte js-Datei zu Ihrem Projekt hinzufügen. Anschließend können Sie die setFont-Methode in Ihrem Code verwenden und Ihren UTF-8-codierten Text schreiben.
Alternativ können Sie einfach den Inhalt der *.ttf-Datei als Binärzeichenfolge mit fetch oder XMLHttpRequest laden und die Schriftart zur PDF-Datei hinzufügen:
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" ) ; Seit der Fusion mit dem yWorks-Fork gibt es viele neue Funktionen. Einige von ihnen sind jedoch API-kaputt, weshalb es einen API-Schalter zwischen zwei API-Modi gibt:
Sie können per Anruf zwischen den beiden Modi wechseln
doc . advancedAPI ( doc => {
// your code
} ) ;
// or
doc . compatAPI ( doc => {
// your code
} ) ;JsPDF wechselt automatisch zurück in den ursprünglichen API-Modus, nachdem der Rückruf ausgeführt wurde.
Bitte überprüfen Sie, ob Ihre Frage bereits bei Stackoverflow https://stackoverflow.com/questions/tagged/jspdf behandelt wird. Stellen Sie dort gerne eine Frage mit dem Tag jspdf .
Funktionswünsche, Fehlerberichte etc. sind als Issues sehr willkommen. Beachten Sie, dass Fehlerberichte diesen Richtlinien folgen sollten:
jsPDF kann ohne die Hilfe der Community nicht leben! Wenn Sie der Meinung sind, dass eine Funktion fehlt oder Sie einen Fehler gefunden haben, überlegen Sie bitte, ob Sie ein oder zwei Stunden Zeit haben und einen Pull-Request vorbereiten. Wenn Sie einfach an diesem Projekt interessiert sind und helfen möchten, werfen Sie einen Blick auf die offenen Probleme, insbesondere auf die mit „Fehler“ gekennzeichneten.
Informationen zum Erstellen und Testen von jsPDF finden Sie im Beitragsleitfaden
Copyright (c) 2010-2021 James Hall, https://github.com/MrRio/jsPDF (c) 2015-2021 yWorks GmbH, https://www.yworks.com/
Hiermit wird jeder Person, die eine Kopie dieser Software und der zugehörigen Dokumentationsdateien (die „Software“) erhält, kostenlos die Erlaubnis erteilt, mit der Software ohne Einschränkung zu handeln, einschließlich und ohne Einschränkung der Rechte zur Nutzung, zum Kopieren, Ändern und Zusammenführen , Kopien der Software zu veröffentlichen, zu verteilen, unterzulizenzieren und/oder zu verkaufen und Personen, denen die Software zur Verfügung gestellt wird, dies zu gestatten, vorbehaltlich der folgenden Bedingungen:
Der obige Urheberrechtshinweis und dieser Genehmigungshinweis müssen in allen Kopien oder wesentlichen Teilen der Software enthalten sein.
DIE SOFTWARE WIRD „WIE BESEHEN“ ZUR VERFÜGUNG GESTELLT, OHNE JEGLICHE AUSDRÜCKLICHE ODER STILLSCHWEIGENDE GEWÄHRLEISTUNG, EINSCHLIESSLICH, ABER NICHT BESCHRÄNKT AUF DIE GEWÄHRLEISTUNG DER MARKTGÄNGIGKEIT, EIGNUNG FÜR EINEN BESTIMMTEN ZWECK UND NICHTVERLETZUNG. IN KEINEM FALL SIND DIE AUTOREN ODER URHEBERRECHTSINHABER HAFTBAR FÜR JEGLICHE ANSPRÜCHE, SCHÄDEN ODER ANDERE HAFTUNG, WEDER AUS EINER VERTRAGLICHEN HANDLUNG, AUS HANDLUNG ODER ANDERWEITIG, DIE SICH AUS, AUS ODER IN ZUSAMMENHANG MIT DER SOFTWARE ODER DER NUTZUNG ODER ANDEREN HANDELN IN DER SOFTWARE ERGEBEN SOFTWARE.
