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   eine wertvolle Wahl.   bieten eine große Auswahl an Funktionen für verschiedene Branchen. Foxit Die PDF-SDK-Bibliotheken von Foxit  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   ermöglicht es Ihnen, die im Tutorial beschriebenen Schritte zu verfolgen und umzusetzen. GitHub-Repository   Was ist Foxit PDF SDK für 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. Das Foxit PDF SDK for Web  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    . Die ZIP-Datei sollte das SDK, Dokumentation und Beispiele enthalten. Laden Sie das Foxit PDF SDK für das Web herunter  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   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: Vite   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   relativ zum übergeordneten   verfügbar ist. ./FoxitPDFSDKForWeb Projektverzeichnis   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.     <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   etwas CSS hinzu, um die Elemente zu formatieren: style.css   /* 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   das SDK, um eine Instanz des   zu erstellen: main.js pdfViewer   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   und   in der Datei   . LicenseSN LicenseKey ./FoxitPDFSDKForWeb/examples/license-key.js  Der pdfViewer wird erstellt, indem dem Konstruktor ein Konfigurationsobjekt bereitgestellt wird, das Folgendes enthält:    Der relative Pfad zum   Ordner des entpackten SDK-Pakets libPath: lib-    Konfigurationsoptionen für die JR-Engine, die vor allem Lizenzinformationen umfassen jr:    Eine benutzerdefinierte Komponente, die die PDF-Größe und das Scrollen steuert und durch ihre Einstellung den Viewer an den Container anpasst customs.ScrollWrap:  Nachdem   erstellt wurde, müssen Sie ihn nur noch initialisieren und das Dokument laden: pdfViewer   // ... 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   ab und öffnet sie im Viewer mithilfe der Methode   . Bei dem verwendeten PDF-Dokument handelt es sich um eine Demo-Anleitung aus der mitgelieferten Dokumentation des SDK.  Blob openPDFByFile()  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   generiert IDs zur Identifizierung von Formularfeldern im Dokument.   ist eine Abkürzung für eine schnellere Referenz auf vordefinierte Feldtypen, die im SDK verfügbar sind. Jeder Formularfeldeintrag enthält: randomId() FieldTypes  Ein   , um den Benutzer über seine Verwendung zu informieren Etikett  Ein   zum Zuordnen gezogener Elemente zu den Metadateneinträgen Name  Ein   , der den Typ des Felds angibt Typ  Eine   und   zur Berechnung des Positionsrechtecks innerhalb der PDF Breite height  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   – ein SDK-Objekt, das ein PDF-Dokument darstellt – als Argument. Es wird verwendet, um ein   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. PDFDoc PDFForm-  Jedes Element verfügt über ein   Attribut, das auf   gesetzt ist, um das Ziehen zu ermöglichen, sowie über eine   , die dem eindeutigen Namen jedes Formularfelds entspricht, um sie mit den zugrunde liegenden Metadaten abzugleichen. Diese   wird später im   Ereignis-Listener verwendet, um sie während der Drag-and-Drop-Aktion zu übertragen. ziehbares „true“ ID ID Dragstart-  Um den für die Funktion   erforderlichen   Parameter zu erhalten, müssen Sie das resultierende   der Funktion   erhalten, indem Sie es wie folgt ändern: „loadFormFieldsMenu()“ PDFDoc- Versprechen „loadPDF()“   // ... 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   Ereignis-Listener die Interaktion weiter, die im   Ereignis behandelt werden soll, indem er   aufruft. Dragover- Drop- PreventDefault()  Im   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   Instanz verfügbaren Methode   in PDF-Koordinaten umgewandelt. Drop- pdfViewer- „convertClientCoordToPDFCoord()“  Die Position, die Metadaten und die zufällig generierte ID werden im Methodenaufruf   des zuvor in der Funktion erstellten   Objekts verwendet. Die Methode akzeptiert die folgenden Argumente: addControl() PDFForm-  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   und   berechnet wird, damit die Maus den Mittelpunkt des Formularfelds koordiniert Breite Höhe  Wenn das Feld schließlich eine Liste von Optionen akzeptiert, greift zunächst die   Methode des   Objekts unter Verwendung der ID darauf zu. Die Optionen werden mit der Methode   entsprechend gesetzt. getField()- PDFForm- setOptions()  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   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. von Foxit  Weitere Informationen zu den Möglichkeiten finden Sie in der   und den zusätzlichen Ressourcen des SDK. Die Dokumentation führt Sie durch erweiterte Funktionen, Anpassungsoptionen und Best Practices. offiziellen Dokumentation  Wenn Sie das Tutorial durchsehen oder Ihre Arbeit überprüfen möchten, können Sie auf das mit dem Tutorial verknüpfte   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. GitHub-Repository  Auch   veröffentlicht. hier

The code in this story is for educational purposes. The readers are solely responsible for whatever they build with it.

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

Free Trial

Now Hiring

Dieses Audio ist in der Originalsprache der Geschichte produziert!

Zu lang; Lesen

Make resilience your competitive advantage

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

About Author

KOMMENTARE

Hängeetiketten

DIESER ARTIKEL WURDE VORGESTELLT IN

Related Stories

Genuine Content Creation in the Age of AI: Why Startups Need Quality Content

HackerNoon Decoded 2024: Celebrating Our Data Science Community!

HackerNoon Decoded 2024: Celebrating Our Writing Community!

HackerNoon Decoded 2024: Celebrating Our Startups Community!

Genuine Content Creation in the Age of AI: Why Startups Need Quality Content

HackerNoon Decoded 2024: Celebrating Our Data Science Community!

HackerNoon Decoded 2024: Celebrating Our Writing Community!

HackerNoon Decoded 2024: Celebrating Our Startups Community!

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps