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

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

产品截图.png

0 ElasticPDF 产品介绍

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

项目结构-中文.png

根据不同的功能及预算需求，有两个版本的产品可供选择，两者仅在最终的批注保存阶段有区别，产品 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-annotation-library-plugin-elasticpdf-online-api-tutorial-zh.html

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/bicheng/75545.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

CATIA装配体全自动存储解决方案开发实战——基于递归算法的产品结构树批量处理技术

CATIA装配体全自动存储解决方案开发实战——基于递归算法的产品结构树批量处理技术

一、功能定位与技术架构 本工具针对CATIA V5装配体文件管理场景&#xff0c;实现了一套全自动递归存储系统&#xff0c;主要功能包括&#xff1a; ​智能路径选择&#xff1a;通过Tkinter目录对话框实现可视化路径选择​产品结构递归解析&#xff1a;深度优先遍历装配体中的子…
阅读更多...
C#：接口（interface)

C#：接口（interface)

目录 接口的核心是什么&#xff1f; 1. 什么是接口&#xff08;Interface&#xff09;&#xff0c;为什么要用它&#xff1f; 2. 如何定义和使用接口&#xff1f; 3.什么是引用接口&#xff1f; 如何“引用接口”&#xff1f; “引用接口”的关键点 4. 接口与抽象类的区…
阅读更多...
基于卷积神经网络CNN实现电力负荷多变量时序预测(PyTorch版)

基于卷积神经网络CNN实现电力负荷多变量时序预测(PyTorch版)

前言 系列专栏:【深度学习：算法项目实战】✨︎ 涉及医疗健康、财经金融、商业零售、食品饮料、运动健身、交通运输、环境科学、社交媒体以及文本和图像处理等诸多领域，讨论了各种复杂的深度神经网络思想，如卷积神经网络、循环神经网络、生成对抗网络、门控循环单元、长短期记…
阅读更多...
关于inode，dentry结合软链接及硬链接的实验

关于inode，dentry结合软链接及硬链接的实验

一、背景 在之前的博客 缺页异常导致的iowait打印出相关文件的绝对路径-CSDN博客 里 2.2.3 一节里&#xff0c;我们讲到了file&#xff0c;fd&#xff0c;inode&#xff0c;dentry&#xff0c;super_block这几个概念&#xff0c;在这篇博客里&#xff0c;我们针对inode和dentr…
阅读更多...
游戏引擎学习第201天

游戏引擎学习第201天

仓库:https://gitee.com/mrxiao_com/2d_game_5 回顾之前的内容&#xff0c;并遇到了一次一阶异常&#xff08;First-Chance Exception&#xff09;。 欢迎来到新一期的开发过程&#xff0c;我们目前正在编写调试接口代码。 当前&#xff0c;我们已经在布局系统上进行了一些工…
阅读更多...
计算机视觉算法实战——基于YOLOv8的行人流量统计系统

计算机视觉算法实战——基于YOLOv8的行人流量统计系统

✨个人主页欢迎您的访问 ✨期待您的三连 ✨ ✨个人主页欢迎您的访问 ✨期待您的三连 ✨ ✨个人主页欢迎您的访问 ✨期待您的三连✨ ​​​ ​​​​​​​​​ ​​ 引言：智能客流分析的市场需求 在零售、交通、安防等领域，准确的行人流量统计对于商业决策、公共安全管理…
阅读更多...
Redis是什么?架构是怎么样的?

Redis是什么?架构是怎么样的?

目录 前言 一,Redis架构 1.1 本地缓存 1.2 远程缓存 二,强大的Redis优点 2.1 支持多种数据类型 2.2 内存过期策略 2.3 内存淘汰策略 2.4 持久化 三,Redis是什么 前言 我是一个程序员,维护了一个商品服务,它的背后直连Mysql数据库,假设商品服务对外每秒需要提供1万次…
阅读更多...
蓝桥杯真题——传送阵

蓝桥杯真题——传送阵

原题连接&#xff1a;蓝桥杯2024年第十五届省赛真题-传送阵 - C语言网 知识点&#xff1a;并查集 题目描述 小蓝在环球旅行时来到了一座古代遗迹&#xff0c;里面并排放置了 n 个传送阵&#xff0c;进入第 i 个传送阵会被传送到第 ai 个传送阵前&#xff0c;并且可以随时选择…
阅读更多...
彩虹表攻击

彩虹表攻击

1. 引言 密码安全一直是信息安全领域的重要课题。攻击者可以利用**暴力破解（Brute-Force Attack）和字典攻击（Dictionary Attack）等方式尝试破解密码。然而，计算机性能的提升使得这些方法的效率不断提高，其中彩虹表攻击（Rainbow Table Attack）**是一种极具威胁性的密码…
阅读更多...
Vue2 监听器 watcher

Vue2 监听器 watcher

文章目录 前言监听器的作用&#xff1a;工作流程&#xff1a;基本用法1. 简单监听2. 对象形式配置 使用场景1. 执行异步操作2. 监听路由变化3. 复杂对象/数组变化 关键配置项与计算属性的区别动态添加监听器注意事项 前言 提示&#xff1a;这里可以添加本文要记录的大概内容&a…
阅读更多...
Linux系统程序设计：从入门到高级Day02

Linux系统程序设计：从入门到高级Day02

这一篇 我带大家复习一下&#xff0c;C语言中的文件 那一部分 大家注意 这里的图并非原创 是当时我老师的图片 本片作用主要是 后续会有文件相关操作&#xff0c;这篇帮大家复习C语言文件中的内容 有助于大家后面的理解。 文章中代码大多是图片格式&#xff0c;是因为这是我…
阅读更多...
N元语言模型的时间和空间复杂度计算

N元语言模型的时间和空间复杂度计算

对于N元语言模型&#xff0c;时间复杂度是O(V ^ {N-1})&#xff0c;空间复杂度是O(V ^ {N})&#xff0c;N是词汇表的大小。 空间复杂度&#xff1a;存储所有可能的N-1元组及其对应的词的频次需要大量的存储空间。例如&#xff0c;对于一个三元模型&#xff08;N3&#xff09;&…
阅读更多...
Tmux 核心操作速查指南

Tmux 核心操作速查指南

Tmux 最常用操作笔记 1. 基本概念 会话&#xff08;Session&#xff09;&#xff1a;一个tmux会话可以包含多个窗口&#xff0c;适合长期任务管理。窗口&#xff08;Window&#xff09;&#xff1a;每个窗口是一个独立的终端界面&#xff0c;可包含多个面板。面板&#xff08…
阅读更多...
哈希表系列一＞两数之和

哈希表系列一＞两数之和

目录 题目&#xff1a;方法&#xff1a;暴力代码&#xff1a;优化后代码&#xff1a; 题目&#xff1a; 链接: link 方法&#xff1a; 暴力代码&#xff1a; public int[] twoSum(int[] nums, int target) {解法一&#xff1a;暴力解法&#xff1a;int n nums.length;for(int…
阅读更多...
端到端机器学习流水线（MLflow跟踪实验）

端到端机器学习流水线（MLflow跟踪实验）

目录 端到端机器学习流水线（MLflow跟踪实验）1. 引言2. 项目背景与意义2.1 端到端机器学习流水线的重要性2.2 MLflow的作用2.3 工业级数据处理需求3. 数据集生成与介绍3.1 数据集构成3.2 数据生成方法4. 机器学习流水线与MLflow跟踪4.1 端到端机器学习流水线4.2 MLflow跟踪实验…
阅读更多...
英语学习：读科技论文的难处

英语学习：读科技论文的难处

如果读起科技论文&#xff0c; 我们就知道自己到底欠缺什么知识了&#xff0c; 那是一个挨着一个的缺。 而且还没有维基百科可用。 怎么办&#xff1f;没办法&#xff01;硬看&#xff01; 而且还要面临语言的差异性困难。比如这一句怎么翻译比较合适&#xff1f;还是直接不翻译…
阅读更多...
001 使用单片机实现的逻辑分析仪——吸收篇

001 使用单片机实现的逻辑分析仪——吸收篇

本内容记录于韦东山老师的毕设级开源学习项目&#xff0c;含个人观点&#xff0c;请理性阅读。 个人笔记&#xff0c;没有套路&#xff0c;一步到位&#xff0c;欢迎交流&#xff01; 00单片机的逻辑分析仪与商业版FPGA的逻辑分析仪异同 对比维度自制STM32逻辑分析仪商业版逻…
阅读更多...
基数排序算法解析与TypeScript实现

基数排序算法解析与TypeScript实现

基数排序&#xff08;Radix Sort&#xff09;是一种高效的非比较型整数排序算法&#xff0c;通过逐位分配与收集的方式实现排序。本文将深入解析其工作原理&#xff0c;并给出完整的TypeScript实现。 一、算法原理 1. 核心思想 多关键字排序&#xff1a;将整数按位数切割成不同…
阅读更多...
最新全开源码支付系统，赠送3套模板

最新全开源码支付系统，赠送3套模板

最新全开源码支付系统&#xff0c;赠送3套模板 码支付是专为个人站长打造的聚合免签系统&#xff0c;拥有卓越的性能和丰富的功能。它采用全新轻量化的界面UI 让您能更方便快捷地解决知识付费和运营赞助的难题&#xff0c;同时提供实时监控和管理功能&#xff0c;让您随时随地…
阅读更多...
PHP基础二【变量/输出/数据类型/常量/字符串/运算符】

PHP基础二【变量/输出/数据类型/常量/字符串/运算符】

PHP基础二 1. PHP变量2. PHP输出3. 数据类型3.1 字符串3.2 整型3.3 浮点型3.4 布尔型3.5 数组3.6 对象3.7 NULL3.8 资源类型3.9 类型比较 4. 常量5. 运算符 1. PHP变量 1. 我们来看一个实例&#xff1a; <?php$x 5;$y 6;$z $x $y;echo $z; // echo 是输出&#xff0c;…
阅读更多...
最新文章

Copyright @ 2022~2023