PDF Maker ist eine Bibliothek zum Generieren von PDF-Dokumenten in JavaScript.
Dieses Projekt ist von pdfmake inspiriert und baut auf pdf-lib und Fontkit auf. Ohne die großartige Arbeit und das fundierte Wissen der Autoren dieser Projekte würde es nicht existieren.
Die Funktion makePdf() erstellt PDF-Daten aus einer bestimmten Dokumentdefinition . Diese Definition ist ein einfaches Objekt.
Die wichtigste Eigenschaft in der Definition ist der benannte content . Diese Eigenschaft akzeptiert eine Liste von Blöcken . Es gibt verschiedene Arten von Blöcken, wie zum Beispiel Textblöcke, Bildblöcke, Spalten- und Zeilenlayoutblöcke.
const fontData = await readFile ( 'Roboto-Regular.ttf' ) ;
const fontDataItalic = await readFile ( 'Roboto-Italic.ttf' ) ;
const pdfData = await makePdf ( {
// Fonts must be registered (see below)
fonts : {
Roboto : [ { data : fontData } , { data : fontDataItalic , italic : true } ] ,
} ,
// Content as an array of blocks
content : [
// Blocks can contain text and text properties
{ text : 'Lorem ipsum' , fontStyle : 'italic' , textAlign : 'center' , fontSize : 24 } ,
// Text can also be an array of text spans with different properties
{
text : [
'dolor sit amet, consectetur adipiscing elit ' ,
{ text : 'sed do eiusmod' , fontStyle : 'italic' } ,
' tempor, incididunt ut labore et dolore magna aliqua.' ,
] ,
} ,
] ,
} ) ;
await writeFile ( `hello.pdf` , pdfData ) ;Weitere Beispiele finden Sie im Ordner „examples/“.
Alle Schriftarten sind in das PDF eingebettet und müssen mit der Eigenschaft fonts registriert werden. Schriftartdaten werden im .ttf oder .otf Format als ArrayBuffer oder Uint8Array akzeptiert. Jede Schriftfamilie kann verschiedene Varianten enthalten, die anhand der Eigenschaften bold und italic ausgewählt werden. Die zuerst registrierte Schriftfamilie wird zur Standardfamilie.
const documentDefinition = {
fonts : {
'DejaVu-Sans' : [
// Different font versions for fontFamily "DejaVu-Sans"
// TTF / OTF font data as ArrayBuffer or Uin8Array
{ data : fontDataDejaVuSansNormal } ,
{ data : fontDataDejaVuSansBold , bold : true } ,
{ data : fontDataDejaVuSansItalic , italic : true } ,
{ data : fontDataDejaVuSansBoldItalic , bold : true , italic : true } ,
] ,
Roboto : [
// Different font versions for fontFamily "Roboto"
{ data : fontDataRobotoNormal } ,
{ data : fontDataRobotoMedium , bold : true } ,
] ,
} ,
content : [
{ text : 'lorem ipsum' , fontFamily : 'Roboto' , fontWeight : 'bold' } , // will use Roboto Medium
{ text : 'dolor sit amet' } , // will use DejaVu-Sans (the font registered first), normal
] ,
} ; JPG- und PNG-Bilder werden unterstützt. Bei mehrmaliger Verwendung desselben Bildes sind die Bilddaten nur einmal im PDF enthalten. Die Größe eines Bildes kann mithilfe der Eigenschaften width und height eingeschränkt werden.
// An image block
{ image : 'images/logo.png' , width : 200 , height : 100 } , Um Blöcke horizontal anzuordnen, können sie mit einer columns in einen Block eingefügt werden. Wenn Spalten über eine width verfügen, wird diese berücksichtigt. Der verbleibende Platz wird gleichmäßig auf alle Spalten verteilt.
{
columns : [
{ text : 'Column 1' , width : 100 } , // 100 pt wide
{ text : 'Column 2' } , // gets half of the remaining width
{ text : 'Column 3' } , // gets half of the remaining width
] ,
}Ein Zeilenlayout kann verwendet werden, um mehrere Zeilen in einem einzigen Block zu gruppieren, z. B. um gemeinsame Eigenschaften anzuwenden oder um Zeilen in ein umgebendes Spaltenlayout einzuschließen.
{
rows : [
{ text : 'Row 1' } ,
{ text : 'Row 2' } ,
{ text : 'Row 3' } ,
] ,
textAlign : 'right' ,
} Jeder Block kann eine graphics haben, die eine Liste von Formen akzeptiert, die in diesen Block gezeichnet werden sollen, oder eine Funktion, die eine Liste von Formen zurückgibt. Die Funktion wird mit der Breite und Höhe des Blocks aufgerufen. Damit können Formen gezeichnet werden, die von der Blockgröße abhängen.
Formen können Linien, Rechtecke, Kreise oder SVG-Pfade sein. Im folgenden Beispiel wird eine Grafikeigenschaft verwendet, um einen gelben Hintergrund hinter dem Text und einen blauen Rand am linken Rand zu zeichnen.
{
text : 'Lorem ipsum' ,
graphics : ( { width , height } ) => [
{ type : 'rect' , x : 0 , y : 0 , width , height , fillColor : 'yellow' } ,
{ type : 'line' , x1 : 0 , y1 : 0 , x2 : 0 , y2 : height , lineColor : 'blue' , lineWidth : 2 } ,
] ,
padding : { left : 5 } ,
}Siehe auch das Grafikbeispiel.
Die Eigenschaft margin kann verwendet werden, um Platz um Blöcke herum hinzuzufügen. Es akzeptiert entweder einen einzelnen Wert (gilt für alle vier Kanten) oder ein Objekt mit einer der Eigenschaften top , right , bottom , left , x und y . Die Eigenschaften x und y können als Abkürzungen verwendet werden, um gleichzeitig left und right oder top und bottom festzulegen. Werte können als Zahlen (in pt) oder als Strings mit einer Einheit angegeben werden. Wenn eine Zeichenfolge angegeben wird, muss sie eine der Einheiten pt , in , mm oder cm enthalten;
{
margin : { x : 5 , top : 10 } ,
content : [
{ text : 'Lorem ipsum' } ,
{ text : 'dolor sit amet' } ,
] ,
} Die top und bottom Ränder benachbarter Blöcke werden zu einem einzigen Rand zusammengefasst, dessen Größe dem Maximum der beiden Ränder entspricht. Spaltenränder werden nicht reduziert.
Die padding Eigenschaft kann verwendet werden, um Platz zwischen dem Inhalt und den Rändern von Blöcken hinzuzufügen.
Mit der pageSize Eigenschaft der obersten Ebene kann die Seitengröße festgelegt werden. Es werden verschiedene Standardgrößen unterstützt, z. B. A4 , Letter und Legal . Der Standardwert ist A4. Eine benutzerdefinierte Seitengröße kann als Objekt mit den Eigenschaften width und height angegeben werden. Werte können als Zahlen (in pt) oder als Strings mit einer Einheit angegeben werden.
{
pageSize : { width : '20cm' , height : '20cm' }
} Mit der Eigenschaft pageOrientation kann die Seitenausrichtung festgelegt werden. Der Wert kann entweder portrait oder landscape sein. Die Standardeinstellung ist Hochformat.
{
pageSize : 'A5' ,
pageOrientation : 'landscape' ,
content : [
{ text : 'Lorem ipsum' } ,
{ text : 'dolor sit amet' } ,
] ,
} Kopf- und Fußzeilen, die sich auf jeder Seite wiederholen, können mithilfe der optionalen header und footer definiert werden. Beide akzeptieren entweder einen einzelnen Block oder eine Funktion, die einen Block zurückgibt. Die Funktion wird mit der Seitenzahl und der Gesamtseitenzahl aufgerufen. Die Seitenzahl beginnt bei 1.
{
footer : ( { pageNumber , pageCount } ) => ( {
text : `Page ${ pageNumber } of ${ pageCount } ` ,
textAlign : 'right' ,
margin : { x : '20mm' , bottom : '1cm' } ,
} ) ,
content : [
{ text : 'Lorem ipsum' } ,
{ text : 'dolor sit amet' } ,
] ,
} Seitenumbrüche werden automatisch eingefügt. Wenn ein Block nicht auf die aktuelle Seite passt, wird dem Dokument eine neue Seite hinzugefügt. Um einen Seitenumbruch vor oder nach einem Block einzufügen, legen Sie die Eigenschaft breakBefore oder breakAfter eines Blocks auf always fest. Um einen Seitenumbruch zu verhindern, legen Sie diese Eigenschaft auf avoid fest.
Auch zwischen den Zeilen eines Textblocks werden automatisch Seitenumbrüche eingefügt. Um einen Seitenumbruch innerhalb eines Textblocks zu verhindern, legen Sie die Eigenschaft breakInside auf avoid fest.
{
content : [
{ text : 'Lorem ipsum' } ,
{ text : 'This text will go on a new page' , breakBefore : 'always' } ,
] ,
} Obwohl es noch keine generierte Dokumentation gibt, können Sie im API-Ordner nach einer Spezifikation aller unterstützten Eigenschaften in einer Dokumentdefinition suchen.
Schauen Sie sich auch die Beispiele im Ordner „examples/“ an.
MIT
