Como inserir códigos de barras em um documento PDF com HTML e JavaScript

Primeira página > Programação > Como inserir códigos de barras em um documento PDF com HTML e JavaScript

Como inserir códigos de barras em um documento PDF com HTML e JavaScript

Publicado em 19/11/2024

Navegar:637

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

Declaração de lançamento Este artigo está reproduzido em: https://dev.to/yushulx/how-to-insert-barcodes-into-a-pdf-document-with-html5-and-javascript-32g9?1 Se houver alguma violação, por favor entre em contato com study_golang@163 .comdelete

Tutorial mais recente Mais>

Como eliminar registros duplicados em um banco de dados MySQL com restrição de chave exclusiva?
Expurgando registros duplicados de um banco de dados MySQL: uma solução chave exclusivaManter a integridade dos dados é crucial para a operação eficie...

Programação Publicado em 19/11/2024
Como obter comunicação assíncrona com prontidão de canal em Go e, ao mesmo tempo, minimizar a utilização da CPU?
Comunicação assíncrona com prontidão do canalNo Go, os canais facilitam a comunicação simultânea entre goroutines. Ao lidar com canais de envio com bu...

Programação Publicado em 19/11/2024
$Por que não consigo encontrar \"vendor/autoload.php\": um guia para resolver erros de carregamento automático do Composer$
Por que não consigo encontrar \"vendor/autoload.php\": um guia para resolver erros de carregamento automático do Composer
Resolvendo "require(vendor/autoload.php): falha ao abrir stream" ErroDescrição do problema: Encontrando o seguinte erro no início do script ...

Programação Publicado em 19/11/2024
Como simular o módulo de solicitações do Python para interações de API realistas?
Mocking Pythons solicita módulo para interações simuladas de APIEm nossa busca para testar de forma abrangente o código Python que interage com APIs, ...

Programação Publicado em 19/11/2024
## Modelos Knockout View: Literais de objetos ou funções – Qual é o certo para você?
KO View Models: Object Literals vs. FunctionsNo Knockout JS, View Models podem ser declarados usando literais de objeto ou funções. Embora o objetivo ...

Programação Publicado em 19/11/2024
Por que devemos evitar o uso de “SET NAMES” em scripts MySQL?
Considerações para usar "SET NAMES"No contexto da manipulação de banco de dados MySQL, o uso adequado de "SET NAMES" tem sido um t...

Programação Publicado em 19/11/2024
Além das instruções `if`: onde mais um tipo com uma conversão `bool` explícita pode ser usado sem conversão?
Conversão contextual para bool permitida sem conversãoSua classe define uma conversão explícita para bool, permitindo que você use sua instância '...

Programação Publicado em 19/11/2024
Como garantir que as tabelas MySQL sejam criadas com o mecanismo InnoDB usando o Hibernate?
Como criar tabelas MySQL InnoDB usando o HibernateAo utilizar o Hibernate com JPA, os usuários geralmente encontram um desafio na criação de tabelas M...

Programação Publicado em 19/11/2024
Variedade
Métodos são fns que podem ser chamados em objetos Arrays são objetos, portanto também possuem métodos em JS. slice(begin): extrai parte do arr...

Programação Publicado em 19/11/2024
Usando uma referência de superclasse para um objeto de subclasse
Considere um cenário onde criamos uma classe chamada User e então criamos uma subclasse que estende User chamada Employee. Normalmente, criamos uma in...

Programação Publicado em 19/11/2024
Como verificar dados em Stdin sem bloquear em Go?
Verificação de dados em Stdin com GoNo Go, interagir com entrada padrão (stdin) costuma ser uma tarefa crucial ao trabalhar com comandos e pipelines. ...

Programação Publicado em 19/11/2024
Quando você deve usar const em JavaScript: otimizando o código ou exagerando?
Const em JavaScript: otimizando o desempenho do código e facilitando a clareza semânticaEm JavaScript, a introdução da palavra-chave const gerou discu...

Programação Publicado em 19/11/2024
Quando as exceções devem ser reservadas para circunstâncias excepcionais?
Exceções: reservadas para circunstâncias excepcionaisApesar de sua prevalência, o uso conservador de exceções é frequentemente defendido. Investigar a...

Programação Publicado em 19/11/2024
Como combinar dois arrays associativos em PHP preservando IDs exclusivos e manipulando nomes duplicados?
Combinando matrizes associativas em PHPEm PHP, combinar duas matrizes associativas em uma única matriz é uma tarefa comum. Considere a seguinte solici...

Programação Publicado em 19/11/2024
Onde o código CSS e Javascript deve ser colocado em páginas HTML?
Implementação de código CSS e Javascript em páginas HTMLNo processo de desenvolvimento web, determinar o posicionamento apropriado de código CSS e Jav...

Programação Publicado em 19/11/2024

Classificação Mais>

Aprenda japonês Aprender coreano Aprenda chinês Aprender língua estrangeira Jogo Problema comum Periféricos de tecnologia IA Tutorial de software Programação Artigo