将条形码插入 PDF 文档可以显着简化文档管理、跟踪和数据处理工作流程。条形码作为唯一标识符，可实现自动数据输入、快速检索并增强安全性。在本文中，我们将演示如何利用 HTML5、JavaScript 和 Dynamsoft Document Viewer SDK 生成条形码并将其嵌入到 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。
在以下段落中，我们将引导您完成创建具有条形码插入功能的基于 Web 的 PDF 文档编辑器的过程。该编辑器将使用户能够加载 PDF 文档、插入条形码作为注释以及将修改后的 PDF 文件保存在本地。
在
中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>
在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);
}
}
说明
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 配置，包括注释工具。
Dynamsoft Document Viewer 允许自定义 UI 元素和事件处理程序。根据官方文档，可以添加自定义按钮。
在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);
创建 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服务器：
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文档保存到本地磁盘后，您可以通过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中文网其他相关文章！
