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

本文章介绍 Angular 项目中 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页面，此处为 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

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

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

相关文章

Spring Boot 中利用 Jasypt 实现数据库字段的透明加密解密

Spring Boot 中利用 Jasypt 实现数据库字段的透明加密解密

1. 引言 1.1 什么是 Jasypt Jasypt（Java Simplified Encryption）是一个用于简化 Java 应用程序中加密操作的库。 1.2 为什么使用 Jasypt 简化加密操作：提供简单的 API 进行加密和解密。透明加密：自动处理加密和解密过程，无需手动干预。多种加密算法：支持多种加密算法，…
阅读更多...
Linux的: /proc/sys/net/ipv6/conf/ 笔记250405

Linux的: /proc/sys/net/ipv6/conf/ 笔记250405

Linux的: /proc/sys/net/ipv6/conf/ /proc/sys/net/ipv6/conf/ 是 Linux 系统中用于 动态配置 IPv6 网络接口参数 的核心目录。它允许针对不同网络接口&#xff08;如 eth0、wlan0&#xff09;或全局设置&#xff08;all&#xff09;调整 IPv6 协议栈的行为。 它通过虚拟文件系…
阅读更多...
Spring Cloud 框架为什么能处理高并发

Spring Cloud 框架为什么能处理高并发

Spring Cloud框架能够有效处理高并发场景&#xff0c;核心在于其微服务架构设计及多组件的协同作用&#xff0c;具体机制如下&#xff1a; 一、分布式架构设计支撑高扩展性 服务拆分与集群部署 Spring Cloud通过微服务拆分将单体系统解耦为独立子服务&#xff0c;每个服务可独…
阅读更多...
无人机智慧路灯杆：智慧城市的‘全能助手’

无人机智慧路灯杆：智慧城市的‘全能助手’

在城市发展的进程中&#xff0c;智慧路灯杆作为智慧城市建设的关键载体&#xff0c;正逐步从传统的照明设备转型为集多种功能于一体的智能基础设施。无人机与智慧路灯杆的创新性融合&#xff0c;为城市管理和服务带来了全新的变革与机遇。 一、无人机智慧路灯杆的功能概述 照…
阅读更多...
Libevent UDP开发指南

Libevent UDP开发指南

UDP 与 TCP 的核心区别 无连接：不需要建立/维护连接 不可靠：不保证数据包顺序和到达 高效：头部开销小，没有连接管理负担 支持广播/多播：可以向多个目标同时发送数据 一、基础UDP服务器实现 1. 创建 UDP 套接字 #include <event2/event.h> #include <event2/lis…
阅读更多...
基于阿里云可观测产品构建企业级告警体系的通用路径与最佳实践

基于阿里云可观测产品构建企业级告警体系的通用路径与最佳实践

前言 1.1 日常生活中的告警 任何连续稳定运行的生产系统都离不开有效的监控与报警机制。通过监控&#xff0c;我们可以实时掌握系统和业务的运行状态&#xff1b;而报警则帮助我们及时发现并响应监控指标及业务中的异常情况。 在日常生活中&#xff0c;我们也经常遇到各种各样…
阅读更多...
智能多媒体处理流水线——基于虎跃办公API的自动化解决方案

智能多媒体处理流水线——基于虎跃办公API的自动化解决方案

在内容爆炸的时代&#xff0c;多媒体文件处理&#xff08;图片压缩、视频转码、音频降噪&#xff09;已成为内容生产者的日常挑战。本文将演示如何基于虎跃办公的多媒体处理API&#xff0c;构建自动化处理流水线&#xff0c;实现&#xff1a; 批量文件智能分类格式自动转换质量…
阅读更多...
01-STM32（介绍、工具准备、新建工程）p1-4

01-STM32（介绍、工具准备、新建工程）p1-4

文章目录 工具准备和介绍硬件设备stm32简介和arm简介stm32简介STM32命名规则STM32选型STM32F103C8T6最小系统板引脚定义STM32启动配置STM32最小系统电路ARM简介 软件安装注册器件支持包安装ST-LINK驱动安装USB转串口驱动 新建工程创建stm32工程STM32工程编译和下载型号分类及缩…
阅读更多...
【ABAP】REST/HTTP技术（一）

【ABAP】REST/HTTP技术（一）

1、概念 1.1、SAP 如何提供 Http Service 如果要将 SAP 应用程序服务器 &#xff08;application server&#xff09;作为 http 服务提供者&#xff0c;需要定义一个类&#xff0c;这个类必须实现 IF_HTTP_EXTENSION 接口。IF_HTTP_EXTENSION 接口只有一个方法 HANDLE_REQUEST。…
阅读更多...
[实战] linux驱动框架与驱动开发实战

[实战] linux驱动框架与驱动开发实战

linux驱动框架与驱动开发实战 Linux驱动框架与驱动开发实战一、Linux驱动框架概述1.1 Linux驱动的分类1.2 Linux驱动的基本框架 二、Linux驱动关键API详解2.1 模块相关API2.2 字符设备驱动API2.3 内存管理API2.4 中断处理API2.5 PCI设备驱动API 三、Xilinx XDMA驱动开发详解3.1…
阅读更多...
1. hadoop 集群的常用命令

1. hadoop 集群的常用命令

1.上传文件 1)hadoop fs -put words.txt /path/to/input/ 2)hdfs dfs -put words.txt /path/wc/input/ 2.获取hdfs中的文件 hadoop fs -get /path/wc/input/words.txt 3.合并下载多个文件 hadoop fs -getmerge /path/wc/input/words.txt /path/wc/input/words2.txt 4.查…
阅读更多...
Keepalived+LVS+nginx高可用架构

Keepalived+LVS+nginx高可用架构

注明&#xff1a;所有软件已经下载好&#xff0c;防火墙和SELinux已经全部关闭 一.搭建NFS 1.服务端 1.创建文件 [rootnfs ~]# mkdir -p /nfs/data 2、修改权限 [rootnfs ~]# chmod orw /nfs/data 3、写配置文件 [rootnfs ~]# cat /etc/exports /nfs/data 192.168.111.118(r…
阅读更多...
深度学习处理文本（13）

深度学习处理文本（13）

我们使用基于GRU的编码器和解码器来在Keras中实现这一方法。选择GRU而不是LSTM&#xff0c;会让事情变得简单一些&#xff0c;因为GRU只有一个状态向量&#xff0c;而LSTM有多个状态向量。首先是编码器&#xff0c;如代码清单11-28所示。 代码清单11-28　基于GRU的编码器 fro…
阅读更多...
HashMap 底层原理详解

HashMap 底层原理详解

1. 核心数据结构 JDK 1.7 及之前&#xff1a;数组 链表 JDK 1.8 及之后&#xff1a;数组 链表/红黑树&#xff08;链表长度 ≥8 时转红黑树&#xff0c;≤6 时退化为链表&#xff09; // JDK 1.8 的 Node 定义&#xff08;链表节点&#xff09; static class Node<K,V&g…
阅读更多...
使用MySQL时出现 Ignoring query to other database 错误

使用MySQL时出现 Ignoring query to other database 错误

Ignoring query to other database 错误 当在远程连接软件中输入MySQL命令出现该错误 导致错误原因是&#xff1a;登录mysql时账户名没有加上u 如果出现该错误&#xff0c;退出mysql&#xff0c;重新输入正确格式进入即可&#xff01;
阅读更多...
哈尔滨工业大学：大模型时代的具身智能

哈尔滨工业大学：大模型时代的具身智能

大家好&#xff0c;我是樱木。 机器人在工业领域&#xff0c;已经逐渐成熟。具身容易&#xff0c;智能难。 机器人-》智能机器人&#xff0c;需要自主能力&#xff0c;加上通用能力。 智能机器人-》人类&#xff0c;这个阶段就太有想象空间了。而最受关注的-类人机器人。 如何…
阅读更多...
Javascript代码压缩混淆工具terser详解

Javascript代码压缩混淆工具terser详解

原始的JavaScript代码在正式的服务器上,如果没有进行压缩,混淆,不仅加载速度比较慢,而且还存在安全和性能问题. 因此现在需要进行压缩,混淆处理. 处理方案简单描述一下: 1. 使用 terser 工具进行 安装 terser工具: # npm 安装 npm install terser --save-dev# 或使用 yarn 安…
阅读更多...
Java String 常用方法详解

Java String 常用方法详解

目录 一、获取字符串信息（一）获取字符串长度（二）获取指定索引处的字符（三）获取子字符串二、字符串比较（一）比较字符串内容（二）忽略大小写比较三、字符串转换（一）转换为大写（二）转换为小写四、字符串查找（一）查找子字符串的位置（二）从指定位置开始查找五、字符…
阅读更多...
Linux驱动开发练习案例

Linux驱动开发练习案例

1 开发目标 1.1 架构图 操作系统&#xff1a;基于Linux5.10.10源码和STM32MP157开发板&#xff0c;完成tf-a(FSBL)、u-boot(SSBL)、uImage、dtbs的裁剪&#xff1b; 驱动层&#xff1a;为每个外设配置DTS并且单独封装外设驱动模块。其中电压ADC测试&#xff0c;采用linux内核…
阅读更多...
leetcode-代码随想录-哈希表-赎金信

leetcode-代码随想录-哈希表-赎金信

题目 题目链接&#xff1a;383. 赎金信 - 力扣&#xff08;LeetCode&#xff09; 给你两个字符串&#xff1a;ransomNote 和 magazine &#xff0c;判断 ransomNote 能不能由 magazine 里面的字符构成。 如果可以&#xff0c;返回 true &#xff1b;否则返回 false 。 maga…
阅读更多...
最新文章

Copyright @ 2022~2023