집 >웹 프론트엔드 >JS 튜토리얼 >HTMLnd JavaScript를 사용하여 PDF 문서에 바코드를 삽입하는 방법

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

Linda Hamilton원래의: 2024-11-16 16:11:03285검색

PDF 문서에 바코드를 삽입하면 문서 관리, 추적 및 데이터 처리 작업 흐름을 크게 간소화할 수 있습니다. 바코드는 고유한 식별자 역할을 하여 자동화된 데이터 입력, 빠른 검색 및 보안 강화를 가능하게 합니다. 이 기사에서는 HTML5, JavaScript 및 Dynamsoft Document Viewer SDK를 활용하여 바코드를 생성하고 PDF 문서에 삽입하는 방법을 설명합니다.

웹 PDF 편집기 데모 비디오

온라인 데모

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

전제조건

Dynamsoft Document Viewer: 이 JavaScript SDK를 사용하면 PDF 및 JPEG, PNG와 같은 일반 이미지 파일을 포함한 다양한 문서 형식을 원활하게 보고 주석을 추가할 수 있습니다. , TIFF, BMP. 강력한 기능 세트를 사용하여 PDF를 렌더링하고, 페이지를 탐색하고, 이미지 품질을 향상하고, 주석이 달린 문서를 저장할 수 있습니다. 시작하려면 npm에서 패키지를 설치하세요.
Dynamsoft Capture Vision 평가판 라이센스: Dynamsoft SDK의 전체 기능에 액세스하려면 30일 무료 평가판 라이센스에 등록하세요. 이 평가판은 모든 기능에 대한 완전한 액세스를 제공하므로 SDK를 심층적으로 탐색할 수 있습니다.

HTML5 및 JavaScript에서 PDF 문서 편집기를 구현하는 단계

다음 단락에서는 바코드 삽입 기능이 있는 웹 기반 PDF 문서 편집기를 만드는 과정을 안내해 드립니다. 편집기를 사용하면 사용자는 PDF 문서를 로드하고, 바코드를 주석으로 삽입하고, 수정된 PDF 파일을 로컬에 저장할 수 있습니다.

1단계: Dynamsoft Document Viewer SDK 포함

HTML 파일 섹션에 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>

2단계: Dynamsoft 문서 뷰어 활성화

index.html에서 라이센스 키에 대한 입력 요소와 SDK 활성화 버튼을 생성합니다.
```
<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);
    }

}

설명

engineResourcePath는 Dynamsoft Document Viewer 엔진 파일의 위치를 가리켜야 합니다.
setProcessingHandler는 이미지 품질 향상을 위해 이미지 필터를 설정합니다.
documentManager 개체는 문서 뷰어 및 편집기를 관리하는 데 사용됩니다.

3단계: 즉시 사용 가능한 구성 요소로 웹 PDF 뷰어 만들기

Dynamsoft Document Viewer SDK는 웹 PDF 뷰어 애플리케이션을 구성하는 데 최소한의 코드가 필요한 내장 문서 편집기를 제공합니다.

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>

uiConfig 매개변수는 주석 도구를 포함한 문서 뷰어의 기본 UI 구성을 지정합니다.

4단계: PDF 문서에 바코드를 삽입하기 위한 사용자 정의 버튼 추가

Dynamsoft Document Viewer를 사용하면 UI 요소와 이벤트 핸들러를 사용자 정의할 수 있습니다. 공식 문서에 따르면 사용자 정의 버튼을 추가할 수 있습니다.

Google의 머티리얼 아이콘이 포함된 맞춤 바코드 버튼

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

}




className은 Google 글꼴을 가리킵니다. 버튼에 qr_code 아이콘을 표시하려면 Material-icons 클래스를 사용하세요.



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





  
  
  도구 모음에 바코드 버튼 추가


툴바에 버튼을 추가하려면 showViewer 함수에서 uiConfig 매개변수를 수정하세요.



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





  
  
  버튼을 눌러 바코드 생성 대화 상자 팝업


바코드 버튼을 클릭하면 사용자가 바코드 내용을 입력하고 바코드 유형을 선택할 수 있는 팝업 대화 상자가 나타납니다.



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




대화상자에는 다음 요소가 포함되어 있습니다.


바코드 유형 선택을 위한 드롭다운 목록
바코드 내용을 입력하는 입력창입니다.
데이터 제출을 위한 확인 버튼
제출하지 않고 팝업을 닫는 취소 버튼입니다.


전체 코드는 다음과 같습니다.



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





바코드 내용과 유형을 검색한 후 bwipjs를 사용하여 생성된 바코드를 캔버스에 그립니다. 그런 다음 캔버스를 블롭으로 변환하고 PDF 문서에 주석으로 삽입합니다.



editViewer.on("addQr", addQr);





  
  
  6단계: 바코드가 포함된 PDF 문서를 로컬 디스크에 저장


download() 함수를 생성하고 툴바의 다운로드 버튼에 바인딩합니다.



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




PDF 문서를 저장할 때 saveAnnotation 옵션이 병합으로 설정되어 바코드를 포함한 주석이 문서에 삽입되도록 합니다.


  
  
  웹 PDF 문서 편집기 실행




프로젝트의 루트 디렉터리에서 웹 서버를 시작합니다.


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



웹 브라우저에서 http://localhost:8000을 엽니다.
PDF 문서를 로드하세요.

PDF 문서에 바코드를 주석으로 삽입합니다.






  
  
  PDF 문서에서 바코드 읽기


PDF 문서가 로컬 디스크에 저장되면 Dynamsoft Barcode Reader로 읽어 바코드 내용을 확인할 수 있습니다.



Dynamsoft C Barcode Reader SDK로 구축된 Node.js 래퍼인 바코드4nodejs를 설치하세요.


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




PDF 문서에서 바코드를 읽는 스크립트 파일 test.js를 만듭니다.


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



참고: LICENSE-KEY를 자신의 것으로 교체해야 합니다.


PDF 파일 경로를 사용하여 스크립트를 실행하세요.


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

}



바코드 내용이 콘솔에 인쇄됩니다.






  
  
  소스 코드


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


          

            
        위 내용은 HTMLnd JavaScript를 사용하여 PDF 문서에 바코드를 삽입하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

JavaScript html5 html npm Object define for select include Directory Filter class Event JS console function default this location display canvas input github http https ui Access

성명：

이전 기사：JavaScript의 객체 배열에서 속성을 효율적으로 제거하려면 어떻게 해야 합니까?다음 기사：JavaScript의 객체 배열에서 속성을 효율적으로 제거하려면 어떻게 해야 합니까?