74 lines
2.4 KiB
Markdown
74 lines
2.4 KiB
Markdown
# 📄 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 | |