本文章介紹 Angular 項目中 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頁面，此處為 app.component.html
<div *ngIf='language==="zh-cn"' class='project-title'><img src="https://elasticpdf.com/elasticpdf-image/logo-no-back.png" alt="" /><h2>Angular 項目在線 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'(click)="getPDFData()">獲取PDF數據</button><button class='theme-btn btn-outline-help' (click)="outputAnnotation()">導出批注</button><button class='theme-btn btn-outline-success' (click)="changeFile()">切換文檔</button><button class='theme-btn btn-outline-warning' (click)="setMember('test_id')">切換用戶</button><button class='theme-btn btn-outline-danger' (click)="clearAnnotation()">清空批注</button><button class='theme-btn btn-outline-info' (click)="reloadOldAnnotationData()">加載舊批注</button>
</div>
<div style="width: 100%;height: auto;"><iframe src="https://pdfmaster.libertynlp.com/web/viewer.html?file=tutorial.pdf" id='elasticpdf-iframe' (load)='initialPDFEditor()' width="100%" height="680px" frameborder="0"></iframe>
</div>
再將以下邏輯代碼導入到 app.component.html 對應的 ts 頁面中，此處為 app.component.ts，其中包含了初始化代碼 initialPDFEditor() 和接收所有回報信息的函數，所有導出的 PDF數據，批注數據 都在函數 @HostListener 下，可以與后續的業務融合。
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';
import { HostListener } from '@angular/core';@Component({selector: 'app-root',standalone: true,imports: [CommonModule, RouterOutlet],templateUrl: './app.component.html',styleUrls: ['./app.component.css']
})export class AppComponent {language:any = 'en';elasticpdf_viewer:any = null;elasticpdf_iframe:any = null;initialPDFEditor() {let languages = navigator.languages as string[]; if (languages[0].toLowerCase().includes('zh')) {this.language = 'zh-cn';// alert(languages);}this.elasticpdf_iframe = document.getElementById('elasticpdf-iframe') as HTMLIFrameElement;// The online version only supports opening online documents// 在線版只支持打開在線文檔let pdf_url = "tutorial.pdf";if (this.elasticpdf_iframe && this.elasticpdf_iframe.contentWindow) {this.elasticpdf_viewer = this.elasticpdf_iframe?.contentWindow as any;this.elasticpdf_viewer.postMessage({"source": "test-elasticpdf","function_name": "initialApp","content": {'language': this.language, // GUI language 交互語言'pdf_url': pdf_url,'member_info': { //Member Info 用戶信息'id': 'elasticpdf_id','name': 'elasticpdf',},}}, '*');}}// Listen for callbacks of various information about PDF editing// 監聽 pdf 編輯各種信息的回調@HostListener('window:message', ['$event'])onMessage(event : Event) : void {const e : any = event;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加載成功');this.reloadData();}// 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);}// 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 批注被修改');this.postService('upload-annotation-data', {'file_name': file_name,'file_id': '123ddasfsdffads','file_annotation': 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 可以快捷上傳到服務器this.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中增加業務函數');}}
}
2 調用 API
① 導出批注數據
導出 pdf 批注的 json 數據，可以用于后續的篩選、合并、入庫保存等業務流程，非常適用于在線批注流程，因為只需要保存一個原 pdf 文檔，然后從數據庫中僅加載和回顯批注，可以節省很多的服務器性能、流量和帶寬費用。
// export annotations data 導出可保存的批注對象
outputAnnotation() {this.elasticpdf_viewer.postMessage({"source": "test-elasticpdf","function_name": "outputAnnotation","content": ""}, '*');
}
② 導入舊批注
從服務器中依據文件 ID 或 PDF 鏈接加載 ① 中導出的批注數據并回顯至文檔上，支持再次操作編輯，以此來實現批注數據的云端同步。
// reload old annotation data
// 加載舊批注
reloadOldAnnotationData() {var old_annotation = this.getOldAnnotation();this.elasticpdf_viewer.postMessage({"source": "test-elasticpdf","function_name": "setFileAnnotation","content": old_annotation}, '*');
}// Generate simulated old annotation data
// 生成模擬舊批注數據
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 數據，可以直接入庫保存。
// export edited pdf data
// 導出批注編輯后pdf數據
getPDFData() {this.elasticpdf_viewer.postMessage({"source": "test-elasticpdf","function_name": "getPDFData","content": ""}, '*');
}
④ 切換和打開文檔
打開在線文檔，其中文件服務器或站點需要允許 CORS 跨域，否則加載文檔會失敗。
// You can change test_pdf with any online pdf url
// The file server needs to be configured to allow cross-domain
// 切換打開的文檔，可以把 test_pdf 換成任意在線pdf鏈接
// 文件服務器需要配置允許跨域
changeFile() {var test_pdf = 'https://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf';this.elasticpdf_viewer.postMessage({"source": "test-elasticpdf","function_name": "openFile","content": test_pdf}, '*');
}
⑤ 設置用戶信息
設置插件內當前操作用戶的 ID 和用戶名，這些信息會被記錄到每個批注中，后續可以用于做權限差異設置，例如是否允許當前用戶操作他人批注。
// set member info including id and name
// 設置用戶的 id 和 name
setMember(id:string) {var this_member = {'id': 'test-id','name': 'test-name',};this.elasticpdf_viewer.postMessage({"source": "test-elasticpdf","function_name": "setMember","content": this_member}, '*');
}
⑥ 清空批注數據
將當前文檔對應的操作批注完全清空。
// clear all annotations
// 清空批注
clearAnnotation() {this.elasticpdf_viewer.postMessage({"source": "test-elasticpdf","function_name": "clearFileAnnotation","content": ""}, '*');
}
總結
至此，elasticpdf 在線測試版集成于 Angular 項目并調用數據業務 API 的代碼介紹完畢，測試代碼文件已上傳至 Github(網址：https://github.com/ElasticPDF/Angular-use-pdf.js-elasticpdf)，歡迎聯系我們咨詢和獲取 Key。
溫馨提示：本文首發于?https://www.elasticpdf.com?，轉載請注明出處：https://www.elasticpdf.com/blog/angular-pdf-annotation-plugin-library-online-api-examples-zh.html
![[實戰] linux驅動框架與驅動開發實戰](http://pic.xiahunao.cn/[實戰] linux驅動框架與驅動開發實戰)
