From b2c396c3b2a981cc5522380cbaf5093b9b94ff1a Mon Sep 17 00:00:00 2001 From: tekh Date: Wed, 6 Aug 2025 09:45:11 +0200 Subject: [PATCH] Add EnvelopeGenerator.Web/wwwroot/README.md --- EnvelopeGenerator.Web/wwwroot/README.md | 74 +++++++++++++++++++++++++ 1 file changed, 74 insertions(+) create mode 100644 EnvelopeGenerator.Web/wwwroot/README.md diff --git a/EnvelopeGenerator.Web/wwwroot/README.md b/EnvelopeGenerator.Web/wwwroot/README.md new file mode 100644 index 00000000..21471e4b --- /dev/null +++ b/EnvelopeGenerator.Web/wwwroot/README.md @@ -0,0 +1,74 @@ +# 📄 PSPDFKit-Integration – Vanilla JavaScript + +Dieses Projekt zeigt, wie die PDF-Anzeige- und Signaturbibliothek [PSPDFKit](https://pspdfkit.com/web/) 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: + +```js +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 | \ No newline at end of file