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

ElasticPDF-新国产PDF编辑器2025-04-07 22:39

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

0 ElasticPDF 产品介绍

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

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

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

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

1 导入页面 HTML 及初始化

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

html 复制代码 
<template>
	<div id='chinese_content' style="display: none;" class='project-title'>
		<img src="https://elasticpdf.com/elasticpdf-image/logo-no-back.png" alt="" />
		<h2>Vue 在线 API 示例</h2>
		<a style="cursor: pointer;text-decoration: none;" href='https://www.elasticpdf.com/contact-us.html'
			target="_blank">
			<div title='联系我们获取测试 key' class='message-div info-message'>
				<i class="fa fa-info-circle" aria-hidden="true"></i>
				<span>获取测试 key</span>
			</div>
		</a>
		<button style="margin-left: 20px;" 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>
	<iframe @load='initialPDFEditor' id='elasticpdf-iframe'
		src="https://pdfmaster.libertynlp.com/web/viewer.html?file=tutorial.pdf"
		style="position: relative; width: 100%; height: 660px;border: none;"></iframe>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue'

	onMounted(() => {
		
	})
	
	var elasticpdf_viewer = null;
	var default_lang='en';
	function initialPDFEditor() {
		showContentByLanguage();
		// 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 = 'https://app.elasticpdf.com/web/tutorial.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中增加业务函数');
			}
		});
	}
</script>

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 在线测试版集成于 Vue 项目并调用数据业务 API 的代码介绍完毕，测试代码文件已上传至 Github(网址：https://github.com/ElasticPDF/Vue-use-pdf.js-elasticpdf)，欢迎联系我们咨询和获取 Key。

温馨提示：本文首发于 https://www.elasticpdf.com ，转载请注明出处：https://www.elasticpdf.com/blog/vue-pdf-annotation-plugin-library-online-api-examples-zh.html

相关推荐
涵信11 分钟前
第十一节：性能优化高频题-响应式数据深度监听问题
javascript·vue.js·性能优化
拉不动的猪1 小时前
前端常见数组分析
前端·javascript·面试
小吕学编程1 小时前
ES练习册
java·前端·elasticsearch
Asthenia04121 小时前
Netty编解码器详解与实战
前端
袁煦丞1 小时前
每天省2小时！这个网盘神器让我告别云存储混乱（附内网穿透神操作）
前端·程序员·远程工作
Mr.app2 小时前
vue mixin混入与hook
vue.js
一个专注写代码的程序媛2 小时前
vue组件间通信
前端·javascript·vue.js
一笑code3 小时前
美团社招一面
前端·javascript·vue.js
懒懒是个程序员3 小时前
layui时间范围
前端·javascript·layui
NoneCoder3 小时前
HTML响应式网页设计与跨平台适配
前端·html
热门推荐
01西电B测-计算机网络综合实验(含验收问题)02KGG转MP3工具|非KGM文件|解密音频03从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑04Coze扣子平台完整体验和实践（附国内和国际版对比）05YOLOv8入门 | 重要性能衡量指标、训练结果评价及分析及影响mAP的因素【发论文关注的指标】06DeepSeek各版本说明与优缺点分析07最新 Kubernetes 集群部署 + flannel 网络插件（保姆级教程，最新 K8S 版本）08yolov8，yolo11，yolo12 服务器训练到部署全流程 笔记09我决定放弃搞 Java 了10yolov10来了！用yolov10训练自己的数据集（原理、训练、部署、应用）