paint-brush
So fügen Sie einem JavaScript-PDF-Viewer Anmerkungs-, Schwärzungs- und Formulareditor-Tools hinzuvon@mesciusinc
146 Lesungen

So fügen Sie einem JavaScript-PDF-Viewer Anmerkungs-, Schwärzungs- und Formulareditor-Tools hinzu

von MESCIUS inc.11m2024/06/27
Read on Terminal Reader

Zu lang; Lesen

Erfahren Sie, wie Sie mit einem JavaScript-PDF-Viewer PDF-Anmerkungen hinzufügen, Schwärzungen anwenden und PDF-Formulareditor-Tools verwenden.
featured image - So fügen Sie einem JavaScript-PDF-Viewer Anmerkungs-, Schwärzungs- und Formulareditor-Tools hinzu
MESCIUS inc. HackerNoon profile picture

Da immer mehr Geschäftsanwendungen in die Webumgebung verlagert werden, ist es sinnvoll, dass auch Funktionen wie das Teilen und Bearbeiten von Dokumenten in den Browser verlagert werden. In vielen Situationen müssen Benutzer jedoch mehr tun, als nur ein PDF-Dokument anzuzeigen.


Sie müssen möglicherweise Anmerkungen hinzufügen, um zusätzliche Informationen bereitzustellen, persönliche Informationen aus dem Dokument zu entfernen oder sogar Formularfelder im Dokument auszufüllen. Glücklicherweise macht der Document Solutions JavaScript PDF Viewer das Hinzufügen dieser Funktionalität zu Ihrer JavaScript- Anwendung ganz einfach.


In diesem Artikel gehen wir auf die folgenden Funktionen des Document Solutions JavaScript PDF Viewer ein:


  • Annotation-Editor für JavaScript PDF Viewer

  • Hauptmerkmale von Anmerkungen

  • Inhalt aus einer PDF-Datei schwärzen

  • Formulareditor für JavaScript PDF Viewer

  • Hauptfunktionen des Formular-Editors

  • Zusätzliche Bearbeitungsoptionen für den PDF Viewer


Sehen wir uns nun diese Funktionen an.

Annotation-Editor für JavaScript PDF Viewer

Mit den Anmerkungstools im Document Solutions JavaScript PDF Viewer können Benutzer wichtige Informationen in ihren PDF-Dokumenten überprüfen und markieren. Sie können außerdem Anmerkungen zu vorhandenen PDF-Dokumenten hinzufügen, ändern und entfernen, während der ursprüngliche Inhalt erhalten bleibt.


Benutzer können Anmerkungen in das PDF einfügen und Kommentare anderer Benutzer kommentieren und darauf antworten. Dank der Möglichkeit, Anmerkungen auszublenden, können Benutzer die Originaldokumente problemlos anzeigen und drucken. Bei Bedarf können sie auch Kopien ausdrucken, die ihre Anmerkungen enthalten. Der Anmerkungseditor listet alle Anmerkungen in Ihrem Dokument auf, sodass Sie auf vorhandene Anmerkungen zugreifen und diese ändern können:


Anmerkungseditor

Anwendungsfälle und Vorteile

Normalerweise verlassen sich Benutzer auf Adobe Acrobat, um PDFs mit Anmerkungen zu versehen. Mit einem Viewer, der Bearbeitungsfunktionen enthält, können Ihre Benutzer ihre Dokumente direkt in der Anwendung mit Anmerkungen versehen, ohne zwischen Anwendungen hin- und herwechseln zu müssen. Wie Sie sehen, kann ein Viewer mit Bearbeitungsfunktionen den Arbeitsablauf eines Unternehmens erheblich optimieren.


Hier sind nur einige Beispiele, bei denen diese Funktionalität von Vorteil wäre:


  • Ein Mitarbeiter eines Unternehmens möchte Finanzberichte zur Prüfung an das Management senden. Das Management kann die Berichte online im PDF-Viewer öffnen, mithilfe von Anmerkungen Änderungen vorschlagen und den Mitarbeiter darüber informieren, dass Kommentare abgegeben wurden. Der Mitarbeiter kann das Dokument dann im Online-Editor öffnen und es mithilfe der vorgenommenen Anmerkungen im Viewer aktualisieren.


  • Ein Mitarbeiter hat Zweifel an der Gehaltsstruktur seines Unternehmens. Er kann die Dokumente im PDF-Viewer lesen, vertrauliche Informationen schwärzen und mit Anmerkungstools Bereiche markieren, die einer Klärung bedürfen.


  • Ein Website-Designer bereitet Screenshots für eine Website vor und fügt sie in einer PDF-Datei zusammen, die zur Überprüfung gesendet wird. Prüfer markieren mit den Anmerkungstools Bereiche, die geändert werden müssen.


Die Anmerkungstools im Document Solutions JavaScript PDF Viewer machen all diese Szenarien möglich. Sehen wir uns die in Anmerkungen enthaltenen Funktionen an.

Hauptmerkmale von Anmerkungen

Die folgenden Hauptfunktionen sind mit Anmerkungen verfügbar:


  • Bearbeiten Sie PDFs mit einer Reihe von Anmerkungen
  • Markieren Sie wichtige Informationen über eine benutzerfreundliche Benutzeroberfläche
  • Hinzufügen, Ändern und Entfernen von Anmerkungen in neuen und vorhandenen PDF-Dateien
  • PDF-Inhalte verbessern und anmerkungsspezifische Eigenschaften anwenden
  • Drucken Sie das Original-PDF ohne Änderungen
  • Speichern der geänderten PDF-Datei mit Anmerkungen auf dem Client

Bearbeiten Sie PDFs mit einer Reihe von Anmerkungen

Der Document Solutions PDF Viewer unterstützt alle Anmerkungen, die Sie zum Überprüfen Ihrer PDF-Dokumente benötigen. Sie können Folgendes hinzufügen:


  • Textanmerkungen (Haftnotiz) - Fügt Text oder Haftnotizen zum PDF hinzu
  • Freitextanmerkung - Fügt eine Notiz hinzu, die immer im PDF sichtbar ist
  • Tintenanmerkungen - Zeichnet freihändig Kritzeleien auf das PDF
  • Quadratische Anmerkung – Fügt der PDF-Datei eine rechteckige/quadratische Form hinzu.
  • Kreisanmerkung – Fügt der PDF-Datei eine Kreisform hinzu
  • Linienanmerkung - Fügt eine gerade Linie zum PDF hinzu
  • Polylinienanmerkung - Fügt dem PDF geschlossene oder offene Formen mit mehreren Kanten hinzu
  • Polygon-Anmerkung - Fügt dem PDF ein Polygon hinzu
  • Dateianhang-Anmerkung - Hängen Sie eine Datei an das Dokument an, die in das PDF eingebettet wird
  • Tonanmerkung - Fügt Ton (.au-, .aiff- oder .wav-Format) hinzu, der aus einer Datei importiert oder vom Mikrofon des Computers aufgenommen wurde
  • Link-Annotation - Fügt Links hinzu, die auf verschiedene Webseiten verweisen, Suchmaschinen aufrufen und JavaScript ausführen können
  • Stempelanmerkung - Verwenden Sie Bilder, entweder lokal oder von einem Server, als Anmerkungen im PDF

Markieren Sie wichtige Informationen über eine benutzerfreundliche Benutzeroberfläche

Die Anmerkungstools des PDF Viewer von Document Solutions verfügen über eine intuitive Benutzeroberfläche, mit der Benutzer Anmerkungen in die PDF-Datei einfügen können. Der PDF Viewer enthält eine separate Anmerkungssymbolleiste und einen Editor zum Hinzufügen von Anmerkungen, Ändern ihrer Eigenschaften oder Löschen von Anmerkungen aus der vorhandenen PDF-Datei.


Im Eigenschaftenfenster wird eine Liste der Anmerkungen in Ihrem Dokument angezeigt. Sie können eine beliebige Anmerkung im PDF-Dokument auswählen, anmerkungsspezifische Eigenschaften aus dem linken Fenster anwenden oder die Anmerkung löschen.


Auf der Registerkarte „Seite “ im Bedienfeld können Sie sehen, wie viele Anmerkungen auf Ihrer Seite vorhanden sind. Wenn Sie Ihr Dokument zur Überprüfung senden, können Sie die Anzahl der vorgenommenen Änderungen ermitteln.


Eigenschaftenfenster

Hinzufügen, Ändern und Entfernen von Anmerkungen in neuen und vorhandenen PDF-Dateien

Sie können vorhandene Anmerkungen jederzeit bearbeiten oder entfernen, während Sie PDFs im JavaScript PDF Viewer überprüfen. Um eine Anmerkung hinzuzufügen, klicken Sie einfach auf die Schaltfläche „Anmerkungseditor“ im linken Bereich. Daraufhin wird die Anmerkungssymbolleiste angezeigt. Klicken Sie auf eine beliebige Anmerkung und zeichnen Sie direkt in der PDF-Datei. Wählen Sie die Anmerkung aus. Daraufhin werden die Anmerkungseigenschaften im linken Bereich angezeigt. Sie können auch eine PDF-Datei mit vorhandenen Anmerkungen laden, die Anmerkung auswählen, die Eigenschaften ändern oder die Anmerkung aus dem Eigenschaftenbereich löschen.


Hinzufügen, Ändern und Entfernen von Anmerkungen

PDF-Inhalte verbessern und anmerkungsspezifische Eigenschaften anwenden

Benutzer finden im Viewer umfassende Unterstützung zum Festlegen anmerkungsspezifischer Eigenschaften. Sie können Rich Text hinzufügen, die Textfarbe festlegen, einen Rahmen hinzufügen, Autor und Betreff festlegen, eine Antwort hinzufügen, die Grenzen/X/Y-Position für die Anmerkungen festlegen und vieles mehr über das Eigenschaftenfenster.


Anwenden anmerkungsspezifischer Eigenschaften

Drucken Sie das PDF ohne Änderungen

Wenn Sie das Original-PDF anzeigen möchten, können Sie die Anmerkungen mit der Schaltfläche „Ausblenden“ ausblenden und das PDF ohne Anmerkungen drucken.


Anmerkungen im JavaScript-PDF-Viewer ausblenden

Speichern Sie das geänderte PDF mit Anmerkungen auf dem Client

Klicken Sie auf die Schaltfläche „Speichern“, um die Änderungen an Ihrer PDF-Datei anzuwenden und die Anmerkungen zu speichern. Der Viewer muss mit einem Server verbunden sein, auf dem DsPdf ausgeführt wird, um die Änderungen zu speichern. Die Liste der Änderungen und die Original-PDF-Datei werden an den Server gesendet, wo DsPdf die Änderungen anwendet. Anschließend sendet es die geänderte PDF-Datei zurück an den Client, wo der Benutzer sie speichern kann.


Speichern Sie die geänderte PDF-Datei mit Anmerkungen

Inhalt aus einer PDF-Datei schwärzen

Mit der Option „Anmerkung schwärzen“ oder „Bereich schwärzen“ in der Symbolleiste können Sie vertrauliche Abschnitte zum Entfernen markieren. Sie können die Markierungsrahmenfarbe und die Markierungsfüllfarbe festlegen, damit Benutzer den Bereich zum Schwärzen markieren können. Der Benutzer kann diese Eigenschaften so festlegen, dass sie angewendet werden, wenn er mit der Maus über den geschwärzten Inhalt fährt, d. h. die Eigenschaften „Füllfarbe überlagern“ , „Text überlagern“ , „Text überlagern – Ausrichtung“ und „Text wiederholen“ . Alle diese Optionen werden in Ihrem PDF angezeigt, wenn der Inhalt aus dem Dokument entfernt wird.


Sie können auch bestimmte Inhalte über die Schaltfläche „Schwärzung anwenden“ im Eigenschaftenfenster schwärzen. Sobald die Schwärzung angewendet wurde, können Sie sie mithilfe der Schaltfläche „Schwärzung zurücksetzen“ in der Symbolleiste zurücksetzen. Beim Speichern der PDF-Datei sind die geschwärzten Informationen jedoch nicht mehr zugänglich und angewendete Schwärzungen können nicht zurückgesetzt werden.


Sie können einzelne Schwärzungsanmerkungen anwenden oder auf die Schaltfläche Alle Schwärzungen anwenden klicken, um die Schwärzungen im gesamten Dokument anzuwenden. Wenn Sie die PDF-Datei mit angewendeten Schwärzungen speichern, wird der geschwärzte Inhalt vollständig aus der PDF-Datei entfernt. Benutzer können das entfernte Material nicht auswählen oder in ein anderes Dokument kopieren oder andere PDF-Tools verwenden, um den geschwärzten Inhalt zu lesen.


PDF-Inhalte redigieren

Formulareditor für JavaScript PDF Viewer

Mit dem Formulareditor können Sie jetzt interaktive PDF-Formulare online entwerfen. Der Editor unterstützt Sie bei der Erstellung Ihrer Formulare bei der Verwendung verschiedener Formularfelder und erweiterter Eigenschaften. Sie können das Formular auch online ausfüllen und absenden .


Zu den Funktionen des Formular-Editors gehören:


  • Erstellen Sie neue PDF-Formulare von Grund auf
  • PDF-Formulare entwerfen, ausfüllen, übermitteln und zurücksetzen
  • Sammeln Sie Daten direkt vom Benutzer und füllen Sie PDF-Formulare aus
  • Füllen Sie die Formularfelder mit Daten aus einer externen Quelle (Datenbank, JSON usw.) aus.
  • Hinzufügen von Formularfeldern zu vorhandenen PDF-Dokumenten
  • Bearbeiten von Formularfeldern in vorhandenen PDF-Dokumenten
  • Fügen Sie PDF-Formularen JavaScript-Funktionen hinzu
  • Anwenden einer breiten Palette von Eigenschaften auf Formularfelder
  • Schnelle, intuitive UI-Symbolleiste und Eigenschaftenfenster zum Entwerfen von PDF-Formularen
  • Erstellen Sie eine benutzerdefinierte Benutzeroberfläche – lassen Sie unnötige Felder in Ihrer Symbolleiste weg

Die Notwendigkeit eines webbasierten PDF-Formulardesigners

  • Das PDF-Format ist das am meisten bevorzugte Format für Layout und Erscheinungsbild. Obwohl HTML-Formulare beliebt sind, sehen PDF-Formulare daher immer so aus, wie Sie sie entworfen haben.


  • Die meisten Anwendungen sind webbasiert und der Document Solutions PDF Viewer ist ein Online-Tool, mit dem Sie PDF-Formulare erstellen, PDFs bearbeiten, Anmerkungen hinzufügen und die geänderten PDFs auf dem Client speichern können. Dies ist eine schnellere Möglichkeit, PDFs in einer einzigen Anwendung zu erstellen und zu speichern.


  • Entwickler können in Acrobat ein PDF-Formular erstellen und es online freigeben. Das im Standard-Viewer des Browsers geöffnete PDF kann jedoch nicht angepasst werden. Entwickler können auch keine zusätzlichen JavaScript-Aktionen auf dem Formular ausführen, z. B. den Inhalt übermitteln oder den Inhalt mit Formulardaten füllen. Document Solutions PDF Viewer unterstützt weitere JavaScript-Aktionen, die Sie mit den Aktionen „Senden“ und „Zurücksetzen“ auf dem Formular festlegen können.


  • Sie können zum Erstellen eines Formulars Microsoft Word oder einen PDF-Editor verwenden. Das Erstellen eines PDF-Formulars in Word kann eine Herausforderung sein, da hierfür komplexe Bearbeitungstools erforderlich sind. Der Formular-Designer von Document Solutions PDF Viewer ist intuitiv und umfasst eine benutzerfreundliche Benutzeroberfläche sowie das Eigenschaftenfenster, in dem die gewünschten Eigenschaften für die Formularfelder festgelegt werden.


  • Sie können PDF-Formulare entwerfen, die in jedem Browser angezeigt und ausgefüllt werden können. Sie müssen sich auch keine Gedanken über das Erscheinungsbild machen oder darüber, ob der Endbenutzer über Adobe Acrobat verfügt.

Verschiedene Arten von PDF-Formularen, die Sie erstellen können

Mit dem Formular-Designer können Sie folgende PDF-Formulare erstellen:


  • Anmeldeformulare (Beispiele: Veranstaltung, Universitätskurse, Mitgliedschaft, Patientengeschichte, Wettbewerbe usw.)

  • Bewerbungsformulare (Beispiele: Bewerbung um eine Stelle, Kreditantrag etc.)

  • Feedback-Formulare (Beispiele: Veranstaltungen, Website, E-Commerce usw.)

  • Anfrageformulare (Beispiele: Miete, Informationen, Zahlungsformulare usw.)


JavaScript PDF-Formulareditor

Hauptfunktionen des PDF-Formulardesigners

Der Document Solutions JavaScript PDF Viewer unterstützt verschiedene Formularfeldtypen, mit denen Sie Ihre PDF-Datei interaktiv und vollständig gestalten können:


  • Textfeld – Ermöglicht Benutzern die Eingabe von Text wie Name, Telefonnummer usw.
  • Kennwortfeld: Ermöglicht Benutzern die Eingabe des Kennworts für ein Dokument.
  • Textbereichsfeld – Ermöglicht Ihnen das Hinzufügen von Langtext wie Berufserfahrung, Adresse usw.
  • Kontrollkästchenfeld - Ermöglicht Ihrem Benutzer die Auswahl mehrerer Optionen
  • ComboText-Feld - Ermöglicht das Hinzufügen von Text in gleichmäßigen Abständen (beispielsweise zum Eingeben von Datum, E-Mail usw. in ein Registrierungsformular).
  • ComboBox-Feld - Hier können Sie ein Element aus einem Popup-Menü auswählen oder einen Wert eingeben.
  • ListBox-Feld - Zeigt eine Liste mit Auswahlmöglichkeiten an
  • PushButton-Feld – Eine interaktive Schaltfläche, die bestimmte Aktionen auslöst, z. B. das Öffnen einzelner Dateien, das Anzeigen einer Popup-Nachricht usw.
  • RadioButton-Feld - Zeigt eine Gruppe von Optionen an, aus denen der Benutzer nur eine auswählen kann.
  • Feld mit der Schaltfläche „Senden“ - Ermöglicht das Senden des ausgefüllten Formulars
  • Feld mit der Schaltfläche „Zurücksetzen“ - Ermöglicht das Zurücksetzen des Formulars

Benutzerfreundliche Benutzeroberfläche zum Entwerfen von PDF-Formularen

Die Formulareditor-Tools von Document Solutions verfügen über eine benutzerfreundliche Benutzeroberfläche zum Hinzufügen von Formularfeldern zum PDF. Der PDF Viewer enthält eine separate Symbolleiste und einen Editor für Formularfelder, um Formularfelder hinzuzufügen, deren Eigenschaften zu ändern oder sie aus dem vorhandenen PDF zu löschen. Das Eigenschaftenfenster zeigt eine Liste der Formularfelder in Ihrem Dokument an. Sie können jedes beliebige Formularfeld im PDF auswählen, formularfeldspezifische Eigenschaften aus dem linken Fenster anwenden und das Formularfeld löschen. Auf der Registerkarte „Seite“ im Fenster können Sie auch sehen, wie viele Formularfelder auf Ihrer Seite vorhanden sind.


Symbolleiste und Editor für Formularfelder

Hinzufügen, Ändern und Entfernen von Formularfeldern aus neuen oder vorhandenen PDF-Formularen

Sie können beim Entwerfen eines PDF-Formulars im Online-Viewer jederzeit vorhandene Formularfelder ändern und auch entfernen. Um ein Formularfeld hinzuzufügen, klicken Sie einfach auf die Schaltfläche „Formulareditor“ im linken Bereich. Daraufhin wird die Symbolleiste des Formulareditors angezeigt. Klicken Sie auf ein beliebiges Formularfeld und zeichnen Sie direkt auf der PDF-Seite. Wählen Sie das Formularfeld aus. Daraufhin werden die Formularfeldeigenschaften im linken Bereich angezeigt. Sie können auch ein PDF-Formular mit vorhandenen Formularfeldern laden, das Formularfeld auswählen, Eigenschaften anwenden oder die Option „Löschen“ im Eigenschaftenbereich wählen, um das Formularfeld zu löschen.

Formularfelder hinzufügen, ändern und entfernen

PDF-Formulare mit formularfeldspezifischen Eigenschaften erweitern

Es gibt umfassende Unterstützung für das Festlegen der formularfeldspezifischen Eigenschaften für jedes vom Viewer unterstützte Formularfeld. Neben einigen allgemeinen Funktionen können Sie Name, Schreibgeschützt, Wert, Ausrichtung, Hintergrundfarbe, Maximallänge, Rahmeneigenschaften, Schriftgröße und die Begrenzungen/X/Y-Position der Formularfelder festlegen.


Darüber hinaus können Sie die Eigenschaft „Erforderlich“ für Textfelder wie „TextField“, „PasswordField“, „TextArea“ und „ComboText Field“ festlegen.


Erweitern Sie PDF-Formulare mit formularfeldspezifischen Eigenschaften

Drucken Sie das Original-PDF-Formular aus

Wenn Sie die ursprüngliche PDF-Datei anzeigen möchten, können Sie die Formularfelder mit der Schaltfläche „Ausblenden“ in der Hauptsymbolleiste ausblenden und die PDF-Datei ohne die Formularfelder anzeigen oder drucken.


Formularfelder ausblenden

Speichern Sie das neu gestaltete PDF mit Formularfeldern auf dem Client

Wenden Sie Änderungen an Ihrem PDF-Dokument an und speichern Sie die Formularfelder. Für diesen Vorgang ist ein DsPdf- Produkt auf dem Server erforderlich, um das Original-PDF und die Liste der Änderungen abzurufen, die Änderungen anzuwenden und das geänderte PDF an den Client zurückzusenden.

PDF-Formulare ausfüllen und übermitteln

Nachdem Sie das PDF-Formular entworfen haben, können Sie Ihre Benutzer das PDF-Formular ausfüllen und an den Viewer senden lassen. Die Formulardaten werden entweder an die Datenbank gesendet oder aus den eingetragenen Werten als PDF generiert. Sie können Formulardaten auch aus der Datenbank in den Viewer in ein PDF-Formular importieren.


PDF-Formulare ausfüllen und übermitteln

Zusätzliche Bearbeitungsoptionen für den PDF Viewer

Zusätzlich zu Anmerkungen, Schwärzungen und Formularfeldern können Sie die folgenden Funktionen zum Arbeiten mit und Bearbeiten von PDF-Dokumenten verwenden.

Leere PDF-Dokumente erstellen

Mit dem PDF Viewer können Sie PDF-Dokumente über die Schaltfläche „Neues Dokument“ erstellen. Sie können das PDF oder ein PDF-Formular mit den Tools „Annotation “ und „Formulareditor“ gestalten.


Erstellen Sie leere PDF-Dokumente mit dem JavaScript PDF Viewer

Neue Seiten hinzufügen und Seiten in PDF-Dokumenten löschen

Über die Schaltfläche „Neue Seite“ können Sie einem bestehenden PDF-Dokument oder einem Original-PDF-Dokument eine neue Seite hinzufügen und über die Schaltfläche „Löschen“ die Seiten löschen.


Neue Seiten hinzufügen und Seiten in PDF-Dokumenten löschen

Auswählen und Löschen von Anmerkungen/Formularfeldern aus PDF-Dokumenten

Sie können die einem PDF-Dokument hinzugefügten Anmerkungs-/Formularfelder jederzeit in der Anmerkungseditor- und Formulareditor-Ansicht auswählen. Verwenden Sie die Schaltfläche Löschen , um die Anmerkungen oder Formularfelder aus neuen oder vorhandenen PDF-Dokumenten zu löschen.


Löschen von Anmerkungen/Formularfeldern aus PDF-Dokumenten

Rückgängigmachen und Wiederherstellen von Änderungen

Wenn Sie Ihre Änderungen an den Anmerkungen oder Formularfeldern rückgängig machen oder wiederholen möchten, können Sie die Schaltflächen „Rückgängig“/„Wiederholen“ sowohl im Anmerkungs- als auch im Formulareditor verwenden. Diese Schaltflächen zeichnen Ihre Änderungen schrittweise auf, und Sie können Ihre Aktionen so lange rückgängig machen oder wiederholen, bis Sie mit dem Ergebnis zufrieden sind.


Rückgängigmachen und Wiederherstellen von Änderungen an PDF

Abschluss

Damit haben wir die Funktionen für Anmerkungen, Schwärzungen und Formularfelder des Document Solutions JavaScript PDF Viewer durchgegangen. Wie Sie gesehen haben, ist es ganz einfach, eigene Anmerkungen hinzuzufügen, Informationen zu schwärzen, die nicht angezeigt werden sollen, und Formularfelder hinzuzufügen/zu bearbeiten, um interaktive PDF-Formulare zu erstellen.