Cómo insertar códigos de barras en un documento PDF con HTML y JavaScript

Página delantera > Programación > Cómo insertar códigos de barras en un documento PDF con HTML y JavaScript

Cómo insertar códigos de barras en un documento PDF con HTML y JavaScript

Publicado el 2024-11-19

Navegar:620

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

Declaración de liberación Este artículo se reproduce en: https://dev.to/yushulx/how-to-insert-barcodes-into-a-pdf-document-with-html5-and-javascript-32g9?1 Si hay alguna infracción, por favor contacto Study_golang@163 .comeliminar

Último tutorial Más>

¿Por qué el DateTime de PHP :: Modify ('+1 mes') produce resultados inesperados?
modificando meses con php datetime: descubrir el comportamiento previsto cuando se trabaja con la clase de datetime de PHP, suma o ritir meses...

Programación Publicado el 2025-07-12
¿Cómo lidiar con la memoria en rodajas en la recolección de basura del idioma GO?
colección de basura en cortes de Go: un análisis detallado en Go, una porción es una matriz dinámica que hace referencia a una matriz subyacen...

Programación Publicado el 2025-07-12
$¿Por qué recibo un error de \ "clase \ 'Ziparchive \' no encontrado \" después de instalar Archive_Zip en mi servidor Linux?$
¿Por qué recibo un error de \ "clase \ 'Ziparchive \' no encontrado \" después de instalar Archive_Zip en mi servidor Linux?
class 'Ziparchive' no encontrado Error al instalar Archive_Zip en Linux Server Sytom: cuando intentan ejecutar un script que utiliza...

Programación Publicado el 2025-07-12
¿Cómo convertir eficientemente las zonas horarias en PHP?
Conversión de zona horaria eficiente en php en PHP, el manejo de las zonas horarias puede ser una tarea directa. Esta guía proporcionará un méto...

Programación Publicado el 2025-07-12
¿Cómo localizar la imagen de fondo CSS de la derecha?
imagen de fondo de la derecha con css En el reino del desarrollo web, a menudo es deseable colocar precisamente imágenes de fondo dentro de el...

Programación Publicado el 2025-07-12
¿Cómo puedo mantener la representación de celda JTable personalizada después de la edición de la celda?
manteniendo la representación de la celda JTable después de la edición de celda en una jtable, implementar capacidades de representación y edi...

Programación Publicado el 2025-07-12
¿Por qué las imágenes todavía tienen fronteras en Chrome? `Border: Ninguno;` Solución inválida
eliminando el borde de la imagen en Chrome un problema frecuente encontrado cuando se trabaja con imágenes en Chrome e IE9 es la apariencia de...

Programación Publicado el 2025-07-12
¿Por qué no `cuerpo {margen: 0; } `¿Siempre elimina el margen superior en CSS?
abordando la eliminación del margen del cuerpo en css para desarrolladores web novatos, eliminar el margen del elemento corporal puede ser una...

Programación Publicado el 2025-07-12
¿Cómo evitar fugas de memoria al cortar el lenguaje GO?
Memory Leak in Go Slices Entender las filtraciones de memoria en cortes GO puede ser un desafío. Este artículo tiene como objetivo proporciona...

Programación Publicado el 2025-07-12
$¿Cómo corregir \ "mysql_config no encontrado \" error al instalar mysql-python en Ubuntu/Linux?$
¿Cómo corregir \ "mysql_config no encontrado \" error al instalar mysql-python en Ubuntu/Linux?
mysql-python Error de instalación: "mysql_config no encontrado" intentando instalar mysql-python en ubuntu/linux box puede encontrar...

Programación Publicado el 2025-07-12
`console.log` muestra el motivo de la excepción de valor de objeto modificado
objetos y console.log: una rareza desordenada cuando trabaja con objetos y console.log, puede encontrar un comportamiento peculiar. Desenvuelv...

Programación Publicado el 2025-07-12
Implementación dinámica reflectante de la interfaz GO para la exploración del método RPC
Reflection para la implementación de la interfaz dinámica en Go Reflection In GO es una herramienta poderosa que permite la inspección y manip...

Programación Publicado el 2025-07-12
¿Cómo los map.entry de Java y simplificando la gestión de pares de valores clave?
una colección integral para pares de valor: Introducción de Java Map.entry y SimpleEntry en Java, al definir una colección donde cada elemento...

Programación Publicado el 2025-07-12
$¿Qué método es más eficiente para la detección de Point-in-Polygon: Ray Tracing o Matplotlib \ 's Rath.Contains_Points?$
¿Qué método es más eficiente para la detección de Point-in-Polygon: Ray Tracing o Matplotlib \ 's Rath.Contains_Points?
Detección eficiente de Point-in-Polygon en python determinando si un punto se encuentra dentro de un polígono es una tarea frecuente en la geome...

Programación Publicado el 2025-07-12
Por qué HTML no puede imprimir números y soluciones de página
no puedo imprimir números de página en las páginas html? Descripción del problema: a pesar de investigar extensamente, los números de página ...

Programación Publicado el 2025-07-12

Clasificación Más>

Aprende japonés Aprender coreano Aprender chino Aprender idioma extranjero Juego Problema comun Periféricos tecnológicos AI Tutoriales de software Programación Artículo