首页 > 文章 > web前端 > 如何使用 HTMLnd JavaScript 将条形码插入 PDF 文档

如何使用 HTMLnd JavaScript 将条形码插入 PDF 文档

Linda Hamilton原创: 2024-11-16 16:11:03220浏览

将条形码插入 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中文网其他相关文章！

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

上一篇：How can I efficiently remove properties from an array of objects in JavaScript?下一篇：Is Node.js Vulnerable to SQL Injection Without Prepared Statements?

查看更多