V1.0
This commit is contained in:
224
README.md
Normal file
224
README.md
Normal file
@@ -0,0 +1,224 @@
|
||||
# PDF Unterschrift System
|
||||
|
||||
Ein Zwei-Seiten-System für digitale PDF-Unterschriften mit Echtzeit-Synchronisation.
|
||||
|
||||
## 🎯 Funktionen
|
||||
|
||||
- **Master-Seite (PC)**: PDF hochladen und unterschriebene PDF herunterladen
|
||||
- **Signatur-Seite (Tablet/Smartphone)**: Permanent offen, zeigt automatisch jede neue PDF mit Vorschau
|
||||
- **PDF-Vorschau**: Echte PDF-Anzeige auf beiden Seiten mit pdf.js
|
||||
- **Verschiebbare Unterschrift**: Unterschrift per Drag & Drop positionieren
|
||||
- **Skalierbare Unterschrift**: Größe der Unterschrift anpassen
|
||||
- **Automatische Synchronisation**: Keine Session-IDs, keine QR-Codes nötig
|
||||
- **Echtzeit-Übertragung**: WebSocket-basierte direkte Kommunikation
|
||||
- **Mehrfachnutzung**: Signatur-Seite einmal öffnen, beliebig viele PDFs unterschreiben
|
||||
|
||||
## 📋 Voraussetzungen
|
||||
|
||||
- Node.js (Version 14 oder höher)
|
||||
- Ein moderner Webbrowser (Chrome, Firefox, Safari, Edge)
|
||||
|
||||
## 🚀 Installation & Start
|
||||
|
||||
### 1. Dependencies installieren
|
||||
|
||||
```bash
|
||||
npm install
|
||||
```
|
||||
|
||||
### 2. Server starten
|
||||
|
||||
```bash
|
||||
npm start
|
||||
```
|
||||
|
||||
oder
|
||||
|
||||
```bash
|
||||
node server.js
|
||||
```
|
||||
|
||||
Der Server läuft nun auf `http://localhost:8080`
|
||||
|
||||
## 💻 Verwendung
|
||||
|
||||
### Schritt 1: Signatur-Seite öffnen und offen lassen (Tablet/Smartphone)
|
||||
|
||||
1. Öffne im Browser: `http://localhost:8080/signature.html`
|
||||
2. **WICHTIG**: Lasse diese Seite permanent geöffnet!
|
||||
3. Die Seite zeigt "Warte auf PDF..." - das ist normal
|
||||
|
||||
### Schritt 2: Master-Seite öffnen (PC)
|
||||
|
||||
1. Öffne im Browser: `http://localhost:8080/master.html`
|
||||
2. Klicke auf "PDF auswählen" und wähle eine PDF-Datei aus
|
||||
|
||||
### Schritt 3: Automatische Anzeige
|
||||
|
||||
1. Die PDF wird **automatisch** auf der Signatur-Seite angezeigt
|
||||
2. Du siehst eine **echte Vorschau** des PDFs
|
||||
3. Keine QR-Codes, keine Links - alles passiert automatisch!
|
||||
|
||||
### Schritt 4: Unterschreiben
|
||||
|
||||
1. Auf der Signatur-Seite: Zeichne deine Unterschrift
|
||||
2. Klicke auf "Unterschrift senden"
|
||||
3. Die Unterschrift erscheint automatisch auf der Master-Seite
|
||||
|
||||
### Schritt 5: Unterschrift positionieren
|
||||
|
||||
1. Auf der Master-Seite: Die Unterschrift erscheint als **verschiebbare Box** über dem PDF
|
||||
2. **Ziehe** die Unterschrift an die gewünschte Position
|
||||
3. **Skaliere** die Unterschrift mit dem Griff rechts unten
|
||||
4. **Optional**: Entferne die Unterschrift mit dem × falls nötig (zum Neuzeichnen)
|
||||
5. **Klicke auf "Unterschrift platzieren & PDF erstellen"**
|
||||
6. Die Unterschrift wird ins PDF eingefügt und die finale Version wird angezeigt
|
||||
|
||||
### Schritt 6: PDF herunterladen
|
||||
|
||||
- Auf der Master-Seite: Klicke "Unterschriebene PDF herunterladen"
|
||||
- Die PDF wird mit der Unterschrift an der gewählten Position gespeichert
|
||||
|
||||
### Für die nächste PDF:
|
||||
|
||||
- Lade einfach eine neue PDF auf der Master-Seite hoch
|
||||
- Sie wird automatisch auf der (noch offenen) Signatur-Seite angezeigt
|
||||
- Unterschreiben → Positionieren → Platzieren → Download
|
||||
- **Keine neue Session nötig!**
|
||||
|
||||
## 🌐 Netzwerk-Zugriff
|
||||
|
||||
### Für lokale Nutzung:
|
||||
- Alle Geräte müssen im selben Netzwerk sein
|
||||
- Verwende die IP-Adresse deines PCs statt `localhost`
|
||||
|
||||
### IP-Adresse finden:
|
||||
|
||||
**Windows:**
|
||||
```bash
|
||||
ipconfig
|
||||
```
|
||||
(Suche nach "IPv4-Adresse")
|
||||
|
||||
**Mac/Linux:**
|
||||
```bash
|
||||
ifconfig
|
||||
```
|
||||
oder
|
||||
```bash
|
||||
ip addr show
|
||||
```
|
||||
|
||||
Dann verwende: `http://[DEINE-IP]:8080/master.html`
|
||||
|
||||
## 📁 Dateien
|
||||
|
||||
```
|
||||
pdf-signature-system/
|
||||
├── master.html # Master-Seite (PDF hochladen)
|
||||
├── signature.html # Signatur-Seite (unterschreiben)
|
||||
├── server.js # WebSocket Server
|
||||
├── package.json # Node.js Dependencies
|
||||
└── README.md # Diese Datei
|
||||
```
|
||||
|
||||
## 🔧 Technische Details
|
||||
|
||||
### Verwendete Technologien:
|
||||
- **Frontend**: HTML5, CSS3, JavaScript
|
||||
- **PDF-Vorschau**: PDF.js (Mozilla)
|
||||
- **PDF-Verarbeitung**: PDF-Lib (Client-seitig)
|
||||
- **Kommunikation**: WebSockets
|
||||
- **Server**: Node.js mit `ws` Package
|
||||
- **Interaktivität**: Drag & Drop, Resize Handles
|
||||
|
||||
### Architektur:
|
||||
1. Signatur-Seite öffnen und permanent offen lassen
|
||||
2. Master-Seite lädt PDF hoch
|
||||
3. WebSocket-Server leitet PDF direkt an Signatur-Seite weiter
|
||||
4. Unterschrift wird über WebSocket zurück an Master gesendet
|
||||
5. Master-Seite fügt Unterschrift ins PDF ein
|
||||
6. Für nächste PDF: Einfach neue PDF hochladen - alles andere bleibt wie es ist!
|
||||
|
||||
## 🛠️ Anpassungen
|
||||
|
||||
### Standard-Position der Unterschrift ändern:
|
||||
|
||||
In `master.html`, Zeile ~20:
|
||||
```javascript
|
||||
let signaturePos = { x: 0.7, y: 0.1 }; // x: 0-1 (links-rechts), y: 0-1 (oben-unten)
|
||||
```
|
||||
|
||||
### Standard-Größe der Unterschrift ändern:
|
||||
|
||||
Zeile ~21:
|
||||
```javascript
|
||||
let signatureScale = 0.3; // 0.3 = 30% der PDF-Breite
|
||||
```
|
||||
|
||||
### Port ändern:
|
||||
|
||||
In `server.js`, Zeile ~158:
|
||||
```javascript
|
||||
const PORT = 8080; // Ändere auf gewünschten Port
|
||||
```
|
||||
|
||||
Dann auch in beiden HTML-Dateien die WebSocket-URL anpassen.
|
||||
|
||||
## ❗ Troubleshooting
|
||||
|
||||
### "WebSocket Verbindung fehlgeschlagen"
|
||||
- Stelle sicher, dass der Server läuft
|
||||
- Prüfe ob Port 8080 verfügbar ist
|
||||
- Bei Firewall: Erlaube Port 8080
|
||||
|
||||
### "Warte auf PDF..." bleibt stehen
|
||||
- Stelle sicher, dass beide Seiten mit dem Server verbunden sind
|
||||
- Prüfe Browser-Konsole auf Fehlermeldungen
|
||||
- Server neustarten und beide Seiten neu laden
|
||||
|
||||
### PDF-Vorschau wird nicht angezeigt
|
||||
- Stelle sicher, dass pdf.js korrekt geladen wurde (siehe Browser-Konsole)
|
||||
- Versuche eine andere PDF-Datei
|
||||
- Browser-Cache leeren und Seite neu laden
|
||||
|
||||
### Unterschrift lässt sich nicht verschieben
|
||||
- Stelle sicher, dass die Unterschrift vollständig geladen ist
|
||||
- Klicke direkt auf die Unterschrift (nicht auf die Griffe)
|
||||
- Browser neu laden
|
||||
|
||||
### Unterschrift wird nicht angezeigt
|
||||
- Prüfe Browser-Konsole auf Fehlermeldungen
|
||||
- Stelle sicher, dass beide Seiten verbunden sind
|
||||
- Server neustarten
|
||||
|
||||
### PDF-Download funktioniert nicht
|
||||
- Warte bis Status "Unterschrift erhalten" angezeigt wird
|
||||
- Prüfe ob PDF-Lib korrekt geladen wurde
|
||||
- Browser-Cache leeren
|
||||
|
||||
## 🔒 Sicherheitshinweise
|
||||
|
||||
⚠️ **Wichtig**: Dieses System ist für den lokalen Gebrauch gedacht!
|
||||
|
||||
Für den Produktiveinsatz beachten:
|
||||
- HTTPS verwenden (WSS statt WS)
|
||||
- Authentifizierung implementieren
|
||||
- Session-Timeouts einrichten
|
||||
- Input-Validierung verstärken
|
||||
- Rate-Limiting hinzufügen
|
||||
|
||||
## 📝 Lizenz
|
||||
|
||||
MIT License - Frei verwendbar für private und kommerzielle Zwecke
|
||||
|
||||
## 🤝 Support
|
||||
|
||||
Bei Fragen oder Problemen:
|
||||
1. Prüfe die Konsole (F12 in Browser)
|
||||
2. Stelle sicher, dass Node.js installiert ist
|
||||
3. Verifiziere Netzwerk-Verbindung zwischen Geräten
|
||||
|
||||
---
|
||||
|
||||
Viel Erfolg mit dem PDF Unterschrift System! ✍️📄
|
||||
Reference in New Issue
Block a user