Cara Memasukkan Kod Bar ke dalam Dokumen PDF dengan HTMLnd JavaScript

Memasukkan kod bar ke dalam dokumen PDF boleh menyelaraskan pengurusan dokumen, penjejakan dan aliran kerja pemprosesan data dengan ketara. Kod bar berfungsi sebagai pengecam unik, membolehkan kemasukan data automatik, dapatkan semula cepat dan keselamatan yang dipertingkatkan. Dalam artikel ini, kami akan menunjukkan cara memanfaatkan HTML5, JavaScript dan Dynamsoft Document Viewer SDK untuk menjana dan membenamkan kod bar ke dalam dokumen PDF.

Video Demo Editor PDF Web

Demo Dalam Talian

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

Prasyarat

• Dynamsoft Document Viewer: SDK JavaScript ini membenarkan paparan lancar dan anotasi pelbagai format dokumen, termasuk PDF dan fail imej biasa seperti JPEG, PNG , TIFF dan BMP. Dengan set ciri yang mantap, anda boleh memaparkan PDF, menavigasi halaman, meningkatkan kualiti imej dan menyimpan dokumen beranotasi. Pasang pakej daripada npm untuk bermula.

• Lesen Percubaan Dynamsoft Capture Vision: Untuk mengakses keupayaan penuh Dynamsoft SDK, daftar untuk mendapatkan lesen percubaan percuma 30 hari. Percubaan ini menawarkan akses lengkap kepada semua ciri, membolehkan anda meneroka SDK secara mendalam.

Langkah-langkah untuk Melaksanakan Editor Dokumen PDF dalam HTML5 dan JavaScript

Dalam perenggan berikut, kami akan membimbing anda melalui proses mencipta editor dokumen PDF berasaskan web dengan keupayaan memasukkan kod bar. Editor akan membolehkan pengguna memuatkan dokumen PDF, memasukkan kod bar sebagai anotasi dan menyimpan fail PDF yang diubah suai secara setempat.

Langkah 1: Sertakan Dynamsoft Document Viewer SDK

Dalam bahagian fail HTML anda, tambahkan teg skrip berikut untuk memasukkan 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>

Langkah 2: Aktifkan Dynamsoft Document Viewer

1. Dalam index.html, cipta elemen input untuk kunci lesen dan butang untuk mengaktifkan SDK:
   

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

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

   Penjelasan

   • EnjinResourcePath mesti menghala ke lokasi fail enjin Dynamsoft Document Viewer.
   • setProcessingHandler menetapkan penapis imej untuk meningkatkan kualiti imej.
   • Objek documentManager digunakan untuk mengurus pemapar dan editor dokumen.

Langkah 3: Cipta Pemapar PDF Web dengan Komponen Sedia Untuk Digunakan

SDK Pemapar Dokumen Dynamsoft menyediakan editor dokumen terbina dalam yang memerlukan kod minimum untuk membina aplikasi pemapar PDF web.

1. Buat elemen bekas untuk pemapar dokumen dalam 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>
   

   Parameter uiConfig menentukan konfigurasi UI lalai untuk pemapar dokumen, termasuk alat anotasi.

Langkah 4: Tambah Butang Tersuai untuk Memasukkan Kod Bar ke dalam Dokumen PDF

Dynamsoft Document Viewer membenarkan penyesuaian elemen UI dan pengendali acara. Menurut dokumentasi rasmi, anda boleh menambah butang tersuai.

Butang Kod Bar Tersuai dengan Ikon Bahan Google

Tentukan objek butang tersuai dalam 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);
    }

}




Nama kelas menunjuk ke fon Google. Gunakan kelas ikon bahan untuk memaparkan ikon qr_code dalam butang.



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





  
  
  Tambahkan Butang Kod Bar pada Bar Alat


Untuk menambah butang pada bar alat, ubah suai parameter uiConfig dalam fungsi showViewer:



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





  
  
  Tekan Butang untuk Menimbulkan Dialog Penjanaan Kod Bar


Apabila butang kod bar diklik, dialog pop timbul akan muncul untuk pengguna memasukkan kandungan kod bar dan memilih jenis kod bar:



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




Dialog mengandungi elemen berikut:


Senarai lungsur turun untuk memilih jenis kod bar.
Medan input untuk memasukkan kandungan kod bar.
Butang OK untuk menyerahkan data.
Butang Batal untuk menutup pop timbul tanpa menyerahkan.


Ini kod penuh:



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





Selepas mendapatkan semula kandungan dan taip kod bar, gunakan bwipjs untuk melukis kod bar yang dijana pada kanvas. Kemudian, tukarkan kanvas kepada gumpalan dan masukkannya sebagai anotasi pada dokumen PDF.



editViewer.on("addQr", addQr);





  
  
  Langkah 6: Simpan Dokumen PDF dengan Kod Bar ke Cakera Tempatan


Buat fungsi muat turun() dan ikat pada butang muat turun dalam bar alat:



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




Apabila menyimpan dokumen PDF, pilihan saveAnnotation ditetapkan untuk diratakan, memastikan anotasi, termasuk kod bar, dibenamkan dalam dokumen.


  
  
  Menjalankan Editor Dokumen PDF Web




Mulakan pelayan web dalam direktori akar projek anda:


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



Buka http://localhost:8000 dalam penyemak imbas web anda.
Muatkan dokumen PDF.

Masukkan kod bar sebagai anotasi ke dalam dokumen PDF.






  
  
  Membaca Kod Bar daripada Dokumen PDF


Setelah dokumen PDF disimpan ke cakera setempat anda, anda boleh mengesahkan kandungan kod bar dengan membacanya menggunakan Pembaca Kod Bar Dynamsoft.



Pasang barcode4nodejs, pembalut Node.js yang dibina dengan 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);
}




Buat fail skrip, test.js, untuk membaca kod bar daripada dokumen PDF:


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



Nota: Anda perlu menggantikan KUNCI LESEN dengan KUNCI anda sendiri.


Jalankan skrip dengan laluan ke fail 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);
    }

}



Kandungan kod bar akan dicetak dalam konsol.






  
  
  Kod Sumber


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


          

            
        
Atas ialah kandungan terperinci Cara Memasukkan Kod Bar ke dalam Dokumen PDF dengan HTMLnd JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!