HTML && jQuery 项目 PDF 批注插件库在线版 API 示例教程

ElasticPDF_新国产PDF编辑器2025-03-22 11:29

本文章介绍 HTML && jQuery Web项目中 PDF 批注插件库 ElasticPDF 在线版 API 示例教程，API 包含 ① 导出批注后PDF数据；② 导出纯批注 json 数据；③ 加载旧批注；④ 切换文档；⑤ 切换用户；⑥ 清空批注 等数据处理功能，可满足通常业务需求。本教程可用于月付许可和在线测试版，欢迎 联系我们 咨询和获取接入 key。

0 ElasticPDF 产品介绍

ElasticPDF基于开源pdf.js，增加了多种开箱即用的 PDF 批注功能。代码包延续了 pdf.js-dist 独立且完全离线的结构风格，仅增加了用于支持批注的离线 Javascript 代码，可以快速完美集成到任何可以运行Javascript, HTML, CSS 的项目环境中，在公网及内网环境都可以完美的运行。

根据不同的功能及预算需求，有两个版本的产品可供选择，两者仅在最终的批注保存阶段有区别，产品 Demo 地址如下：

① 批注合成版: demos.libertynlp.com/#/pdfjs-ann...

② 专业批注版: www.elasticpdf.com/demo

1 导入页面 HTML 及初始化

首先将以下的 HTML 代码导入到目标页面，其中包含了初始化代码 initialPDFEditor() 和接收所有回报信息的函数 listenPDFEditorMessage()，所有导出的 PDF数据，批注数据 都在函数listenPDFEditorMessage() 下，可以与后续的业务融合。

html 复制代码 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
		<link rel="stylesheet" href="https://pdfmaster.libertynlp.com/annotation/css/trail-style.css">
	</head>
	<body style="overflow: auto;">
		<div class='project-title'>
			<img src="elasticpdf-logo.png" alt="" />
			<h2>HTML && jQuery项目在线版 API 示例教程</h2>
			<a style="cursor: pointer;text-decoration: none;" href='https://www.elasticpdf.com/contact-us.html'
				target="_blank">
				<div class='message-div info-message'>
					<i class="fa fa-info-circle" aria-hidden="true"></i>
					<span>点我 联系我们 获取测试 key</span>
				</div>
			</a>
			<button style="margin-left: 80px;" class='theme-btn btn-outline-warning'
				onclick="getPDFData()">获取PDF数据</button>
			<button class='theme-btn btn-outline-help' onclick="outputAnnotation()">导出批注</button>
			<button class='theme-btn btn-outline-success' onclick="changeFile()">切换文档</button>
			<button class='theme-btn btn-outline-warning' onclick="setMember()">切换用户</button>
			<button class='theme-btn btn-outline-danger' onclick="clearAnnotation()">清空批注</button>
			<button class='theme-btn btn-outline-info' onclick="reloadOldAnnotationData()">加载旧批注</button>
		</div>
		<!-- 以下代码并不包含测试或者月付 key, 请联系我们获取 -->
		<iframe onload='initialPDFEditor()' id='elasticpdf-iframe'
			src="https://pdfmaster.libertynlp.com/web/viewer.html?file=tutorial.pdf"
			frameborder="0" width="100%" height="720px"></iframe>		
	</body>
	<script type="text/javascript">
		var elasticpdf_viewer = null;
		function initialPDFEditor() {
			// 监听 pdf 编辑各种信息的回调
			listenPDFEditorMessage();
			elasticpdf_viewer = document.getElementById('elasticpdf-iframe').contentWindow;
			// 在线版只支持打开在线文档
			var pdf_url = 'https://pdfmaster.libertynlp.com/web/tutorial.pdf';
			elasticpdf_viewer.postMessage({
				"source": "test-elasticpdf",
				"function_name": "initialApp",
				"content": {
					'language': 'zh-cn', // 交互语言
					'pdf_url': pdf_url,
					'member_info': { //用户信息
						'id': 'elasticpdf_id',
						'name': 'elasticpdf',
					},
				}
			}, '*');
		}
		
		// 出于安全考虑, 控制台输出已被测试网站禁用无法使用 console.log 打印出内容
		// 请用 alert 打印内容
		function listenPDFEditorMessage() {
			window.addEventListener('message', (e) => {
				if (e.data.source != 'elasticpdf') {
					return;
				}

				// pdf 加载结束的回调，可以在此处导入服务器上储存的批注文件
				if (e.data.function_name == 'pdfLoaded') {
					// console.log 无效，请使用 alert 打印内容
					// alert('PDF加载成功');
					reloadData();
				}


				// pdf 批注编辑回调，可以在此处导出批注并传输到服务器
				if (e.data.function_name == 'annotationsModified') {
					// 仅获取 pdf 批注文件，不写入到 pdf 中
					let this_data = e.data.content;
					let annotation_content = JSON.stringify(this_data['file_annotation']);
					let file_name = this_data['file_name'];
					
					// console.log 无效，请使用 alert 打印内容
					// alert('批注被修改');
					postService('upload-annotation-data', {
						'file_name': file_name,
						'file_id': '123ddasfsdffads',
						'file_annotation': annotation_content,
					});
				}

				// pdf 批注导出回调，可以在此处导出批注并传输到服务器
				if (e.data.function_name == 'outputAnnotation') {
					// 仅获取 pdf 批注文件，不写入到 pdf 中
					let this_data = e.data.content;
					let annotation_content = JSON.stringify(this_data['file_annotation']);
					let file_name = this_data['file_name'];
					// console.log 无效，请使用 alert 打印内容
					// alert('批注信息\n'+annotation_content);
				}


				// 接收pdf数据
				if (e.data.function_name == 'downloadPDF') {
					let file_name = e.data.content['file_name'];
					let pdf_blob = e.data.content['pdf_blob'];
					let pdf_base64 = e.data.content['pdf_base64'];
					// 如果文档没有被编辑过，则 pdf_base64 仍然是文件名
					// 接收到 pdf 数据，其中 pdf_base64 可以快捷上传到服务器
					postService('upload-pdf-data', {
						'file_name': file_name,
						'file_id': '123ddasfsdffads',
						'file_data': pdf_base64,
					});
					// alert('获取到 pdf base64 数据，如有需要请到postService中完善后续逻辑');
				}
			});
		}
	</script>
</html>

2 调用 API

① 导出批注数据

导出 pdf 批注的 json 数据 ，可以用于后续的筛选、合并、入库 保存等业务流程，非常适用于在线批注流程，因为只需要保存一个原 pdf 文档，然后从数据库中仅加载和回显批注，可以节省很多的服务器性能、流量和带宽费用。

js 复制代码 
//导出可保存的批注对象，导出的数据在 listenPDFEditorMessage() 下 
// if(e.data.function_name == 'outputAnnotation') 代码块下
function outputAnnotation() {
        elasticpdf_viewer.postMessage({
                "source": "test-elasticpdf",
                "function_name": "outputAnnotation",
                "content": ""
        }, '*');
}

② 导入旧批注

从服务器中依据文件 ID 或 PDF 链接加载 ① 中导出的批注数据并回显至文档上，支持再次操作编辑，以此来实现批注数据的云端同步。

js 复制代码 
// 加载旧批注
function reloadOldAnnotationData() {
        var old_annotation = getOldAnnotation();
        elasticpdf_viewer.postMessage({
                "source": "test-elasticpdf",
                "function_name": "setFileAnnotation",
                "content": old_annotation
        }, '*');
}

// 生成模拟旧批注
function getOldAnnotation() {
        var old_annotation = {
                "annos-for-page-1": {
                        "page_id": "annos-for-page-1",
                        "page_canvas_container": {},
                        "page_annotations": [],
                        "page_canvas": {
                                "fabric_canvas": {
                                        "version": "5.2.0",
                                        "objects": [{
                                                "type": "rect",
                                                "version": "5.2.0",
                                                "left": 64.38,
                                                "top": 159.99,
                                                "width": 608.27,
                                                "height": 290.3,
                                                "fill": "rgba(255,237,0,0.3)",
                                                "stroke": "rgba(17,153,158,1)",
                                                "erasable": true
                                        }],
                                        "background": "rgba(255, 255, 255, 0)"
                                },
                                "width": 994,
                                "height": 1407,
                                "fabric_canvas_json": {
                                        "version": "5.2.0",
                                        "objects": [{
                                                "type": "rect",
                                                "version": "5.2.0",
                                                "left": 64.38,
                                                "top": 159.99,
                                                "width": 608.27,
                                                "height": 290.3,
                                                "fill": "rgba(255,237,0,0.3)",
                                                "stroke": "rgba(17,153,158,1)",
                                                "erasable": true,
                                                "id": "1742436474916_1",
                                                "hasControls": true,
                                                "hasBorders": true,
                                                "selectable": true,
                                                "lockMovementX": false,
                                                "lockMovementY": false,
                                                "member_id": "elasticpdf_id",
                                                "member_name": "elasticpdf",
                                                "my_type": "rectangle",
                                                "comment": "添加批注",
                                                "backup_opacity": 1,
                                                "lockRotation": false
                                        }],
                                        "background": "rgba(255, 255, 255, 0)"
                                }
                        }
                }
        }
        return JSON.stringify(old_annotation);
}

③ 导出 PDF 文件

将批注合并到批注文件并导出批注后 PDF 文档 base64 数据，可以直接入库保存。

js 复制代码 
// 获取pdf数据
function getPDFData() {
        elasticpdf_viewer.postMessage({
                "source": "test-elasticpdf",
                "function_name": "getPDFData",
                "content": ""
        }, '*');
}

④ 切换和打开文档

打开在线文档，其中文件服务器或站点需要允许 CORS 跨域，否则加载文档会失败。

js 复制代码 
// 切换打开的文档，可以把 test_pdf 换成任意在线pdf链接
// 文件服务器需要配置允许跨域
function changeFile() {
        var test_pdf = 'https://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf';
        elasticpdf_viewer.postMessage({
                "source": "test-elasticpdf",
                "function_name": "openFile",
                "content": test_pdf
        }, '*');
}

⑤ 设置用户信息

设置插件内当前操作用户的 ID 和用户名，这些信息会被记录到每个批注中，后续可以用于做权限差异设置，例如是否允许当前用户操作他人批注。

js 复制代码 
//设置用户
function setMember(id) {
        var this_member = {
                'id': 'test-id',
                'name': 'test-name',
        };
        elasticpdf_viewer.postMessage({
                "source": "test-elasticpdf",
                "function_name": "setMember",
                "content": this_member
        }, '*');
}

⑥ 清空批注数据

将当前文档对应的操作批注完全清空。

js 复制代码 
// 清空批注
function clearAnnotation() {
        elasticpdf_viewer.postMessage({
                "source": "test-elasticpdf",
                "function_name": "clearFileAnnotation",
                "content": ""
        }, '*');
}

总结

至此，elasticpdf 在线测试版集成于 jQuery 及 HTML 项目并调用数据业务 API 的代码介绍完毕，测试代码文件已上传至 Github(网址：jQuery-html-use-pdf.js-elasticpdf)，欢迎联系我们咨询和获取 Key。

相关推荐
卸任3 小时前
Vibe coding工具使用心得
前端·ai编程
brien94 小时前
为什么模型标称 1M，Google Antigravity 聊到 256K 却突然失忆？我们给它做了个原生行内监控圆环
前端
修炼的dance4 小时前
录屏关键帧间隔多少合适？六档实测，2秒到10秒小了75.6%
前端
Lank_M4 小时前
关键帧从1秒拉到10秒，录屏小87.3%，摄像头小10.8%
前端
补码缩写4 小时前
用 ffprobe 拆录屏，八成字节在 29 个关键帧上
前端
百思不得小李4 小时前
一个复杂的动态表单是如何实现的
前端·设计模式
陈随易5 小时前
Cmder 停更 17 个月，2.0 支持 Windows Terminal
前端·后端·程序员
清晨Coding5 小时前
删了 Cookie 还能自动登录？Google系网站登录态自动恢复的原理分析
javascript
风骏时光牛马5 小时前
前沿视界
前端
kyriewen5 小时前
我扫了 814 个依赖，97 个还敢要 Node 10
前端·javascript·程序员
热门推荐
01国内可直接用、免费额度/永久免费的大模型API清单（含 SiliconFlow、火山、阿里、智谱、百度、Kimi、DeepSeek、DMXAPI 等）02历年考研数学一、数学二、数学三真题试卷及答案PDF03如何新建文件夹？ 电脑新建文件夹的4种方法04几个好用的ip纯净度检测网站05GitHub 镜像站点06微信历史版本含下载地址（ Windows PC | 安卓 | MAC ）及设置微信不更新07昇腾910B系列芯片完全指南：四款型号对比、服务器选型与大模型部署实战08苹果iPA游戏软件资源下载网站09蜘蛛磁力 搜索引擎大全，如何使用蜘蛛磁力查找磁力链接10【SQL Server 2022】保姆级SQL Server 详细图文下载安装教程