Comment insérer des codes-barres dans un document PDF avec HTMLnd JavaScript

Page de garde > La programmation > Comment insérer des codes-barres dans un document PDF avec HTMLnd JavaScript

Comment insérer des codes-barres dans un document PDF avec HTMLnd JavaScript

Publié le 2024-11-19

Parcourir:914

Inserting barcodes into PDF documents can significantly streamline document management, tracking, and data processing workflows. Barcodes serve as unique identifiers, enabling automated data entry, quick retrieval, and enhanced security. In this article, we'll demonstrate how to leverage HTML5, JavaScript, and the Dynamsoft Document Viewer SDK to generate and embed barcodes into PDF documents.

Web PDF Editor Demo Video

Online Demo

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

Prerequisites

Dynamsoft Document Viewer: This JavaScript SDK allows for seamless viewing and annotation of various document formats, including PDFs and common image files such as JPEG, PNG, TIFF, and BMP. With its robust feature set, you can render PDFs, navigate pages, enhance image quality, and save annotated documents. Install the package from npm to get started.
Dynamsoft Capture Vision Trial License: To access the full capabilities of the Dynamsoft SDKs, sign up for a 30-day free trial license. This trial offers complete access to all features, enabling you to explore the SDKs in-depth.

Steps to Implement a PDF Document Editor in HTML5 and JavaScript

In the following paragraphs, we'll walk you through the process of creating a web-based PDF document editor with barcode insertion capabilities. The editor will enable users to load PDF documents, insert barcodes as annotations, and save the modified PDF files locally.

Step 1: Include the Dynamsoft Document Viewer SDK

In the

section of your HTML file, add the following script tags to include the Dynamsoft Document Viewer SDK:

Step 2: Activate Dynamsoft Document Viewer

In index.html, create an input element for the license key and a button to activate the SDK:

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/[email protected]/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);
    }

}

Explanation

The engineResourcePath must point to the location of the Dynamsoft Document Viewer engine files.
setProcessingHandler sets the image filter for enhancing image quality.
The documentManager object is used to manage the document viewer and editor.

Step 3: Create a Web PDF Viewer with Ready-to-Use Components

The Dynamsoft Document Viewer SDK provides a built-in document editor that requires minimal code to construct a web PDF viewer application.

Create a container element for the document viewer in index.html:


    



Initialize the document viewer in main.js:


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 })
    });
}



The uiConfig parameter specifies the default UI configuration for the document viewer, including annotation tools.




  
  
  Step 4: Add a Custom Button to Insert Barcodes into the PDF Document


Dynamsoft Document Viewer allows for customization of UI elements and event handlers. According to the official documentation, you can add custom buttons.


  
  
  A Custom Barcode Button with Google's Material Icons


Define a custom button object in main.js:



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




The className points to Google fonts. Use the material-icons class to display the qr_code icon in the button.










  
  
  Add the Barcode Button to the Toolbar


To add the button to the toolbar, modify the uiConfig parameter in the showViewer function:



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
});






  
  
  Press the Button to Pop Up a Barcode Generation Dialog


When the barcode button is clicked, a pop-up dialog will appear for users to input the barcode content and select the barcode type:



editViewer.on("addQr", addQr);




The dialog contains the following elements:


A dropdown list for selecting barcode types.
An input field for entering barcode content.
An OK button to submit the data.
A Cancel button to close the pop-up without submitting.


Here's the full code:










  
  
  Step 5: Generate a Barcode and Insert it as Annotation to PDF Document


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.








After retrieving the barcode content and type, use bwipjs to draw the generated barcode on a canvas. Then, convert the canvas to a blob and insert it as an annotation to the PDF document.



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 




  
  
  Step 6: Save the PDF Document with Barcodes to Local Disk


Create a download() function and bind it to the download button in the toolbar:



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);
}




When saving the PDF document, the saveAnnotation option is set to flatten, ensuring that annotations, including the barcodes, are embedded in the document.


  
  
  Running the Web PDF Document Editor




Start a web server in the root directory of your project:


python -m http.server



Open http://localhost:8000 in your web browser.
Load a PDF document.

Insert a barcode as an annotation into the PDF document.






  
  
  Reading Barcodes from PDF Documents


Once the PDF document is saved to your local disk, you can verify the barcode content by reading it with the Dynamsoft Barcode Reader.



Install barcode4nodejs, a Node.js wrapper built with the Dynamsoft C   Barcode Reader SDK.


npm i barcode4nodejs




Create a script file, test.js, to read barcodes from the PDF document:


var dbr = require('barcode4nodejs');
var barcodeTypes = dbr.formats.ALL;

dbr.initLicense("LICENSE-KEY");

let args = process.argv;
if (args.includes('-f')) {
  let fIndex = args.indexOf('-f');
  if (args[fIndex   1]) {
    (async function () {
      try {
        var result = await dbr.decodeFileAsync(args[fIndex   1], barcodeTypes, "");
        console.log(result);
        setTimeout(() => {
          console.log('terminated');
        }, 1000);
      } catch (error) {
        console.log(error);
      }
    })();
  } else {
    console.log('Please add a file.');
  }

}



Note: You need to replace the LICENSE-KEY with your own.


Run the script with the path to a PDF file:


node test.js -f 



The barcode content will be printed in the console.






  
  
  Source Code


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

Déclaration de sortie Cet article est reproduit à l'adresse : https://dev.to/yushulx/how-to-insert-barcodes-into-a-pdf-document-with-html5-and-javascript-32g9?1. En cas de violation, veuillez contacter study_golang@163 .comdelete

Dernier tutoriel Plus>

Pourquoi mon image d'arrière-plan CSS apparaît-elle?
Troubleshoot: Image d'arrière-plan CSS n'apparaissant pas Vous avez rencontré un problème où votre image d'arrière-plan échoue mal...

La programmation Publié le 2025-07-09
Puis-je migrer mon cryptage de McRypt à OpenSSL et décrypter les données cryptées McRypt à l'aide d'OpenSSL?
Mise à niveau de ma bibliothèque de chiffrement de McRypt à OpenSSL Puis-je mettre à niveau ma bibliothèque de cryptage à partir de McRypt à O...

La programmation Publié le 2025-07-09
Pourquoi ma configuration de GO à Homebrew provoque-t-elle des problèmes d'exécution de ligne de commande?
Brew Go Configuration vs Exécution de la ligne de commande Vous avez initialement installé aller à l'aide de Homebrew, un gestionnaire de ...

La programmation Publié le 2025-07-09
Pourquoi les expressions de lambda nécessitent-elles des variables "finales" ou "finales" valides "en Java?
Lambda Les expressions exigent des variables "finales" ou "efficacement finales" Le message d'erreur "variable ut...

La programmation Publié le 2025-07-09
Comment convertir une colonne Pandas DataFrame au format DateTime et filtrer par date?
Transformer la colonne Pandas DataFrame au format DateTime Scénario: Données dans un Pandas DataFrame existait souvent sous divers formats, ...

La programmation Publié le 2025-07-09
Recherchez la méthode de l'élément de script qui exécute actuellement JavaScript
Comment faire référence à l'élément de script qui a chargé le script en cours d'exécution comprendre le problème Dans certains scénari...

La programmation Publié le 2025-07-09
Comment implémenter des événements personnalisés en utilisant le modèle d'observateur en Java?
Création d'événements personnalisés dans java Les événements personnalisés sont indispensables dans de nombreux scénarios de programmation, ...

La programmation Publié le 2025-07-09
Comment rediriger plusieurs types d'utilisateurs (étudiants, enseignants et administrateurs) vers leurs activités respectives dans une application Firebase?
Red: comment rediriger plusieurs types d'utilisateurs vers des activités respectives Comprendre le problème dans une application de vo...

La programmation Publié le 2025-07-09
Analyse du langage fortement tapé CSS
L'une des façons de classer un langage de programmation est de la force ou de la faiblesse. Ici, «tapé» signifie si les variables sont connues au...

La programmation Publié le 2025-07-09
Comment surmonter les restrictions de redéfinition de la fonction de PHP?
surmonter les limitations de redéfinition de la fonction de Php dans php, définir une fonction avec le même nom plusieurs fois est un non. Ten...

La programmation Publié le 2025-07-09
Pourquoi une grille avec des colonnes 100% grid-template s'étend-elle au-delà du corps lors de l'utilisation du positionnement fixe?
La grille dépasse le corps avec 100% grid-template-columns Pourquoi une grille d'affichage avec 100% dans les colonnes de la grille s'...

La programmation Publié le 2025-07-09
Comment afficher correctement la date et l'heure actuelles dans le format "DD / MM / YYYY HH: MM: SS.SS" en Java?
Comment afficher la date et l'heure actuelles dans "dd / mm / yyyy hh: mm: ss.ss" format dans le code java fourni, le problème a...

La programmation Publié le 2025-07-09
Quelles ont été les restrictions sur l'utilisation de Current_timestamp avec des colonnes horodatotes dans MySQL avant la version 5.6.5?
Restrictions sur les colonnes horodat Clause actuelle_timestamp. Cette limitation s'est étendue aux entiers INT, BigInt et SmallInt lorsqu'...

La programmation Publié le 2025-07-09
`Console.log` montre la raison de l'exception de la valeur de l'objet modifié
objets et console.log: une bizarrerie démêlée lorsque vous travaillez avec des objets et console.log, vous pouvez rencontrer un comportement p...

La programmation Publié le 2025-07-09
La méthode de la base de données MySQL n'est pas nécessaire pour vider la même instance
Copie d'une base de données mysql sur la même instance sans vider copie une base de données sur la même instance mysql peut être faite san...

La programmation Publié le 2025-07-09

Classification Plus>

Apprendre le japonais Apprendre le coréen Apprendre le chinois Apprendre une langue étrangère Jeu Problème commun Périphériques technologiques IA Tutoriel logiciel La programmation Article