So fügen Sie Barcodes mit HTML und JavaScript in ein PDF-Dokument ein

Das Einfügen von Barcodes in PDF-Dokumente kann die Dokumentenverwaltung, Nachverfolgung und Datenverarbeitungsabläufe erheblich rationalisieren. Barcodes dienen als eindeutige Identifikatoren und ermöglichen eine automatisierte Dateneingabe, einen schnellen Abruf und eine erhöhte Sicherheit. In diesem Artikel zeigen wir, wie Sie HTML5, JavaScript und das Dynamsoft Document Viewer SDK nutzen, um Barcodes zu generieren und in PDF-Dokumente einzubetten.

Demovideo zum Web-PDF-Editor

Online-Demo

https://yushulx.me/web-document-annotation/

Voraussetzungen

• Dynamsoft Document Viewer: Dieses JavaScript SDK ermöglicht die nahtlose Anzeige und Kommentierung verschiedener Dokumentformate, einschließlich PDFs und gängiger Bilddateien wie JPEG, PNG , TIFF und BMP. Mit seinem robusten Funktionsumfang können Sie PDFs rendern, durch Seiten navigieren, die Bildqualität verbessern und mit Anmerkungen versehene Dokumente speichern. Installieren Sie das Paket von npm, um loszulegen.

• Dynamsoft Capture Vision-Testlizenz: Um auf alle Funktionen der Dynamsoft SDKs zuzugreifen, melden Sie sich für eine 30-tägige kostenlose Testlizenz an. Diese Testversion bietet vollständigen Zugriff auf alle Funktionen, sodass Sie die SDKs eingehend erkunden können.

Schritte zum Implementieren eines PDF-Dokumenteditors in HTML5 und JavaScript

In den folgenden Abschnitten führen wir Sie durch den Prozess der Erstellung eines webbasierten PDF-Dokumenteditors mit Funktionen zum Einfügen von Barcodes. Mit dem Editor können Benutzer PDF-Dokumente laden, Barcodes als Anmerkungen einfügen und die geänderten PDF-Dateien lokal speichern.

Schritt 1: Binden Sie das Dynamsoft Document Viewer SDK ein

Im Fügen Sie im Abschnitt Ihrer HTML-Datei die folgenden Skript-Tags hinzu, um das Dynamsoft Document Viewer SDK einzubinden:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/dynamsoft-document-viewer@2.0.0/dist/ddv.css">
<script src="https://cdn.jsdelivr.net/npm/dynamsoft-document-viewer@2.0.0/dist/ddv.js"></script>

Schritt 2: Aktivieren Sie Dynamsoft Document Viewer

1. Erstellen Sie in index.html ein Eingabeelement für den Lizenzschlüssel und eine Schaltfläche zum Aktivieren des SDK:
   

   <input type="text"
       placeholder="LICENSE-KEY"
      >
   
   

2. Implement the activation logic in main.js:
   

   async function activate(license) {
       try {
           Dynamsoft.DDV.Core.license = license;
           Dynamsoft.DDV.Core.engineResourcePath = "https://cdn.jsdelivr.net/npm/dynamsoft-document-viewer@2.0.0/dist/engine";
           await Dynamsoft.DDV.Core.init();
           Dynamsoft.DDV.setProcessingHandler("imageFilter", new Dynamsoft.DDV.ImageFilter());
           docManager = Dynamsoft.DDV.documentManager;
   
       } catch (error) {
           console.error(error);
           toggleLoading(false);
       }
   
   }
   

   Erklärung

   • Der engineResourcePath muss auf den Speicherort der Dynamsoft Document Viewer-Engine-Dateien verweisen.
   • setProcessingHandler legt den Bildfilter zur Verbesserung der Bildqualität fest.
   • Das documentManager-Objekt wird zum Verwalten des Dokumentbetrachters und -editors verwendet.

Schritt 3: Erstellen Sie einen Web-PDF-Viewer mit gebrauchsfertigen Komponenten

Das Dynamsoft Document Viewer SDK bietet einen integrierten Dokumenteneditor, der zum Erstellen einer Web-PDF-Viewer-Anwendung nur minimalen Code erfordert.

1. Erstellen Sie ein Containerelement für den Dokument-Viewer in index.html:
   

   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/dynamsoft-document-viewer@2.0.0/dist/ddv.css">
   <script src="https://cdn.jsdelivr.net/npm/dynamsoft-document-viewer@2.0.0/dist/ddv.js"></script>
   

   Der uiConfig-Parameter gibt die Standard-UI-Konfiguration für den Dokument-Viewer an, einschließlich Anmerkungstools.

Schritt 4: Fügen Sie eine benutzerdefinierte Schaltfläche hinzu, um Barcodes in das PDF-Dokument einzufügen

Dynamsoft Document Viewer ermöglicht die Anpassung von UI-Elementen und Ereignishandlern. Laut offizieller Dokumentation können Sie benutzerdefinierte Schaltflächen hinzufügen.

Eine benutzerdefinierte Barcode-Schaltfläche mit den Materialsymbolen von Google

Definieren Sie ein benutzerdefiniertes Schaltflächenobjekt in main.js:

<input type="text"
    placeholder="LICENSE-KEY"
   >



Implement the activation logic in main.js:


async function activate(license) {
    try {
        Dynamsoft.DDV.Core.license = license;
        Dynamsoft.DDV.Core.engineResourcePath = "https://cdn.jsdelivr.net/npm/dynamsoft-document-viewer@2.0.0/dist/engine";
        await Dynamsoft.DDV.Core.init();
        Dynamsoft.DDV.setProcessingHandler("imageFilter", new Dynamsoft.DDV.ImageFilter());
        docManager = Dynamsoft.DDV.documentManager;

    } catch (error) {
        console.error(error);
        toggleLoading(false);
    }

}




Der Klassenname verweist auf Google-Schriftarten. Verwenden Sie die Klasse material-icons, um das qr_code-Symbol in der Schaltfläche anzuzeigen.



<div class="document-viewer">
    <div>

</li>
<li>
<p>Initialize the document viewer in main.js:<br>
</p>
<pre class="brush:php;toolbar:false">async function showViewer() {
    if (!docManager) return;
    let editContainer = document.getElementById("edit-viewer");
    editContainer.parentNode.style.display = "block";
    editViewer = new Dynamsoft.DDV.EditViewer({
        container: editContainer,
        uiConfig: DDV.getDefaultUiConfig("editViewer", { includeAnnotationSet: true })
    });
}





  
  
  Fügen Sie die Barcode-Schaltfläche zur Symbolleiste hinzu


Um die Schaltfläche zur Symbolleiste hinzuzufügen, ändern Sie den uiConfig-Parameter in der showViewer-Funktion:



const qrButton = {
    type: Dynamsoft.DDV.Elements.Button,
    className: "material-icons icon-qr_code",
    tooltip: "Add a QR code. Ctrl+Q",
    events: {
        click: "addQr",
    },
};





  
  
  Drücken Sie die Taste, um ein Dialogfeld zur Barcode-Generierung aufzurufen


Wenn Sie auf die Barcode-Schaltfläche klicken, erscheint ein Popup-Dialogfeld, in dem Benutzer den Barcode-Inhalt eingeben und den Barcode-Typ auswählen können:



<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<style>
    .icon-qr_code::before {
        content: "qr_code";
    }

    .icon-qr_code {
        display: flex;
        font-size: 1.5em;
    }
</style>




Der Dialog enthält die folgenden Elemente:


Eine Dropdown-Liste zur Auswahl von Barcode-Typen.
Ein Eingabefeld zur Eingabe von Barcode-Inhalten.
Eine OK-Schaltfläche zum Übermitteln der Daten.
Eine Schaltfläche „Abbrechen“, um das Popup zu schließen, ohne es abzusenden.


Hier ist der vollständige Code:



const pcEditViewerUiConfig = {
    type: Dynamsoft.DDV.Elements.Layout,
    flexDirection: "column",
    className: "ddv-edit-viewer-desktop",
    children: [
        {
            type: Dynamsoft.DDV.Elements.Layout,
            className: "ddv-edit-viewer-header-desktop",
            children: [
                {
                    type: Dynamsoft.DDV.Elements.Layout,
                    children: [
                        Dynamsoft.DDV.Elements.ThumbnailSwitch,
                        Dynamsoft.DDV.Elements.Zoom,
                        Dynamsoft.DDV.Elements.FitMode,
                        Dynamsoft.DDV.Elements.DisplayMode,
                        Dynamsoft.DDV.Elements.RotateLeft,
                        Dynamsoft.DDV.Elements.RotateRight,
                        Dynamsoft.DDV.Elements.Crop,
                        Dynamsoft.DDV.Elements.Filter,
                        Dynamsoft.DDV.Elements.Undo,
                        Dynamsoft.DDV.Elements.Redo,
                        Dynamsoft.DDV.Elements.DeleteCurrent,
                        Dynamsoft.DDV.Elements.DeleteAll,
                        Dynamsoft.DDV.Elements.Pan,
                        Dynamsoft.DDV.Elements.AnnotationSet,
                        qrButton,
                    ],
                },
                {
                    type: Dynamsoft.DDV.Elements.Layout,
                    children: [
                        {
                            type: Dynamsoft.DDV.Elements.Pagination,
                            className: "ddv-edit-viewer-pagination-desktop",
                        },
                        Dynamsoft.DDV.Elements.Load,
                        {
                            type: Dynamsoft.DDV.Elements.Button,
                            className: "ddv-button ddv-button-download",
                            events: {
                                click: "download",
                            }
                        }
                    ],
                },
            ],
        },
        Dynamsoft.DDV.Elements.MainView,
    ],
};

editViewer = new Dynamsoft.DDV.EditViewer({
    container: editContainer,
    uiConfig: pcEditViewerUiConfig
});





Nachdem Sie den Inhalt und Typ des Barcodes abgerufen haben, verwenden Sie bwipjs, um den generierten Barcode auf einer Leinwand zu zeichnen. Konvertieren Sie dann die Leinwand in einen Blob und fügen Sie ihn als Anmerkung in das PDF-Dokument ein.



editViewer.on("addQr", addQr);





  
  
  Schritt 6: Speichern Sie das PDF-Dokument mit Barcodes auf der lokalen Festplatte


Erstellen Sie eine download()-Funktion und binden Sie sie an die Download-Schaltfläche in der Symbolleiste:



<style>
    .popup {
        background: #fff;
        padding: 20px;
        border-radius: 8px;
        width: 300px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
        text-align: center;
    }

    .popup button {
        margin: 10px 5px;
        padding: 8px 16px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
    }

    .popup .return-btn {
        background-color: #4CAF50;
        color: white;
    }

    .popup .cancel-btn {
        background-color: #f44336;
        color: white;
    }
</style>

<div>



<h3>
  
  
  Step 5: Generate a Barcode and Insert it as Annotation to PDF Document
</h3>

<p>Include the bwip-js library in index.html. This library is used to generate barcodes in various formats, such as QR Code, PDF417, and DataMatrix.<br>
</p>

<pre class="brush:php;toolbar:false"><script src="https://cdn.jsdelivr.net/npm/bwip-js@4.1.2"></script>




Beim Speichern des PDF-Dokuments ist die Option „saveAnnotation“ auf „Flatten“ eingestellt, um sicherzustellen, dass Anmerkungen, einschließlich der Barcodes, in das Dokument eingebettet werden.


  
  
  Ausführen des Web-PDF-Dokumenteditors




Starten Sie einen Webserver im Stammverzeichnis Ihres Projekts:


if (barcodeContent !== null) {
    try {

        bwipjs.toCanvas(tempCanvas, {
            bcid: barcodeType,
            text: barcodeContent,
            scale: 3,
            includetext: false,
        });

        tempCanvas.toBlob(async (blob) => {
            if (blob) {
                let currentPageId = docs[0].pages[editViewer.getCurrentPageIndex()];
                let pageData = await docs[0].getPageData(currentPageId);

                const option = {
                    stamp: blob,
                    x: pageData.mediaBox.width - 110,
                    y: 10,
                    width: 100,
                    height: 100,
                    opacity: 1.0,
                    flags: {
                        print: false,
                        noView: false,
                        readOnly: false,

                    }
                }

                if (applyToAllPages) {
                    for (let i = 0; i < docs[0].pages.length; i++) {
                        await Dynamsoft.DDV.annotationManager.createAnnotation(docs[0].pages[i], "stamp", option)
                    }
                } else {

                    await Dynamsoft.DDV.annotationManager.createAnnotation(currentPageId, "stamp", option)
                }
            }
        }, 'image/png');
    } catch (e) {
        console.log(e);
    }
}



Öffnen Sie http://localhost:8000 in Ihrem Webbrowser.
Laden Sie ein PDF-Dokument.

Fügen Sie einen Barcode als Anmerkung in das PDF-Dokument ein.






  
  
  Lesen von Barcodes aus PDF-Dokumenten


Sobald das PDF-Dokument auf Ihrer lokalen Festplatte gespeichert ist, können Sie den Barcode-Inhalt überprüfen, indem Sie ihn mit dem Dynamsoft Barcode Reader lesen.



Installieren Sie barcode4nodejs, einen Node.js-Wrapper, der mit dem Dynamsoft C Barcode Reader SDK erstellt wurde.


editViewer.on("download", download);

async function download() {
    try {
        const pdfSettings = {
            saveAnnotation: "flatten",
        };

        let blob = await editViewer.currentDocument.saveToPdf(pdfSettings);

        saveBlob(blob, `document_${Date.now()}.pdf`);
    } catch (error) {
        console.log(error);
    }

}

function saveBlob(blob, fileName) {
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = fileName;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    URL.revokeObjectURL(url);
}




Erstellen Sie eine Skriptdatei, test.js, um Barcodes aus dem PDF-Dokument zu lesen:


<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/dynamsoft-document-viewer@2.0.0/dist/ddv.css">
<script src="https://cdn.jsdelivr.net/npm/dynamsoft-document-viewer@2.0.0/dist/ddv.js"></script>



Hinweis: Sie müssen den LIZENZSCHLÜSSEL durch Ihren eigenen ersetzen.


Führen Sie das Skript mit dem Pfad zu einer PDF-Datei aus:


<input type="text"
    placeholder="LICENSE-KEY"
   >




Implement the activation logic in main.js:


async function activate(license) {
    try {
        Dynamsoft.DDV.Core.license = license;
        Dynamsoft.DDV.Core.engineResourcePath = "https://cdn.jsdelivr.net/npm/dynamsoft-document-viewer@2.0.0/dist/engine";
        await Dynamsoft.DDV.Core.init();
        Dynamsoft.DDV.setProcessingHandler("imageFilter", new Dynamsoft.DDV.ImageFilter());
        docManager = Dynamsoft.DDV.documentManager;

    } catch (error) {
        console.error(error);
        toggleLoading(false);
    }

}



Der Barcode-Inhalt wird in der Konsole gedruckt.






  
  
  Quellcode


https://github.com/yushulx/web-twain-document-scan-management/tree/main/examples/document_annotation


          

            
        
Das obige ist der detaillierte Inhalt vonSo fügen Sie Barcodes mit HTML und JavaScript in ein PDF-Dokument ein. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!