API 用法
提示
为突出重点，并未列出和解释每一个文件中的所有函数和参数，更多未列出的内容可到对应的文件中查看，如有疑问文件内容无法满足的流程控制需求，可咨询我司技术人员获取解答。**
1. 初始化 elasticpdf
以纯 HTML+Javascript 项目代码演示的初始化如下
var elasticpdf_viewer = null;
function initialPDFEditor() {
// 监听 pdf 编辑各种信息的回调
listenPDFEditorMessage();
elasticpdf_viewer = document.getElementById('elasticpdf-iframe').contentWindow;
// PDF文件链接，也可使用 pdf base64 数据，
// PDF base64 数据例如 pdf_url ='data:application/pdf;base64,JVB...'
var pdf_url = 'https://app.elasticpdf.com/web/tutorial-607.pdf';
elasticpdf_viewer.postMessage({
"source": "elasticpdf",
"function_name": "initialApp",
"content": {
'language': 'zh-cn', // 交互语言，支持中文和英文
'pdf_url': pdf_url,
'display_annotation_list': true, // 是否默认展开批注列表
'read_only_model': false, // 是否默认激活只读模式
'member_info': { // 用户信息
'id': 'elasticpdf_id',
'name': 'elasticpdf',
},
'show_reply_panel': true, // 点击页面批注是否弹出批注编辑面板和回复内容框
'modify_others_annotation': true, // 是否允许编辑他人批注
'path_merge_interval': 2000, // 间隔时间内的画笔路径自动合并，单位毫秒
'show_message': true, // 操作过程中是否显示提示语
}
}, '*');
}2. elasticpdf数据外传
下面函数演示如何与 ElasticPDF app 进行组件通信，即 传入数据、指令 和 接收数据、指令 。仍然以纯 HTML+Javascript 代码为例。
// 监听 elasticpdfapp 传出的数据
function listenPDFEditorMessage() {
window.addEventListener('message', (e) => {
if (e.data.source != 'elasticpdf') {
return;
}
// 监听打开本地文档，可以选择是否将文档上传于服务器
if (e.data.function_name == 'openLocalFile') {
// console.log('本地 PDF 文档加载成功');
uploadLocalFile(e.data.content);
reloadData();
}
// pdf 加载结束的回调函数，可以在此处导入批注文件
// 或者加入并生成新的批注
if (e.data.function_name == 'pdfLoaded') {
// console.log('PDF加载成功');
// 新增批注
// var page_number=7;
// var anno_id='1743689572423_1';
// highlightAnnotationWithArrowMark(page_number,anno_id);
reloadData();
}
// 接收编辑后的pdf数据，所有操作的批注都被以标准格式写入到了 PDF 中
if (e.data.function_name == 'downloadPDF') {
// 相应 PDF 文件数据
let file_name = e.data.content['file_name'];
let pdf_blob = e.data.content['pdf_blob'];
let pdf_base64 = e.data.content['pdf_base64'];
// console.log('PDF信息', pdf_base64);
// 如果文档没有被编辑过，则 pdf_base64 仍然是文件名
// 接收到 pdf 数据，其中 pdf_base64 可以快捷上传到服务器
postService('upload-pdf-data', {
'file_name': file_name,
'file_id': '123ddasfsdffads',
'file_data': pdf_base64,
});
}
// pdf 批注编辑回调，可以在此处导出批注并传输到服务器
// 每一次批注的修改，包括任意级别的增删改查都会传回这个数据
if (e.data.function_name == 'annotationsModified') {
// 获取独立的 pdf 批注内容，不包含对应的 pdf ，文档内容极小，非常适合云端协同等系统
let this_data = elasticpdf_viewer.pdfAnnotation.outputAnnotations();
let annotation_content = JSON.stringify(this_data['file_annotation']);
let file_name = this_data['file_name'];
// console.log('批注信息', annotation_content);
postService('upload-annotation-data', {
'file_name': file_name,
'file_id': '123ddasfsdffads',
'file_annotation': annotation_content,
});
}
});
}3. 调用内部函数
通过内部类名函数，简单调用 ElasticPDF app 内部函数。篇幅有效，下列内容仅是示例，代码包中有更多函数可直接调用。
// 获取 PDF 文件数据，数据结果会通过回调函数 'downloadPDF' 传回
function getPDFData() {
elasticpdf_viewer.getPDFData();
}
// 打开或者关闭批注列表
function openOrCloseAnnotatioList() {
elasticpdf_viewer.editAnnotation();
}
// 导出可保存的纯批注对象，节省网络、流量等
function outputAnnotation() {
var this_data = elasticpdf_viewer.pdfAnnotation.outputAnnotations();
var content = JSON.stringify(this_data['file_annotation']);
// console.log('导出批注', content);
}
// 清空当前文件的所有批注
function clearAnnotation() {
elasticpdf_viewer.confirmToClearFileAnnotations();
elasticpdf_viewer.addOperationTips("批注已清空");
}
// 切换并打开文档
function changeFile() {
var test_pdf = 'https://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf';
elasticpdf_viewer.pdfAnnotation.refreshFabricState(1);
elasticpdf_viewer.pdfAnnotation.openFile(test_pdf);
elasticpdf_viewer.addOperationTips("file changed 文件已修改");
}
// 设置并修改当前用户，简便的与系统内用户信息匹配
function setMember() {
var this_member = {
'id': 'test_id',
'name': 'test_name',
};
elasticpdf_viewer.setCurrentMemberId(this_member);
elasticpdf_viewer.addOperationTips("设置用户成功");
}
// 将已有批注写入到当前文件中
function reloadOldAnnotationData() {
var old_annotation = getOldAnnotation();
elasticpdf_viewer.setPureFileAnnotation({
'file_annotation': old_annotation
});
}
// 在这里写重载批注业务逻辑
async function reloadData() {
return;
}
// 与后端服务器进行网络通信的函数
async function postService(url, data) {
// 在这里写批注上传服务器逻辑
return;
}
// 生成模拟旧批注数据
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);
}4. 自定义UI按钮
批注功能按钮
批注功能按钮由 Javascript 代码生成，可以轻易决定是否显示以及修改样式
// 创建顶部注释工具栏
function setAnnotationButtons() {
var annotation_buttons_node = document.getElementById('firefly-annotation-buttons');
annotation_buttons_node.innerHTML = ''; // 清空所有子元素
var buttons_text = {
'zh-cn': [
'<div>',
'<button title="下载批注后的文件(批注将标记在下载的文件中)" id="ff-download-btn" onclick="myDownLoad()" type="button"><i class="fa fa-folder" aria-hidden="true"><span></span></i></button>',
'<button title="截取PDF部分页" id="ff-extract-pdf" onclick="extractPDF()" type="button"><i class="fa fa-map" aria-hidden="true"><span></span></i></button>',
'<button title="导出标注(json格式)" id="ff-output-btn" onclick="outputAnnotations()" type="button"><i class="fa fa-download" aria-hidden="true"><span></span></i></button>',
'<button title="导入标注(json格式)" id="ff-import-btn" onclick="openAnnotationFile()" type="button"><i class="fa fa-upload" aria-hidden="true"><span></span></i></button>',
'<button title="切换至英文" id="ff-language-btn" onclick="setLanguage(1)" type="button"><i class="fa fa-language" aria-hidden="true"><span></span></i></button>',
'</div>',
'<div>',
'<button title="选中对象" id="ff-pointer-obj" onclick="setFabricTop(this)" type="button"><i class="fa fa-mouse-pointer" aria-hidden="true"><span></span></i></button>',
'<button title="编辑标注" id="ff-edit-btn" onclick="editAnnotation()" type="button"><i class="fa fa-list-ul" aria-hidden="true"><span></span></i></button>',
'<button title="文本高亮(再次点击取消滑选标注)" id="ff-highlight-btn" onclick="clickTab(this)" type="button"><i class="fa fa-paint-brush" aria-hidden="true"><span></span></i></button>',
'<button title="文本下划线(再次点击取消滑选标注)" id="ff-underline-btn" onclick="clickTab(this)" type="button"><i class="fa fa-underline" aria-hidden="true"><span></span></i></button>',
'<button title="文本删除线(再次点击取消滑选标注)" id="ff-strikethrough-btn" onclick="clickTab(this)" type="button"><i class="fa fa-strikethrough" aria-hidden="true"><span></span></i></button>',
'<button title="插入签名" id="ff-import-signature" onclick="openSignaturePanel()" type="button"><i class="fa fa-signature" aria-hidden="true"><span></span></i></button>',
'<button title="插入图片" id="ff-import-img" onclick="chooseImage()" type="button"><i class="fa fa-picture-o" aria-hidden="true"><span></span></i></button>',
'<button title="页面截图" id="ff-screen-shot" onclick="addFabricObj(this,6)" type="button"><i class="fa fa-camera"><span></span></i></button>',
'<button title="画笔工具" id="ff-free-draw" onclick="fabricDraw(this)" type="button"><i class="fa fa-pencil" aria-hidden="true"><span></span></i></button>',
'<button title="文字工具" id="ff-add-text" onclick="addFabricObj(this,2)" type="button"><i class="fa fa-font" aria-hidden="true"><span></span></i></button>',
'<button title="箭头工具" id="ff-add-arrow" onclick="addFabricObj(this,3)" type="button"><i class="fa fa-external-link-square" aria-hidden="true"><span></span></i></button>',
'<button title="矩形工具" id="ff-add-rect" onclick="addFabricObj(this,4)" type="button"><i class="fa fa-window-maximize" aria-hidden="true"><span></span></i></button>',
'<button title="圆形工具" id="ff-add-circle" onclick="addFabricObj(this,5)" type="button"><i class="fa fa-circle" aria-hidden="true"><span></span></i></button>',
'<button title="直线工具" id="ff-add-line" onclick="addFabricObj(this,7)" type="button"><i class="fa fa-minus" aria-hidden="true"><span></span></i></button>',
'<button title="超链接工具" id="ff-add-hyperlink" onclick="addFabricObj(this,10)" type="button"><i class="fa fa-link" aria-hidden="true"><span></span></i></button>',
'<button title="身份印章工具" id="ff-add-stamp" onclick="addFabricObj(this,8)" type="button"><i class="fa fa-id-card" aria-hidden="true"><span></span></i></button>',
'<button title="插入对勾" id="ff-add-check" onclick="addFabricObj(this,9)" type="button"><i class="fa fa-check" aria-hidden="true"><span></span></i></button>',
'</div>',
'<div>',
'<div class="read-only-model-div" id="hide-anno-div"></div>',
'<button title="AI聊天" id="ff-ai-btn" onclick="chatToPDF()" type="button"><i class="fa fa-comments" aria-hidden="true"><span></span></i></button>',
'<button title="橡皮檫" id="ff-eraser-btn" onclick="clickTab(this)" type="button"><i class="fa fa-eraser" aria-hidden="true"><span></span></i></button>',
'<button title="撤销批注" id="ff-undo-btn" onclick="undoAnnotation()" type="button"><i class="fa fa-undo" aria-hidden="true"><span></span></i></button>',
'<button title="重做批注" id="ff-redo-btn" onclick="redoAnnotation()" type="button"><i style="transform: rotateY(180deg);" class="fa fa-undo" aria-hidden="true"><span></span></i></button>',
'<button title="清除所有批注" id="ff-clear-file-annotation-btn" onclick="clearFileAnnotations()" type="button"><i class="fa fa-trash" aria-hidden="true"><span></span></i></button>',
'<button title="帮助文档" style="' + help_button_style +
'" id="ff-help-btn" onclick="openHelpDoc()" type="button"><i class="fa fa-question-circle" aria-hidden="true"><span></span></i></button>',
'</div>',
]} [tips_language];
var new_html = '';
for (var i = 0; i < buttons_text.length; i++) {
var btn_html = buttons_text[i];
if (!btnInHiddenBtns(btn_html)) {
new_html += buttons_text[i];
}
}
annotation_buttons_node.innerHTML = new_html;
// 为预览模式选择创建选择 div
}预览按钮样式修改
预览样式都写在了 HTML 中，同样支持方便的修改，以下是一些示例代码，可用于修改缩放控件
<div id="toolbarViewerMiddle">
<div class="splitToolbarButton">
<button id="zoomOut" class="toolbarButton" title="Zoom Out" tabindex="21"
data-l10n-id="zoom_out">
<span data-l10n-id="zoom_out_label">缩小</span>
</button>
<div class="splitToolbarButtonSeparator"></div>
<button id="zoomIn" class="toolbarButton" title="Zoom In" tabindex="22"
data-l10n-id="zoom_in">
<span data-l10n-id="zoom_in_label">放大</span>
</button>
</div>
<span id="scaleSelectContainer" class="dropdownToolbarButton">
<select id="scaleSelect" title="Zoom" tabindex="23" data-l10n-id="zoom">
<option id="pageAutoOption" title="" value="auto" selected="selected"
data-l10n-id="page_scale_auto">自动缩放</option>
<option id="pageActualOption" title="" value="page-actual"
data-l10n-id="page_scale_actual">实际大小</option>
<option id="pageFitOption" title="" value="page-fit"
data-l10n-id="page_scale_fit">适合页面</option>
<option id="pageWidthOption" title="" value="page-width"
data-l10n-id="page_scale_width">页面宽度</option>
<option id="customScaleOption" title="" value="custom" disabled="disabled"
hidden="true"></option>
<option title="" value="0.5" data-l10n-id="page_scale_percent"
data-l10n-args='{ "scale": 50 }'>50%</option>
<option title="" value="0.75" data-l10n-id="page_scale_percent"
data-l10n-args='{ "scale": 75 }'>75%</option>
<option title="" value="1" data-l10n-id="page_scale_percent"
data-l10n-args='{ "scale": 100 }'>100%</option>
<option title="" value="1.25" data-l10n-id="page_scale_percent"
data-l10n-args='{ "scale": 125 }'>125%</option>
<option title="" value="1.5" data-l10n-id="page_scale_percent"
data-l10n-args='{ "scale": 150 }'>150%</option>
<option title="" value="2" data-l10n-id="page_scale_percent"
data-l10n-args='{ "scale": 200 }'>200%</option>
<option title="" value="3" data-l10n-id="page_scale_percent"
data-l10n-args='{ "scale": 300 }'>300%</option>
<option title="" value="4" data-l10n-id="page_scale_percent"
data-l10n-args='{ "scale": 400 }'>400%</option>
</select>
</span>
</div>
</div>
<div class='op-buttons-container' id='op-buttons-container'>
<div id='firefly-annotation-buttons' class='annotation-buttons'>
</div>
</div>
<div id="loadingBar">
<div class="progress">
<div class="glimmer">
</div>
</div>
</div>
</div>
</div>更多 API
在 elasticpdf 中，所有按钮，参数函数都是可以深入调用的，篇幅有限并未展现所有相关内容，欢迎联系我们的技术人员了解更多。