本文章介绍 HTML && jQuery Web项目中 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 及初始化
首先将以下的 HTML 代码导入到目标页面，其中包含了初始化代码 initialPDFEditor() 和接收所有回报信息的函数 listenPDFEditorMessage()，所有导出的 PDF数据，批注数据 都在函数listenPDFEditorMessage() 下，可以与后续的业务融合。
<!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 文档，然后从数据库中仅加载和回显批注，可以节省很多的服务器性能、流量和带宽费用。
//导出可保存的批注对象，导出的数据在 listenPDFEditorMessage() 下
// if(e.data.function_name == 'outputAnnotation') 代码块下
function outputAnnotation() {
elasticpdf_viewer.postMessage({
"source": "test-elasticpdf",
"function_name": "outputAnnotation",
"content": ""
}, '*');
}② 导入旧批注
从服务器中依据文件 ID 或 PDF 链接加载 ① 中导出的批注数据并回显至文档上，支持再次操作编辑，以此来实现批注数据的云端同步。
// 加载旧批注
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 数据，可以直接入库保存。
// 获取pdf数据
function getPDFData() {
elasticpdf_viewer.postMessage({
"source": "test-elasticpdf",
"function_name": "getPDFData",
"content": ""
}, '*');
}④ 切换和打开文档
打开在线文档，其中文件服务器或站点需要允许 CORS 跨域，否则加载文档会失败。
// 切换打开的文档，可以把 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 和用户名，这些信息会被记录到每个批注中，后续可以用于做权限差异设置，例如是否允许当前用户操作他人批注。
//设置用户
function setMember(id) {
var this_member = {
'id': 'test-id',
'name': 'test-name',
};
elasticpdf_viewer.postMessage({
"source": "test-elasticpdf",
"function_name": "setMember",
"content": this_member
}, '*');
}⑥ 清空批注数据
将当前文档对应的操作批注完全清空。
// 清空批注
function clearAnnotation() {
elasticpdf_viewer.postMessage({
"source": "test-elasticpdf",
"function_name": "clearFileAnnotation",
"content": ""
}, '*');
}总结
至此，elasticpdf 在线测试版集成于 jQuery 及 HTML 项目并调用数据业务 API 的代码介绍完毕，测试代码文件已上传至 Github(网址：jQuery-html-use-pdf.js-elasticpdf)，欢迎联系我们咨询和获取 Key。
温馨提示：本文首发于 https://www.elasticpdf.com ，转载请注明出处：https://www.elasticpdf.com/blog/html-jquery-web-project-pdf-a...
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。