Generieren Sie PDF in ElectronJS

Electron ist ein beliebtes Framework zum Erstellen plattformübergreifender Desktop-Anwendungen mit JavaScript, HTML und CSS.

In diesem Artikel erfahren Sie, wie Sie mithilfe der jsPDF-Bibliothek PDF-Dateien in Electron generieren. Wir behandeln die Grundlagen der PDF-Generierung, wie Sie die jsPDF-Bibliothek installieren und verwenden und wie Sie das Erscheinungsbild und den Inhalt von PDFs anpassen.

PDF steht für Portable Document Format. PDF ist ein Dateiformat zur Darstellung von Dokumenten, das unabhängig vom Betriebssystem der Anwendung, der Software und der Hardware ist, mit denen das Dokument erstellt wurde. PDF-Dateien können auf jedem Gerät mit einem PDF-Reader geöffnet und angezeigt werden und werden häufig zum Teilen von Dokumenten und Daten verwendet.

PDF entwickelt von Adobe Systems.

PDF-Dateien können eine Vielzahl von Inhalten enthalten, darunter Text, Bilder, Tabellen und andere Daten, und können mithilfe von Funktionen wie Seitenlayout, Rändern, Kopf- und Fußzeilen angepasst werden.

Generieren Sie PDF-Dateien in Electron

Die

jsPDF-Bibliothek, ein beliebtes und benutzerfreundliches Framework zum Erstellen von PDF-Dateien in JavaScript, wird zum Erstellen von PDF-Dateien in Electron verwendet.

Führen Sie den folgenden Befehl in einem Terminalfenster aus, um die jsPDF-Bibliothek zu installieren -

npm install jspdf

Wir können diese Bibliothek nutzen, um PDF-Dateien zu generieren, indem wir sie nach der Installation in unserer Electron-Anwendung benötigen und mit der „jsPDF“-Funktion Object() { [nativer Code] } eine neue PDF-Datei erstellen.

Hier ist ein Beispiel dafür, wie man eine einfache PDF-Datei erstellt, die nur eine Textseite enthält -

const { jsPDF } = require("jspdf");
const doc_file = new jsPDF();
doc_file.text('Welcome Home!', 15, 15);
doc_file.save('demo_document.pdf');

Durch Ausführen dieses Codes wird ein neues PDF-Dokument erstellt, das Wort „Hello, World!“ zum Dokument hinzugefügt und das Dokument im aktuellen Verzeichnis als Datei mit dem Namen „document.pdf“ gespeichert.

Passen Sie das Erscheinungsbild und den Inhalt von PDFs an

Das

jsPDF-Paket bietet viele Optionen zum Ändern des Erscheinungsbilds von PDF. Wir können beispielsweise die Seitengröße, Ränder und Schriftarten des PDFs anpassen und Fotos und Tabellen hinzufügen.

Seitengröße

Um die Seitengröße festzulegen, können wir die Methode „setProperties“ verwenden, mit der wir die Seitengröße und Ausrichtung der PDF-Datei festlegen können -

const jsPDF = require('jspdf');
const doc_file = new jsPDF();
doc_file.setProperties({
   title: 'New Doc File',
   subject: 'Creating text document',
   author: 'Prerna Tiwari',
   keywords: 'text, document, PDF',
   creator: 'New Text'
});
doc_file.text('Welcome Home!', 10, 10);
doc_file.save('demo_document.pdf');

Marge

Um die Ränder einer PDF-Datei festzulegen, können wir die Methode „setMargins“ verwenden, mit der wir den oberen, unteren, linken und rechten Rand der PDF-Datei in Punkten (1/72 Zoll) angeben können -

const jsPDF = require('jspdf');
const doc_file = new jsPDF();
doc_file.setMargins(5, 5, 5, 5);
doc_file.text('Welcome Home!', 5, 5);
doc_file.save('demo_document.pdf');

Schriftart

Um die Schriftart einer PDF-Datei festzulegen, können wir die Methode „setFont“ verwenden, mit der wir die Schriftfamilie, -größe und -stil angeben können -

const jsPDF = require('jspdf');
const doc_file = new jsPDF();
doc_file.setFont('Times New Roman', 'Italics');
doc_file.text('Welcome Home!', 10, 10);
doc_file.save('demo_document.pdf');

Bild hinzufügen

Um ein Bild zu einer PDF-Datei hinzuzufügen, können wir die Methode „addImage“ verwenden, mit der wir die Bilddatei, den Speicherort und die Größe angeben können -

const jsPDF = require('jspdf');
const doc_file = new jsPDF();
doc_file.addImage(imageData, 'PNG', 15, 15, 150, 160);
doc_file.save('demo_document.pdf');

Dieser Code fügt ein JPEG-Bild an der angegebenen Position und Größe zu einer PDF-Datei hinzu.

Formular hinzufügen

Um eine Tabelle zu PDF hinzuzufügen, können wir die Methode „autoTable“ verwenden, die es uns ermöglicht, Tabellendaten, Spalten und Layoutoptionen anzugeben -

const jsPDF = require('jspdf');
const doc_file = new jsPDF();
const tableData = [
   ['Name', 'Age', 'City'],
   ['John', '30', 'New York'],
   ['Jane', '25', 'Chicago'],
   ['Bob', '35', 'Los Angeles'] 
];
doc_file.autoTable({
   head: [['Name', 'Age', 'City']],
   body: tableData
});
doc+_file.save('demo_document.pdf');

Dieser Code fügt dem PDF eine Tabelle mit dem angegebenen Titel und den angegebenen Daten hinzu.

Fazit

In diesem Tutorial haben wir uns angesehen, wie man mit dem jsPDF-Paket PDF-Dateien in Electron erstellt. Es werden die Grundlagen der PDF-Erstellung, Installation und Verwendung der jsPDF-Bibliothek sowie die Änderung des Erscheinungsbilds einer PDF-Datei behandelt.

Mit dem jsPDF-Modul können Sie ganz einfach PDF-Dateien in Electron erstellen und deren Aussehen und Inhalt an die Anforderungen Ihrer Anwendung anpassen. Für den Austausch von Dokumenten und Daten sind PDF-Dateien eine praktische und gut unterstützte Option, die in einer Vielzahl von Anwendungen eingesetzt werden kann.

Das obige ist der detaillierte Inhalt vonGenerieren Sie PDF in ElectronJS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!