How to Insert Barcodes into a PDF Document with HTMLnd JavaScript-JS Tutorial-php.cn

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:

<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>

Copy after login

Step 2: Activate Dynamsoft Document Viewer

In index.html, create an input element for the license key and a button to activate the SDK:
```
<input type="text"
    placeholder="LICENSE-KEY"
   >
```
Copy after login
Copy after login

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

}

Copy after login

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:
```
<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>
```
Copy after login
Copy after login
Copy after login
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:

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

}
Copy after login
Copy after login



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



<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 })
    });
}
Copy after login




  
  
  Add the Barcode Button to the Toolbar


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



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




  
  
  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:



<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>
Copy after login



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:



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

Copy after login



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.



editViewer.on("addQr", addQr);
Copy after login




  
  
  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:



<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>
Copy after login



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:


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);
    }
}
Copy after login


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.


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);
}
Copy after login



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


<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>
Copy after login
Copy after login
Copy after login


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


Run the script with the path to a PDF file:


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

Copy after login
Copy after login


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

}
Copy after login
Copy after login


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


          

            
        The above is the detailed content of How to Insert Barcodes into a PDF Document with HTMLnd JavaScript. For more information, please follow other related articles on the PHP Chinese website!