如何使用 HTMLnd JavaScript 將條碼插入 PDF 文檔-js教程-PHP中文網

將條碼插入 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 文件檢視器

在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：使用即用元件建立 Web PDF 檢視器

Dynamsoft 文件檢視器 SDK 提供了一個內建文件編輯器，只需最少的程式碼即可建立 Web 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 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 文件編輯器




在專案的根目錄中啟動一個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);
    }
}
登入後複製


在網頁瀏覽器中開啟 http://localhost:8000。 
載入 PDF 文件。 

將條碼插入 PDF 文件。 






  
  
  從 PDF 文件中讀取條碼


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



安裝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);
}
登入後複製



建立腳本檔案 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 替換為您自己的。 


使用 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中文網其他相關文章！