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.pswp.cn/bicheng/75545.shtml
繁體地址，請注明出處：http://hk.pswp.cn/bicheng/75545.shtml
英文地址，請注明出處：http://en.pswp.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