Erstellung von PDF-Dateien über die kostenlose JavaScript-API

Erste Schritte mit PDFMake

PDFMake ist unter npm verfügbar. Sie können es einfach herunterladen und auf Ihrem Computer installieren. Bitte verwenden Sie den folgenden Befehl für eine reibungslose Installation.

bower install pdfmake

Generieren Sie PDF-Dateien mit der JavaScript-Bibliothek

Die Open-Source-JavaScript-Bibliothek PDFMake macht es Softwareprogrammierern leicht, PDF-Dokumente in ihren eigenen Anwendungen mithilfe von JavaScript-Code zu generieren. Die Bibliothek bietet einen vollständigen Satz von Funktionen für die Arbeit mit PDF-Dateien, z. B. das Auswählen von Schriftarten mit Größe, Farbe und Formatierung, das Hinzufügen einer neuen Seite, das Einfügen von Spalten, das Hinzufügen und Anwenden von Stilen, das Einfügen von Tabellen, das Löschen unerwünschter Seiten und vieles mehr mehr.

Kopf- und Fußzeilen zur PDF-Datei hinzufügen

Kopf- und Fußzeilen sind sehr nützliche Teile von PDF-Dokumenten und können verwendet werden, um den Teil des Inhalts einzufügen, den Benutzer auf jeder Seite eines Dokuments anzeigen möchten, wie z. B. Autorenname, Dokumenttitel, Seitenzahlen, Logo und vieles mehr. Die JavaScript-Bibliothek PDFMake bietet vollständige Unterstützung für das Hinzufügen und Ändern von Kopf- und Fußzeilen zu einem PDF-Dokument. Es unterstützt Funktionen wie das Hinzufügen von sich wiederholenden Kopf-/Fußzeilen, das Einfügen von Bildern in eine Kopf-/Fußzeile, das Hinzufügen von Seitenzahlen und vieles mehr.

 var docDefinition = {
 header: 'simple text',
 footer: {
  columns: [
   'Left part',
   { text: 'Right part', alignment: 'right' }
  ]
 },
 content: (...)
};

Einfügen von Bildern in PDF-Dateien

Die Open-Source-JavaScript-Bibliothek PDFMake bietet vollständige Unterstützung für das Hinzufügen und Ändern von Bildern in PDF-Dateien mithilfe von JavaScript-Befehlen. Die Bibliothek bietet Funktionen zum Einstellen der Bildbreite und -höhe, zum Einpassen eines Bilds in ein Rechteck, zum Aufrufen eines Bilds über URLs, zum proportionalen Skalieren des Bilds und zum Strecken von Bildern. Wenn Sie dasselbe Bild in mehreren Knoten verwenden möchten, müssen Sie es in das Bildwörterbuch einfügen und es einfach beim Namen nennen.

 var docDefinition = {
 content: [
  {
   // you'll most often use dataURI images on the browser side
   // if no width/height/fit is provided, the original size will be used
   image: 'data:image/jpeg;base64,...encodedContent...'
  },
  {
   // if you specify width, image will scale proportionally
   image: 'data:image/jpeg;base64,...encodedContent...',
   width: 150
  },
  {
   // if you specify both width and height - image will be stretched
   image: 'data:image/jpeg;base64,...encodedContent...',
   width: 150,
   height: 150
  },
  {
   // you can also fit the image inside a rectangle
   image: 'data:image/jpeg;base64,...encodedContent...',
   fit: [100, 100]
  },
  {
   // if you reuse the same image in multiple nodes,
   // you should put it to to images dictionary and reference it by name
   image: 'mySuperImage'
  },
  {
   image: 'myImageDictionary/image1.jpg'
  },
  {
   // in browser is supported loading images via url from reference by name in images
   image: 'snow'
  },
  {
   image: 'strawberries'
  },
 ],
 images: {
  mySuperImage: 'data:image/jpeg;base64,...content...',
  snow: 'https://picsum.photos/seed/picsum/200/300',
  strawberries: {
   url: 'https://picsum.photos/id/1080/367/267'
   headers: {
    myheader: '123',
    myotherheader: 'abc',
   }
  }
 }
};

Seitenausrichtung und Randunterstützung

Die kostenlose JavaScript-Bibliothek PDFMake bietet Unterstützung für das Festlegen der Seitengröße, der Seitenausrichtung sowie der Seitenränder in JavaScript-Apps. Um die Seitengröße festzulegen, müssen Sie die Breite und Höhe der neuen Seite angeben. Standardmäßig verwendet die Bibliothek die Seitenausrichtung im Hochformat, kann sie jedoch mit einem Einzeiler-Code problemlos auf Querformat einstellen. Es bietet auch Unterstützung für das Festlegen von Seitenrändern und ermöglicht Benutzern die dynamische Steuerung von Seitenumbrüchen. Es unterstützt linke, obere, rechte, untere sowie horizontale und vertikale Ränder.

 
var dd = {
	content: [
		{
			stack: [
				'This header has both top and bottom margins defined',
				{text: 'This is a subheader', style: 'subheader'},
			],
			style: 'header'
		},
		{
			text: [
				'Margins have slightly different behavior than other layout properties. They are not inherited, unlike anything else. They\'re applied only to those nodes which explicitly ',
				'set margin or style property.\n',
			]
		},
		{
			text: 'This paragraph (consisting of a single line) directly sets top and bottom margin to 20',
			margin: [0, 20],
		},
		{
			stack: [
				{text: [
						'This line begins a stack of paragraphs. The whole stack uses a ',
						{text: 'superMargin', italics: true},
						' style (with margin and fontSize properties).',
					]
				},
				{text: ['When you look at the', {text: ' document definition', italics: true}, ', you will notice that fontSize is inherited by all paragraphs inside the stack.']},
				'Margin however is only applied once (to the whole stack).'
			],
			style: 'superMargin'
		},
	],
	styles: {
		header: {
			fontSize: 18,
			bold: true,
			alignment: 'right',
			margin: [0, 190, 0, 80]
		},
		subheader: {
			fontSize: 14
		},
		superMargin: {
			margin: [20, 0, 40, 0],
			fontSize: 15
		}
	}
}

Tabellen über JavaScript in PDF einfügen

Die Open-Source-Bibliothek PDFMake ermöglicht Computerprogrammierern das Einfügen und Aktualisieren von Tabellen in PDF-Dateien. Die Bibliothek unterstützt verschiedene erweiterte Funktionen zum Umgang mit den Zeilen, Spalten und Zellen der Tabelle. Es bietet Unterstützung für die Tabellenausrichtung, das Gestalten von Tabellenrahmen, das Definieren von Breiten in Prozent, das Drehen von Tabellen, das Definieren von Tabellenkopfzeilen auf einer neuen Seite und vieles mehr.

 var docDefinition = {
 content: [
  {
   layout: 'lightHorizontalLines', // optional
   table: {
    // headers are automatically repeated if the table spans over multiple pages
    // you can declare how many rows should be treated as headers
    headerRows: 1,
    widths: [ '*', 'auto', 100, '*' ],
    body: [
     [ 'First', 'Second', 'Third', 'The last one' ],
     [ 'Value 1', 'Value 2', 'Value 3', 'Value 4' ],
     [ { text: 'Bold value', bold: true }, 'Val 2', 'Val 3', 'Val 4' ]
    ]
   }
  }
 ]
};
pdfMake.createPdf(docDefinition, tableLayouts, fonts, vfs)
// tableLayouts, fonts and vfs are all optional - falsy values will cause