搜尋

首頁 >web前端 >js教程 >如何使用 HTMLnd JavaScript 將條碼插入 PDF 文檔

如何使用 HTMLnd JavaScript 將條碼插入 PDF 文檔

Linda Hamilton
Linda Hamilton原創
2024-11-16 16:11:03285瀏覽

將條碼插入 PDF 文件可以顯著簡化文件管理、追蹤和資料處理工作流程。條碼作為唯一標識符，可實現自動資料輸入、快速檢索並增強安全性。在本文中，我們將示範如何利用 HTML5、JavaScript 和 Dynamsoft Document Viewer SDK 來產生條碼並將其嵌入到 PDF 文件中。

Web 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 文件編輯器的步驟

在以下段落中，我們將引導您完成建立具有條碼插入功能的基於 Web 的 PDF 文件編輯器的過程。此編輯器將使用戶能夠載入 PDF 文件、插入條碼作為註釋以及將修改後的 PDF 文件保存在本機。

步驟 1：包含 Dynamsoft 文件檢視器 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 文件檢視器

  1. 在index.html中，為許可證金鑰建立一個輸入元素和一個用於啟動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);
    }

}

    說明

    • engineResourcePath 必須指向 Dynamsoft Document Viewer 引擎檔案的位置。
    • setProcessingHandler 設定影像濾鏡以增強影像品質。
    • documentManager 物件用於管理文件檢視器和編輯器。

步驟 3： 使用即用元件建立 Web PDF 檢視器

Dynamsoft 文件檢視器 SDK 提供了一個內建文件編輯器，只需最少的程式碼即可建立 Web PDF 檢視器應用程式。

  1. 在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 Material 圖示的自訂條碼按鈕

在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 字型。使用material-icons類別在按鈕中顯示qr_code圖示。 
    

    


    <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 在畫布上繪製產生的條碼。然後，將畫布轉換為 Blob 並將其作為註釋插入 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 選項設定為拼合，確保註解（包括條碼）嵌入文件中。 
    


    
  
  
  運行 Web PDF 文件編輯器

    


      

    1. 

      在專案的根目錄中啟動一個Web伺服器：
      

      

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

      


      2. 

    2. 在網頁瀏覽器中開啟 http://localhost:8000。 
      3. 

    3. 載入 PDF 文件。 
      4. 

    4. 

      將條碼插入 PDF 文件。 
      


      How to Insert Barcodes into a PDF Document with HTMLnd JavaScript
      

      5. 

    


    
  
  
  從 PDF 文件中讀取條碼

    


    PDF文件儲存到本機磁碟後，您可以透過Dynamsoft Barcode Reader讀取它來驗證條碼內容。 
    


      

    1. 

      安裝barcode4nodejs，這是一個使用 Dynamsoft C Barcode Reader SDK 建構的 Node.js 包裝器。 
      

      

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

      


      2. 

    2. 

      建立腳本檔案 test.js，用於從 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>

      



      注意：您需要將 LICENSE-KEY 替換為您自己的。 
      

      3. 

    3. 

      使用 PDF 檔案的路徑執行腳本：
      

      

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


      

      4. 

    4. 

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

}

      



      條碼內容將列印在控制台中。 
      


      How to Insert Barcodes into a PDF Document with HTMLnd JavaScript
      

      5. 

    


    
  
  
  原始碼

    


    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
    陳述：
    本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
    上一篇：如何有效地從 JavaScript 中的物件陣列中刪除屬性？下一篇：如何有效地從 JavaScript 中的物件陣列中刪除屬性？

    相關文章

    看更多