HTMLnd JavaScript를 사용하여 PDF 문서에 바코드를 삽입하는 방법

첫 장 > 프로그램 작성 > HTMLnd JavaScript를 사용하여 PDF 문서에 바코드를 삽입하는 방법

HTMLnd JavaScript를 사용하여 PDF 문서에 바코드를 삽입하는 방법

2024년 11월 19일에 게시됨

검색:199

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

릴리스 선언문 이 기사는 https://dev.to/yushulx/how-to-insert-barcodes-into-a-pdf-document-with-html5-and-javascript-32g9?1에서 복제됩니다. 침해가 있는 경우, 문의 Study_golang@163 .comdelete

최신 튜토리얼 더>

고유 키 제약 조건이 있는 MySQL 데이터베이스에서 중복 레코드를 제거하는 방법은 무엇입니까?
MySQL 데이터베이스에서 중복 레코드 제거: 고유한 핵심 솔루션데이터 무결성을 유지하는 것은 모든 데이터베이스의 효율적인 운영에 매우 중요합니다. 이 경우 'id'와 'title' 열이 있는 테이블이 있습니다. 여기서 'title&...

프로그램 작성 2024년 11월 19일에 게시됨
CPU 사용률을 최소화하면서 Go에서 채널 준비를 갖춘 비동기 통신을 달성하는 방법은 무엇입니까?
채널 준비를 통한 비동기 통신Go에서 채널은 고루틴 간의 동시 통신을 촉진합니다. 버퍼링된 송신 채널과 버퍼링되지 않은 수신 채널을 처리할 때 두 채널을 동시에 선택하여 통신 흐름을 최적화할 수 있습니다. 이 문서에서는 CPU 사용률을 최소화하면서 이 기능을 구현하는 ...

프로그램 작성 2024년 11월 19일에 게시됨
$\"vendor/autoload.php\"를 찾을 수 없는 이유: Composer 자동 로드 오류 해결 가이드$
\"vendor/autoload.php\"를 찾을 수 없는 이유: Composer 자동 로드 오류 해결 가이드
"require(vendor/autoload.php): 스트림을 열지 못했습니다." 오류 해결 중문제 설명: PHP 스크립트 시작 부분에서 다음 오류가 발생합니다:Warning: require(vendor/autoload.php): failed to ...

프로그램 작성 2024년 11월 19일에 게시됨
현실적인 API 상호 작용을 위해 Python의 요청 모듈을 모의하는 방법은 무엇입니까?
모의 Python 요청 시뮬레이션된 API 상호 작용을 위한 모듈API와 상호 작용하는 Python 코드를 포괄적으로 테스트하여 요청 모듈을 효과적으로 모의하기 위한 탐구 결정적이다. 다음은 사용자 지정 응답으로 요청.get() 호출을 모의하는 단계별 접근 방식입니다....

프로그램 작성 2024년 11월 19일에 게시됨
## 녹아웃 뷰 모델: 객체 리터럴 또는 함수 – 어느 것이 귀하에게 적합합니까?
KO 뷰 모델: 객체 리터럴과 함수 비교Knockout JS에서 뷰 모델은 객체 리터럴이나 함수를 사용하여 선언될 수 있습니다. 두 가지 모두의 주요 목적은 관찰 가능한 속성과 계산된 함수를 정의하는 것이지만, 이들 간의 주요 차이점은 캡슐화, 유연성 및 코드 구성에 ...

프로그램 작성 2024년 11월 19일에 게시됨
MySQL 스크립트에서 "SET NAMES" 사용을 피해야 하는 이유는 무엇입니까?
"SET NAMES" 사용 시 고려 사항MySQL 데이터베이스 처리와 관련하여 "SET NAMES"의 올바른 사용법이 논의 주제였습니다. O'Reilly의 "고성능 MySQL"에 명시된 바와 같이 스크립트 시...

프로그램 작성 2024년 11월 19일에 게시됨
`if` 문 너머: 명시적인 `bool` 변환이 있는 유형을 형변환 없이 사용할 수 있는 다른 곳은 어디입니까?
형변환 없이 허용되는 bool로의 상황별 변환귀하의 클래스는 bool로의 명시적인 변환을 정의하여 해당 인스턴스 't'를 조건문에서 직접 사용할 수 있도록 합니다. 그러나 이 명시적인 변환은 다음과 같은 질문을 제기합니다. 캐스트 없이 't'...

프로그램 작성 2024년 11월 19일에 게시됨
Hibernate를 사용하여 InnoDB 엔진으로 MySQL 테이블이 생성되었는지 확인하는 방법은 무엇입니까?
Hibernate를 사용하여 MySQL InnoDB 테이블을 생성하는 방법JPA와 함께 Hibernate를 활용할 때 사용자는 InnoDB를 사용하여 MySQL 테이블을 생성하는 데 종종 어려움을 겪습니다. MyISAM 대신 엔진. 이 문제를 해결하기 위해 널리 권장되...

프로그램 작성 2024년 11월 19일에 게시됨
하위 클래스 객체에 대한 슈퍼클래스 참조 사용
User라는 클래스를 만든 다음 Employee라는 User를 확장하는 하위 클래스를 만드는 시나리오를 생각해 보세요. 일반적으로 다음을 사용하여 사용자 인스턴스를 만듭니다. User user = new User(); 여기서 User는 변수 user의 유형이고, use...

프로그램 작성 2024년 11월 19일에 게시됨
Go에서 차단하지 않고 Stdin에서 데이터를 확인하는 방법은 무엇입니까?
Go를 사용하여 Stdin에서 데이터 확인Go에서 명령 및 파이프라인으로 작업할 때 표준 입력(stdin)과 상호 작용하는 것이 중요한 작업인 경우가 많습니다. 그러나 프로그램 실행을 차단하지 않고 stdin에 데이터가 있는지 확인하는 것은 어려울 수 있습니다.os.S...

프로그램 작성 2024년 11월 19일에 게시됨
JavaScript에서 const를 사용해야 하는 경우: 코드 최적화 또는 과도한 작업?
JavaScript의 Const: 코드 성능 최적화 및 의미 명확성 촉진JavaScript에서 const 키워드의 도입은 최적의 방법에 대한 논의를 촉발시켰습니다. 용법. var 키워드와 유사해 보일 수 있지만 const를 사용하면 코드 효율성을 높이고 의미적 정확성을...

프로그램 작성 2024년 11월 19일에 게시됨
예외적인 상황에 대해서는 언제 예외를 유보해야 합니까?
예외: 예외적인 상황을 위해 예약됨일반적인 상황에도 불구하고 예외를 보수적으로 사용하는 것이 종종 옹호됩니다. 이 철학의 이면에 있는 이유를 살펴보면 무수히 많은 고려 사항이 있음을 알 수 있습니다.의미 남용완전히 예외적인 상황을 위해 설계된 예외는 제어 흐름 메커니즘...

프로그램 작성 2024년 11월 19일에 게시됨
고유 ID를 유지하고 중복 이름을 처리하면서 PHP에서 두 개의 연관 배열을 어떻게 결합합니까?
PHP에서 연관 배열 결합PHP에서는 두 개의 연관 배열을 단일 배열로 결합하는 것이 일반적인 작업입니다. 다음 요청을 고려하십시오.문제 설명:제공된 코드는 두 개의 연관 배열 $array1 및 $array2를 정의합니다. 목표는 두 배열의 모든 키-값 쌍을 통합하는 ...

프로그램 작성 2024년 11월 19일에 게시됨
HTML 웹페이지에서 CSS와 Javascript 코드를 어디에 배치해야 합니까?
HTML 웹페이지에 CSS 및 Javascript 코드 구현웹 개발 과정에서 CSS 및 Javascript 코드의 적절한 배치를 결정하는 것이 중요합니다. . 이러한 파일은 웹페이지의 스타일을 지정하고 기능을 향상시키는 데 중요한 역할을 합니다. 와 같은 코드가 나타나...

프로그램 작성 2024년 11월 19일에 게시됨
실시간 통신을 위해 Go에서 WebSocket 사용
채팅 애플리케이션, 실시간 알림, 협업 도구 등 실시간 업데이트가 필요한 앱을 구축하려면 기존 HTTP보다 더 빠르고 대화형인 통신 방법이 필요합니다. 이것이 바로 WebSockets가 필요한 곳입니다! 오늘은 Go에서 WebSocket을 사용하여 애플리케이션에 실시간...

프로그램 작성 2024년 11월 19일에 게시됨