EnvelopeGenerator/EnvelopeGenerator.Web/wwwroot/README.md

📄 PSPDFKit-Integration – Vanilla JavaScript

Dieses Projekt zeigt, wie die PDF-Anzeige- und Signaturbibliothek PSPDFKit mithilfe von Vanilla JavaScript integriert werden kann.

🚀 Verwendungszweck

PSPDFKit wurde in der Webanwendung verwendet, um PDF-Dokumente:

• anzuzeigen,
• zu signieren,
• mit Anmerkungen zu versehen,
• Formularfelder auszufüllen.

Benutzer können Dokumente direkt über den Browser signieren und versenden.

---

🔧 Wo und wie wurde PSPDFKit verwendet?

1. PSPDFKit laden

PSPDFKit wurde mit der Funktion loadPSPDFKit in UI.js gestartet:

PSPDFKit.load({
  container: ‚#app‘,
  document: arrayBuffer,
  licenseKey: ‚YOUR_LICENSE_KEY‘,
  ...
})

2. Anmerkungen und Formularfelder

In annotation.js werden die folgenden Felder dynamisch zu PDF-Dokumenten hinzugefügt:

• Signaturfeld (SignatureFormField)
• Position (TextFormField)
• Stadt (TextFormField)
• Datum (TextFormField, wird automatisch mit dem heutigen Datum ausgefüllt)
• Bezeichnungen (Ort, Position, Date) – dies sind nur lesbare Textfelder.
• Rahmen für Signaturbild – wird dynamisch erstellt und platziert, wenn der Benutzer unterschreibt.

Die Felder werden entsprechend ihrer Position auf dem PDF berechnet und für jedes Feld wird eine eindeutige ID erstellt.

---

3. Anpassungen der Symbolleiste

In UI.js ist die Standard-Symbolleiste (toolbarItems) von PSPDFKit konfiguriert:

• Es werden nur zulässige Elemente (sidebar, zoom, pager, search usw.) angezeigt.
• Je nach Benutzerberechtigung (z. B. schreibgeschützt oder beschreibbar) werden die folgenden speziellen Schaltflächen dynamisch hinzugefügt:

Beschreibbarer Modus:

• Teilen (SHARE)
• Logout (LOGOUT)
• Zurücksetzen (RESET)
• Ablehnen (REJECT)
• Finalisieren (FINISH)

Nur-Lesemodus:

• Die Schaltfläche Teilen kopiert nur den Link in die Zwischenablage (COPY_URL)

Für mobile Geräte werden zusätzlich vereinfachte Schaltflächen angezeigt.

---

📁 Wichtige Dateien

Datei	Beschreibung
app.js	Hauptanwendungsklasse, Dokumentladen und -steuerung
ui.js	PSPDFKit-UI-Einrichtung und Symbolleistenverwaltung
annotation.js	Erstellen und Löschen von Anmerkungsfeldern