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

ElasticPDF_新国产PDF编辑器2025-03-31 12:51

本文章介绍 React 项目中 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 及初始化

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

js 复制代码 
import './App.css';

function App() {
	var elasticpdf_viewer = null;
	var is_chinese=false;
	var default_lang='en';
	if (navigator.language.startsWith('zh')){
		is_chinese=true;
		default_lang='zh-cn';
	}
	
	var elasticpdf_viewer = null;
	function initialPDFEditor() {
		// Listen for callbacks of various information about PDF editing
		// 监听 pdf 编辑各种信息的回调
		listenPDFEditorMessage();
		elasticpdf_viewer = document.getElementById('elasticpdf-iframe').contentWindow;
		// The online version only supports opening online documents
		// 在线版只支持打开在线文档
		// var pdf_url = 'https://pdfmaster.libertynlp.com/web/tutorial.pdf';
		// var pdf_url = 'tutorial.pdf';
		// var pdf_url = 'https://app.elasticpdf.com/web/tutorial.pdf';
		var pdf_url='Xulian Business Letter.pdf'
		elasticpdf_viewer.postMessage({
			"source": "test-elasticpdf",
			"function_name": "initialApp",
			"content": {
				'language': default_lang, // GUI language 交互语言
				'pdf_url': pdf_url,
				'member_info': { //Member Info  用户信息
					'id': 'elasticpdf_id',
					'name': 'elasticpdf',
				},
			}
		}, '*');
	}
	
	// For security reasons, console output has been disabled by the test website and cannot use console.log to print out content
	// Please use alert to print content
	// 出于安全考虑, 控制台输出已被测试网站禁用无法使用 console.log 打印出内容
	// 请用 alert 打印内容
	function listenPDFEditorMessage() {
		window.addEventListener('message', (e) => {
			if (e.data.source != 'elasticpdf') {
				return;
			}
			
			// PDF loading completed callback, you can import the annotation file stored on the server here
			// pdf 加载结束的回调，可以在此处导入服务器上储存的批注文件
			if (e.data.function_name == 'pdfLoaded') {
				// console.log is invalid, please use alert to print content
				// console.log 无效，请使用 alert 打印内容
				// alert('PDF loaded successfully PDF加载成功');
				reloadData();
			}
	
			// PDF annotation editing callback, where annotations can be exported and transferred to the server
			// pdf 批注编辑回调，可以在此处导出批注并传输到服务器
			if (e.data.function_name == 'annotationsModified') {
				// Only get the PDF annotation data, do not write it into the PDF
				// 仅获取 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 is invalid, please use alert to print content
				// alert('annotation modified 批注被修改');
				postService('upload-annotation-data', {
					'file_name': file_name,
					'file_id': '123ddasfsdffads',
					'file_annotation': annotation_content,
				});
			}
			
			// PDF annotation export callback, where annotations can be exported and transferred to the server
			// pdf 批注导出回调，可以在此处导出批注并传输到服务器
			if (e.data.function_name == 'outputAnnotation') {
				// Only get the PDF annotation data, do not write it into the PDF
				// 仅获取 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 is invalid, please use alert to print content
				// console.log 无效，请使用 alert 打印内容
				// alert('Annotation data 批注数据\n'+annotation_content);
			}
	
			// Receive the edited PDF data, and the annotations are written into the PDF
			// 接收编辑后的pdf数据，批注被写入 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'];
				// If the document has not been edited, pdf_base64 is still the file name or file url
				// Receive pdf data, where pdf_base64 can be quickly uploaded to the server
				// 如果文档没有被编辑过，则 pdf_base64 仍然是文件名或文件链接
				// 接收到 pdf 数据，其中 pdf_base64 可以快捷上传到服务器
				postService('upload-pdf-data', {
					'file_name': file_name,
					'file_id': '123ddasfsdffads',
					'file_data': pdf_base64,
				});
				// alert('Get the pdf base64 data. Please go to postService function to add the subsequent function.\n\n获取到 pdf base64 数据，如有需要请到postService中增加业务函数');
			}
		});
	}


	return (
	<div className="App">

	{
		is_chinese &&
		<div className='project-title'>
			<img src="react-static/react.png" alt="" />
			<h2>React Online API examples</h2>
			<a style={{"cursor": "pointer","text-decoration": "none"}} href='https://www.elasticpdf.com/contact-us.html'
				target="_blank">
				<div title='contact us for trial key' className='message-div info-message'>
					<span>获取测试Key</span>
				</div>
			</a>
			<button style={{"margin-left": "20px"}} className='theme-btn btn-outline-warning'
				onClick={getPDFData}>获取PDF数据</button>
			<button className='theme-btn btn-outline-help' onClick={outputAnnotation}>导出批注</button>
			<button className='theme-btn btn-outline-success' onClick={changeFile}>切换文档</button>
			<button className='theme-btn btn-outline-warning' onClick={setMember}>切换用户</button>
			<button className='theme-btn btn-outline-danger' onClick={clearAnnotation}>清除批注</button>
			<button className='theme-btn btn-outline-info' onClick={reloadOldAnnotationData}>重载批注</button>
			<img style={{position:"absolute",right:"20px",height:"100%"}} src="https://elasticpdf.com/elasticpdf-image/logo-no-back.png" alt="" />
		</div>
	}
	{
		<iframe id='elasticpdf-iframe' onLoad={initialPDFEditor}
		title='elasticpdf-iframe' src='https://pdfmaster.libertynlp.com/web/viewer.html?file=tutorial.pdf' style={{width:"100%",border:0,height:"700px"}}></iframe>
	}
	</div>
	);
}

export default App;

2 调用 API

① 导出批注数据

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

js 复制代码 
// export annotations data 导出可保存的批注对象
function outputAnnotation() {
        elasticpdf_viewer.postMessage({
                "source": "test-elasticpdf",
                "function_name": "outputAnnotation",
                "content": ""
        }, '*');
}

② 导入旧批注

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

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

// Generate simulated old annotation data
// 生成模拟旧批注数据
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 复制代码 
// export edited pdf data
// 导出批注编辑后pdf数据
function getPDFData() {
        elasticpdf_viewer.postMessage({
                "source": "test-elasticpdf",
                "function_name": "getPDFData",
                "content": ""
        }, '*');
}

④ 切换和打开文档

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

js 复制代码 
// You can change test_pdf with any online pdf url
// The file server needs to be configured to allow cross-domain
// 切换打开的文档，可以把 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 复制代码 
// set member info including id and name
// 设置用户的 id 和 name
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 复制代码 
// clear all annotations
// 清空批注
function clearAnnotation() {
        elasticpdf_viewer.postMessage({
                "source": "test-elasticpdf",
                "function_name": "clearFileAnnotation",
                "content": ""
        }, '*');
}

总结

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

温馨提示：本文首发于 www.elasticpdf.com ，转载请注明出处：www.elasticpdf.com/blog/react-...

相关推荐
猫猫不是喵喵.6 小时前
vue 路由
前端·javascript·vue.js
烛阴7 小时前
JavaScript Import/Export：告别混乱，拥抱模块化！
前端·javascript
bin91537 小时前
DeepSeek 助力 Vue3 开发：打造丝滑的表格（Table）之添加行拖拽排序功能示例12，TableView16_12 拖拽动画示例
前端·javascript·vue.js·ecmascript·deepseek
拉不动的猪8 小时前
vue自定义“权限控制”指令
前端·javascript·vue.js
魔云连洲9 小时前
Vue2和Vue3响应式的基本实现
开发语言·前端·javascript·vue.js
CreatorRay9 小时前
受控组件和非受控组件的区别
前端·javascript·react.js
JSON_L10 小时前
Vue 组件通信 - Ref组件通信
javascript·vue.js·ecmascript
Fri_11 小时前
Vue 使用 xlsx 插件导出 excel 文件
javascript·vue.js·excel
黑贝是条狗11 小时前
html 列表循环滚动，动态初始化字段数据
前端·javascript·html
萌萌哒草头将军11 小时前
🔥🔥🔥4 月 1 日尤雨溪突然宣布使用 Go 语言重写 Rolldown 和 Oxc！
前端·javascript·vue.js
热门推荐
01我决定放弃搞 Java 了02DeepSeek各版本说明与优缺点分析03如何在WPS和Word/Excel中直接使用DeepSeek功能04从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑05苍穹外卖面试总结06DeepSeek R1本地化部署 Ollama + Chatbox 打造最强 AI 工具07论文笔记：交替单模态适应的多模态表征学习08RAG 实践- Ollama+RagFlow 部署本地知识库09如何本地部署AI智能体平台，带你手搓一个AI Agent10三次握手内部实现原理