4,070 Lesungen

Eine Anleitung zum Erstellen benutzerdefinierter Formularfelder mit dem Foxit PDF SDK for Web

von Foxit Software8m2023/11/17

Zu lang; Lesen

In diesem Tutorial erfahren Sie, wie Sie mithilfe der Foxit PDF Library for Web benutzerdefinierte Formularfelder in den PDF-Dokumenten Ihres Webbrowsers erstellen.

featured image - Eine Anleitung zum Erstellen benutzerdefinierter Formularfelder mit dem Foxit PDF SDK for Web

Das PDF-Format ist aus modernen Softwareprogrammen nicht mehr wegzudenken und dient als vielseitige Lösung für unterschiedliche Dokumenttypen. Für Unternehmen, die sichere, bearbeitbare und benutzerfreundliche PDFs suchen, ist Foxit eine wertvolle Wahl. Die PDF-SDK-Bibliotheken von Foxit bieten eine große Auswahl an Funktionen für verschiedene Branchen.

Insbesondere Webbrowser-basierte PDFs finden vielfältige Anwendungsmöglichkeiten im Dokumentenmanagement. Sie spielen in zahlreichen Bankensystemen eine zentrale Rolle und erleichtern Aufgaben wie die Erstellung monatlicher Kontoauszüge. Darüber hinaus ist die Compliance-Branche auf webbasierte PDFs zur sicheren Datenerfassung und -speicherung angewiesen.

Dieses Tutorial führt Sie durch die Nutzung des Foxit PDF SDK for Web, um benutzerdefinierte Formularfelder in Ihren Webbrowser-PDF-Dokumenten zu erstellen. Das zugehörige GitHub-Repository ermöglicht es Ihnen, die im Tutorial beschriebenen Schritte zu verfolgen und umzusetzen.

Was ist Foxit PDF SDK für Web?

Das Foxit PDF SDK for Web sticht unter den verschiedenen von Foxit angebotenen PDF SDKs als umfassende PDF-Bibliothek hervor, die die Vorteile der Rendering-Engine von Foxit nutzt. Mit diesem SDK können Sie einen umfassenden und vollständig anpassbaren PDF-Viewer nahtlos in Ihre Anwendungen integrieren.

Mit dem SDK von Foxit erstellte Web-PDFs ermöglichen Benutzern das mühelose Anzeigen, Ausfüllen, Kommentieren und Signieren von Dokumenten in verschiedenen Sprachen direkt über ihren Mobil- oder Desktop-Browser mithilfe von JavaScript. Das SDK ist mit allen gängigen Browsern kompatibel, einschließlich Firefox, Safari, Chrome und Opera.

Um die Funktionalität zu veranschaulichen, beginnen Sie mit der Erstellung eines neuen PDF-Projekts aus einer Vorlage und verwenden dabei das Foxit PDF SDK for Web, um die erforderliche Struktur bereitzustellen. Dieser praktische Ansatz bietet eine praktische Demonstration, wie das SDK die PDF-Funktionen in Ihren webbasierten Projekten verbessert.

Implementierung des Foxit PDF SDK für Web

Laden Sie das Foxit PDF SDK für das Web herunter . Die ZIP-Datei sollte das SDK, Dokumentation und Beispiele enthalten.

Sie können eine Vorschau dieser Beispiele anzeigen, indem Sie einen HTTP-Server aus dem entpackten Verzeichnis ausführen.

 # NPX available with NPM v5.2 or newer npx http-server

Richten Sie das Projekt ein

Dieses Tutorial verwendet Vite für Frontend-Tools. Es basiert auf ES-Modulen (ESM), ist schnell und enthält alles, was Sie für die Verwendung des SDK benötigen. Um ein neues Projekt aus einer Vorlage zu erstellen und den Entwicklungsserver zu starten, stellen Sie sicher, dass Sie über Node.js Version 12.2.0 oder höher verfügen, und führen Sie die folgenden Befehle aus:

 npm create vite@latest project -- --template vanilla cd project npm install npm run dev

Verschieben Sie das SDK in das erstellte Verzeichnis. Für den Rest dieses Tutorials wird davon ausgegangen, dass das SDK unter ./FoxitPDFSDKForWeb relativ zum übergeordneten Projektverzeichnis verfügbar ist.

Laden des PDFs

Sie benötigen einen PDF-Viewer mit hochgeladenem Dokument, um mit dem Experimentieren beginnen zu können. Um den PDF-Viewer zu initialisieren, erstellen Sie zunächst die HTML-Struktur und laden Sie das SDK.

 <!-- index.html --> <!-- ... --> <body> <div class="container"> <div id="viewer"></div> <div id="menu"></div> </div> <script src="./FoxitPDFSDKForWeb/lib/PDFViewCtrl.full.js"></script> <script type="module" src="/main.js"></script> </body> <!-- ... -->

Fügen Sie außerdem in style.css etwas CSS hinzu, um die Elemente zu formatieren:

 /* style.css */ html { height: 100%; }b ody { height: 100%; margin: 0; }. container { width: 100%; height: 100%; display: flex; }# viewer { height: 100%; flex: 1; overflow: auto; }# menu { width: 10rem; }. menu-element { background: #f1f5f9; padding: 1rem; display: flex; justify-content: center; align-items: center;font-family: monospace; margin: 0.5rem; }

Verwenden Sie in main.js das SDK, um eine Instanz des pdfViewer zu erstellen:

 import "./style.css"; const licenseSN = "..."; const licenseKey = "..."; const viewerContainer = document.getElementById("viewer"); const pdfViewer = new PDFViewCtrl.PDFViewer({ libPath: "./FoxitPDFSDKForWeb/lib", jr: { licenseSN, licenseKey, }, customs: { ScrollWrap: PDFViewCtrl.CustomScrollWrap.create(viewerContainer), }, });

Sie finden Ihre Werte für LicenseSN und LicenseKey in der Datei ./FoxitPDFSDKForWeb/examples/license-key.js .

Der pdfViewer wird erstellt, indem dem Konstruktor ein Konfigurationsobjekt bereitgestellt wird, das Folgendes enthält:

libPath: Der relative Pfad zum lib- Ordner des entpackten SDK-Pakets
jr: Konfigurationsoptionen für die JR-Engine, die vor allem Lizenzinformationen umfassen
customs.ScrollWrap: Eine benutzerdefinierte Komponente, die die PDF-Größe und das Scrollen steuert und durch ihre Einstellung den Viewer an den Container anpasst

Nachdem pdfViewer erstellt wurde, müssen Sie ihn nur noch initialisieren und das Dokument laden:

 // ... const loadPDF = async (url) => { const response = await fetch(url); const blob = await response.blob();return pdfViewer.openPDFByFile(blob); }; pdfViewer.init(viewerContainer); loadPDF("./FoxitPDFSDKForWeb/docs/FoxitPDFSDKforWeb_DemoGuide.pdf");

Das obige Snippet ruft die PDF-Datei als Blob ab und öffnet sie im Viewer mithilfe der Methode openPDFByFile() . Bei dem verwendeten PDF-Dokument handelt es sich um eine Demo-Anleitung aus der mitgelieferten Dokumentation des SDK.

Der zusätzliche Platz auf der rechten Seite dient als Menü für verschiebbare Formularfelder.

Benutzerdefinierte Formularfelder erstellen

Alles, was Sie zum Erstellen eines Formularfelds mit dem Foxit SDK benötigen, ist ein Viewer, die Metadaten des Formularfelds (z. B. Feldtyp oder Auswahloptionen) und die Position des Formularfelds. In diesem Beispiel erstellen Sie einen Satz vordefinierter Formularfelder mit fertigen Metadaten, die der Benutzer per Drag & Drop in den Viewer ziehen kann.

Metadaten definieren

Beginnen Sie mit der Definition der Metadaten für zulässige Felder sowie zusätzlicher Helfer:

 // ... const menuContainer = document.getElementById("menu"); const randomId = () => `_${Math.random().toString(36).substring(2, 9)}`; const FieldTypes = PDFViewCtrl.PDF.form.constant.Field_Type; const formFields = [ { label: "Push Button", name: "push-button", type: FieldTypes.PushButton, width: 50, height: 30, }, { label: "Checkbox", name: "checkbox", type: FieldTypes.CheckBox, width: 50,height: 30, }, { label: "Radio Button", name: "radio-button", type: FieldTypes.RadioButton, width: 80, height: 30, }, { label: "Combo Box", name: "combo-box", type: FieldTypes.ComboBox, width: 60, height: 30, }, { label: "List Box", name: "list-box", type: FieldTypes.ListBox, width: 60, height: 100, }, { label: "Text", name: "text", type: FieldTypes.Text, width: 60, height: 30, }, ]; const comboBoxOptions = [ { label: "10", value: "10", selected: true, defaultSelected: true }, { label: "20", value: "20", selected: false, defaultSelected: false }, { label: "30", value: "30", selected: false, defaultSelected: false }, { label: "40", value: "40", selected: false, defaultSelected: false }, ]; const listBoxOptions = comboBoxOptions;

Die Funktion randomId() generiert IDs zur Identifizierung von Formularfeldern im Dokument. FieldTypes ist eine Abkürzung für eine schnellere Referenz auf vordefinierte Feldtypen, die im SDK verfügbar sind. Jeder Formularfeldeintrag enthält:

Ein Etikett , um den Benutzer über seine Verwendung zu informieren
Ein Name zum Zuordnen gezogener Elemente zu den Metadateneinträgen
Ein Typ , der den Typ des Felds angibt
Eine Breite und height zur Berechnung des Positionsrechtecks innerhalb der PDF

Schließlich enthalten „comboBoxOptions“ und „listBoxOptions“ Beispieloptionen für Felder, bei denen Benutzer eines auswählen müssen.

Drag-and-Drop-Elemente erstellen

Wenn die Metadaten bereit sind, können Sie eine Funktion zur Handhabung der Drag-and-Drop-Logik sowie der Formularfeldplatzierung erstellen:

 // ... const loadFormFieldsMenu = async (PDFDoc) => { const PDFForm = await PDFDoc.loadPDFForm(); formFields.forEach((formField) => { const element = document.createElement("div"); element.draggable = true; element.id = formField.name; element.classList.add("menu-element"); element.textContent = formField.label; element.addEventListener("dragstart", (event) => { event.dataTransfer.setData("text/plain", event.target.id); }); menuContainer.append(element); }); };

Die Funktion akzeptiert PDFDoc – ein SDK-Objekt, das ein PDF-Dokument darstellt – als Argument. Es wird verwendet, um ein PDFForm- Objekt abzurufen, das zum Hinzufügen und Konfigurieren der Formularfelder verwendet wird, nachdem diese Felder in ziehbare Elemente verarbeitet und dem Seitenmenü hinzugefügt wurden.

Jedes Element verfügt über ein ziehbares Attribut, das auf „true“ gesetzt ist, um das Ziehen zu ermöglichen, sowie über eine ID , die dem eindeutigen Namen jedes Formularfelds entspricht, um sie mit den zugrunde liegenden Metadaten abzugleichen. Diese ID wird später im Dragstart- Ereignis-Listener verwendet, um sie während der Drag-and-Drop-Aktion zu übertragen.

Um den für die Funktion „loadFormFieldsMenu()“ erforderlichen PDFDoc- Parameter zu erhalten, müssen Sie das resultierende Versprechen der Funktion „loadPDF()“ erhalten, indem Sie es wie folgt ändern:

 // ... loadPDF("./FoxitPDFSDKForWeb/docs/FoxitPDFSDKforWeb_DemoGuide.pdf").then( (PDFDoc) => { loadFormFieldsMenu(PDFDoc); } );

Mit den erstellten Menüpunkten sieht die App nun so aus:

Implementierung der Drag & Drop-Funktionalität

Nachdem Sie die ziehbaren Elemente erstellt haben, ist es an der Zeit, die Drag-and-Drop-Funktionalität vollständig zu implementieren und das Erstellen von Formularfeldern im Viewer zu ermöglichen:

 // ... const loadFormFieldsMenu = async (PDFDoc) => { // ... viewerContainer.addEventListener("dragover", (event) => { event.preventDefault(); }); viewerContainer.addEventListener("drop", async (event) => { event.preventDefault(); const droppedFormFieldName = event.dataTransfer.getData("text/plain"); const formField = formFields.find( ({ name }) => name === droppedFormFieldName ); const pos = await pdfViewer.convertClientCoordToPDFCoord({ clientX: event.clientX, clientY: event.clientY, }); const id = randomId();await PDFForm.addControl(pos.index, id, formField.type, { left: pos.left - formField.width / 2, right: pos.left + formField.width / 2, top: pos.top + formField.height / 2, bottom: pos.top - formField.height / 2, }); const field = PDFForm.getField(id); if (formField.type === FieldTypes.ComboBox) { field.setOptions(comboBoxOptions); } else if (formField.type === FieldTypes.ListBox) { field.setOptions(listBoxOptions); } }); }; // ...

Im obigen Code leitet der Dragover- Ereignis-Listener die Interaktion weiter, die im Drop- Ereignis behandelt werden soll, indem er PreventDefault() aufruft.

Im Drop- Event-Handler werden zunächst die passenden Metadaten mithilfe der Daten des gezogenen Elements abgerufen. Anschließend wird die Mausposition aus dem Ereignis mithilfe der in der pdfViewer- Instanz verfügbaren Methode „convertClientCoordToPDFCoord()“ in PDF-Koordinaten umgewandelt.

Die Position, die Metadaten und die zufällig generierte ID werden im Methodenaufruf addControl() des zuvor in der Funktion erstellten PDFForm- Objekts verwendet. Die Methode akzeptiert die folgenden Argumente:

Der Index der Seite, auf der das Formularfeld platziert werden soll (abgerufen vom Aufruf „convertClientCoordToPDFCoord() “)
Die zufällig generierte ID für das neu erstellte Formularfeld
Der Typ des Formularfelds gemäß den bereitgestellten Konstanten (aus Metadaten abgerufen)
Das Argument, das die Platzierung des Formularfelds in Form eines Rechtecks definiert, das anhand von Breite und Höhe berechnet wird, damit die Maus den Mittelpunkt des Formularfelds koordiniert

Wenn das Feld schließlich eine Liste von Optionen akzeptiert, greift zunächst die getField()- Methode des PDFForm- Objekts unter Verwendung der ID darauf zu. Die Optionen werden mit der Methode setOptions() entsprechend gesetzt.

Die endgültige App sieht mit einigen bereits platzierten Formularfeldern so aus:

Abschluss

Das Hinzufügen von Funktionalität zu Ihren PDFs kann tatsächlich erhebliche Vorteile für Ihr Unternehmen und Ihre Benutzer bringen. Elektronische Updates und Signaturen sparen Zeit, Geld und Aufwand, während individuelle und sichere Dokumente das Vertrauen in Ihr Unternehmen stärken.

Wie bereits gezeigt, bietet das mehrsprachige PDF-Tool von Foxit in Verbindung mit dem Foxit PDF SDK for Web eine robuste Lösung. Sie können benutzerdefinierte Formularfelder erstellen, Drag-and-Drop-Funktionen implementieren und eine Reihe von Funktionen freischalten. Dies ist jedoch nur die Spitze des Eisbergs. Das Foxit PDF SDK für Web bietet eine umfassende Reihe von Funktionen zur weiteren Verbesserung Ihrer PDF-Funktionalität.

Weitere Informationen zu den Möglichkeiten finden Sie in der offiziellen Dokumentation und den zusätzlichen Ressourcen des SDK. Die Dokumentation führt Sie durch erweiterte Funktionen, Anpassungsoptionen und Best Practices.

Wenn Sie das Tutorial durchsehen oder Ihre Arbeit überprüfen möchten, können Sie auf das mit dem Tutorial verknüpfte GitHub-Repository zugreifen. Das Repository enthält wahrscheinlich den Quellcode, Beispiele und zusätzliche Materialien, die Ihnen helfen, die im Tutorial behandelten Konzepte zu verstehen und umzusetzen.