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

npm install

2. Server starten

npm start

oder

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:

ipconfig

(Suche nach "IPv4-Adresse")

Mac/Linux:

ifconfig

oder

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:

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:

let signatureScale = 0.3;  // 0.3 = 30% der PDF-Breite

Port ändern:

In server.js, Zeile ~158:

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! ✍️📄