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。

相关推荐
WeiXiao_Hyy23 分钟前
成为 Top 1% 的工程师
java·开发语言·javascript·经验分享·后端
吃杠碰小鸡40 分钟前
高中数学-数列-导数证明
前端·数学·算法
kingwebo'sZone1 小时前
C#使用Aspose.Words把 word转成图片
前端·c#·word
xjt_09011 小时前
基于 Vue 3 构建企业级 Web Components 组件库
前端·javascript·vue.js
我是伪码农1 小时前
Vue 2.3
前端·javascript·vue.js
夜郎king2 小时前
HTML5 SVG 实现日出日落动画与实时天气可视化
前端·html5·svg 日出日落
辰风沐阳2 小时前
JavaScript 的宏任务和微任务
javascript
夏幻灵3 小时前
HTML5里最常用的十大标签
前端·html·html5
冰暮流星3 小时前
javascript之二重循环练习
开发语言·javascript·数据库
Mr Xu_3 小时前
Vue 3 中 watch 的使用详解：监听响应式数据变化的利器
前端·javascript·vue.js
热门推荐
01GitHub 镜像站点02Claude Code + GLM4.7 避坑指南：解决 Unable to connect to Anthropic services03使用 1panel面板 部署 php网站04OpenClaw Chrome扩展使用教程 - 浏览器中继控制05Vue-skills的中文文档06Linux下V2Ray安装配置指南07让 Trae IDE 智能体 “读懂”文档 Excel+PDF+DOCX ：mcp-documents-reader 工具使用指南08从零搭建一个 PHP 登录注册系统（含完整源码）09UV安装并设置国内源10一文了解国产算子编程语言 TileLang，TileLang 对国产开源生态的影响与启示