Vue 项目使用 pdf.js 及 Elasticpdf 教程

摘要：本文章介绍如何在 Vue 中使用 pdf.js 及基于 pdf.js 的批注开发包 Elasticpdf。简单 5 步可完成集成部署，包括数据的云端同步，示例代码完善且简单，文末有集成代码分享。

Elasticpdf-快照.png

1. 工具库介绍与 Demo

1.1 代码包结构

ElasticPDF基于开源 pdf.js (Demo地址：https://mozilla.github.io/pdf.js/web/viewer.html)，增加了多种开箱即用的 PDF 批注功能。代码包延续了 pdf.js-dist 独立且完全离线的结构风格，仅增加了用于支持批注的离线 Javascript 代码，与 pdf.js-dist 一样可以快速完美集成到任何可以运行Javascript, HTML, CSS 的项目环境中，在公网及内网环境下运行。
项目结构-中文.png

1.2 Elasticpdf 在线 Demo

根据不同的功能及预算需求，有两个版本的产品可供选择，两者仅在最终的批注保存阶段有区别，产品 Demo 地址如下：

① 批注合成版: https://demos.libertynlp.com/#/pdfjs-annotation

② 专业批注版: https://www.elasticpdf.com/demo

2. 移动至 Vue 项目

移动 pdf.js 或 Elasticpdf 代码包到 Vue 项目的 public 文件夹下。
package-position.png

pdf.js 成功导入 Vue 快照
pdfjs-快照.png

3. 导入 viewer.html

① 通过 <iframe> 导入 elasticpdf 或 pdf.js 代码包中的 viewer.html 文件，注意路径不要写错。

<!-- elasticpdf 示例 -->
<iframe @load='initialPDFEditor()' id='elasticpdf-iframe' src="elasticpdf/web/viewer.html"frameborder="0" width="100%" height="700px"></iframe><!-- pdf.js 示例 -->
<iframe @load='initialPDFEditor()' id='elasticpdf-iframe' src="pdfjs-3.2/web/viewer.html"frameborder="0" width="100%" height="700px"></iframe>

② 将 web 文件夹下 viewer.js 中 defaultUrl 默认值置空，否则在第 ① 步中导入 viewer.html 时会默认加载 compressed.tracemonkey-pldi-09.pdf 文件，影响自定义加载文件的流程。Elasticpdf 代码包中的 viewer.js 已默认修改完成。

// 原 defaultUrl 默认值
defaultOptions.defaultUrl = {value: "compressed.tracemonkey-pldi-09.pdf",kind: OptionKind.VIEWER
};// 置空后默认值
defaultOptions.defaultUrl = {value: "",kind: OptionKind.VIEWER
};

③ 在 Vue 页面中的 <iframe> onLoad() 函数下调用 initialApp() 函数，由于 pdf.js 和 elasticpdf 中的函数都是在 iframe 的作用域下，因此必须在 iframe load结束可获取 contentWindow 后再调用。

var elasticpdf_viewer = null;
function initialPDFEditor() {listenPDFEditorMessage();elasticpdf_viewer = document.getElementById('elasticpdf-iframe').contentWindow;console.log('elasticpdf_viewer', elasticpdf_viewer);var pdf_url="compressed.tracemonkey-pldi-09.pdf";elasticpdf_viewer.initialApp({'language': 'zh-cn', // 交互语言'pdf_url': pdf_url,'member_info': { //用户信息'id': 'elasticpdf_id','name': 'elasticpdf',},});
}// 监听 pdf 编辑等各种信息的回调
function listenPDFEditorMessage() {window.addEventListener('message', (e) => {if (e.data.source !== 'elasticpdf') {return;}// pdf 加载结束的回调，可以在此处导入服务器上储存的批注文件if (e.data.function_name === 'pdfLoaded') {console.log('PDF加载成功');reloadData();}});
}

④ pdf.js 初始化函数如下，主要内容为调用 PDFViewerApplication.open() 打开传入的文档链接，并使用 loadPdf() 函数监听文档是否初始化结束，最后通过 postMessage 广播加载状态至 Vue 页面。

<script type='text/javascript'>//初始化函数function initialApp(paras) {var oriUrl=paras['pdf_url'];PDFViewerApplication.open(oriUrl);interval = setInterval('loadPdf()', 1000);}//监听文档是否初始化完成var interval = null;function loadPdf() {if (PDFViewerApplication.pdfDocument == null) {console.info('Loading...');} else {//文档初始化完成console.log('PDF Load successfully');clearInterval(interval);//广播信息postPDFData("pdfLoaded", '');}}//广播 pdf.js 操作状态信息function postPDFData(function_name,new_content){window.parent.postMessage({"type":0,"source":"elasticpdf",'function_name':function_name,"content":new_content},'*');window.postMessage({"type":0,"source":"elasticpdf",'function_name':function_name,"content":new_content},'*');}
</script>

⑤ 需要注意的是 pdf.js 端和存放 pdf 文件的都要支持跨域，否则会报 CORS 跨域错误。具体来说如果服务器是通过 Java 或者 Python 等程序提供文档，则需要在程序中允许跨域；而如果是 nginx 服务器，则在配置中可以如下设置。

location / {add_header Access-Control-Allow-Origin *;add_header Access-Control-Allow-Headers *;add_header Access-Control-Expose-Headers  Accept-Ranges,Content-Range;add_header Accept-Ranges bytes;
}

对于 pdf.js 端的跨域，需要在 elasticpdf 或 pdf.js 的 viewer.js 中搜索 HOSTED_VIEWER_ORIGINS 并加入域名。

const HOSTED_VIEWER_ORIGINS = ["null", "http://mozilla.github.io", "https://mozilla.github.io"];

4. 导出 pdf 及批注数据

Elasticpdf 所生成批注数据的保存有两种方式，我们推荐方式二。pdf.js 默认将批注写入文档，无法分离保存。

4.1 方式一：批注写入PDF

将批注写入到 pdf 中然后下载整个文档，一般用户可以通过Ctrl+S快捷键和 UI 按钮来完成，这种方式完全不需要后端服务的支持。

在需要保存批注后 pdf 至服务器的场景中，可以通过如下代码实现。

// 绑定该函数至 dom 用于触发 pdf 保存
function getPDFData() {elasticpdf_viewer.getPDFData();
}// 接收pdf数据并且上传至服务器
window.addEventListener('message', (e) => {if (e.data.source != 'elasticpdf') {return;}// 接收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 数据，其中 pdf_base64 字符串数据可以快捷上传到服务器postService('upload-pdf-data', {'file_name':file_name,'file_id':'123ddasfsdffads','file_data':pdf_base64,});}
});

4.1 方式二：批注单独保存

针对云端同步批注的需求，单独将批注文件导出为JSON文件，传输并保存于服务器，之后加载回显后可继续编辑批注。

这样的方式仅需一个在线PDF原文件，只传输很小体积的批注(通常不到 1M 大小)，可以节约很多的存储和宽带费用。

// 在 pdf 批注编辑后的回调函数中可以读取所有批注文件并且上传至服务器
window.addEventListener('message', (e) => {if (e.data.source != 'elasticpdf') {return;}// 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'];postService('upload-annotation-data', {'file_name':file_name,'file_id':'123ddasfsdffads','file_annotation':annotation_content,});}
});

5. 重载 pdf 及批注数据

单独将 pdf 批注保存至服务器后，可以在加载 pdf 文件后再次从服务器中下载批注并且重载回显到 pdf 上继续编辑。

// 在 pdf 加载完成后的回调中可以从服务器请求相应的批注并重载于 pdf 上。
window.addEventListener('message', (e) => {if (e.data.source != 'elasticpdf') {return;}// pdf 加载完成的回调，可以在此处导入服务器上储存的批注文件if (e.data.function_name == 'pdfLoaded') {let file_name = 'tutorial.pdf'let annotation_content =await postService('get-annotation-data', {'file_name':'tutorial.pdf','file_id':'123ddasfsdffads',});// 批注重载回显于当前文件elasticpdf_viewer.setPureFileAnnotation({'file_annotation': annotation_content});}
});

以上的所有与服务器的交互需要前后端协同，后端服务器需要响应程序来接收和保存数据，对于 Elasticpdf 的用户我们有简单的 PHP、Python 及 Java 代码示例供参考。

前端发起请求的示例函数 postService() 代码如下。

// 与后端服务器进行网络通信的函数
async function postService(url, data) {var new_data = new URLSearchParams();var encrpte_data = data;new_data.append('data', encrpte_data);var base_url = "your-server-url";var posturl = base_url + url;const response = await fetch(posturl, {method: 'POST',headers: {},body: new_data, });const resp = await response.json();resp['data'] = JSON.parse(resp['data']);return resp;
}

总结

至此，pdf.js 及 elasticpdf 集成于 Vue 项目的代码完毕，带有 pdf.js 代码包的 Vue 示例项目包内容已上传至 Github(网址：https://github.com/ElasticPDF/Vue-use-pdf.js-elasticpdf)，可以直接下载。Elasticpdf 客户如有其他应用场景需求欢迎联系我们，我们将为您提供示例代码。

温馨提示：本文首发于 https://www.elasticpdf.com ，转载请注明出处：https://www.elasticpdf.com/blog/vue-pdf-annotation-plugin-library-online-api-examples-zh.html

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

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

相关文章

聊聊Spring AI的ChromaVectorStore

聊聊Spring AI的ChromaVectorStore

序 本文主要研究一下Spring AI的ChromaVectorStore 示例 pom.xml <dependency><groupId>org.springframework.ai</groupId><artifactId>spring-ai-starter-vector-store-chroma</artifactId></dependency>配置 spring:ai:vectorstore:…
阅读更多...
整数编码 - 华为OD统一考试(A卷、Java)

整数编码 - 华为OD统一考试(A卷、Java)

题目描述 实现一种整数编码方法，使得待编码的数字越小，编码后所占用的字节数越小。 编码规则如下: 编码时7位一组，每个字节的低7位用于存储待编码数字的补码。字节的最高位表示后续是否还有字节，置1表示后面还有更多的字节，置0表示当前字节为最后一个字节。采用小端序编…
阅读更多...
Linux 递归查找并删除目录下的文件

Linux 递归查找并删除目录下的文件

在 Linux 中&#xff0c;可以使用 find 命令递归查找并删除目录下的文件 1、示例命令 find /path/to/directory -type f -name "filename_pattern" -exec rm -f {} 2、参数说明 /path/to/directory&#xff1a;要查找的目标目录type f&#xff1a;表示查找文件&am…
阅读更多...
【笔记】VS中C#类库项目引用另一个类库项目的方法

【笔记】VS中C#类库项目引用另一个类库项目的方法

VS中C#类库项目引用另一个类库项目的方法 在 C# 开发中&#xff0c;有时我们需要在一个类库项目中引用另一个类库项目&#xff0c;但另一个项目可能尚未编译成 DLL。在这种情况下&#xff0c;我们仍然可以通过 Visual Studio 提供的项目引用功能进行依赖管理。 &#x1f3af; …
阅读更多...
第五讲（下）| string类的模拟实现

第五讲（下）| string类的模拟实现

string类的模拟实现 一、Member constants&#xff08;成员常数&#xff09;npos 二、Member functions&#xff08;成员函数&#xff09;constructor&#xff08;构造&#xff09;、destructor&#xff08;析构&#xff09;、c_str遍历1 &#xff1a;Iterators遍历2&#xff1…
阅读更多...
洛谷题单3-P4956 [COCI 2017 2018 #6] Davor-python-流程图重构

洛谷题单3-P4956 [COCI 2017 2018 #6] Davor-python-流程图重构

题目描述 在征服南极之后&#xff0c;Davor 开始了一项新的挑战。下一步是在西伯利亚、格林兰、挪威的北极圈远征。 他将在 2018 年 12 月 31 日开始出发&#xff0c;在这之前需要一共筹集 n 元钱。 他打算在每个星期一筹集 x 元&#xff0c;星期二筹集 xk 元&#xff0c;……
阅读更多...
【正点原子】如何设置 ATK-DLMP135 开发板 eth0 的开机默认 IP 地址

【正点原子】如何设置 ATK-DLMP135 开发板 eth0 的开机默认 IP 地址

开机就想让 eth0 乖乖用静态 IP&#xff1f;别再被 DHCP 抢走地址了&#xff01; 三步教你彻底掌控 ATK-DLMP135 的网络启动配置&#xff0c;简单粗暴&#xff0c;实测有效&#xff01; 正点原子STM32MP135开发板Linux核心板嵌入式ARM双千兆以太网CAN 1. 删除 dhcpcd 自动获取…
阅读更多...
以UE5第三方插件库为基础，编写自己的第三方库插件，并且能够在运行时复制.dll

以UE5第三方插件库为基础，编写自己的第三方库插件，并且能够在运行时复制.dll

首先&#xff0c;创建一个空白的C 项目&#xff0c;创建第三方插件库。如下图所示 编译自己的.Dll 和.lib 库&#xff0c;打开.sln 如下图 ExampleLibrary.h 的代码如下 #if defined _WIN32 || defined _WIN64 #define EXAMPLELIBRARY_IMPORT __declspec(dllimport) #elif d…
阅读更多...
正则表达式示例集合

正则表达式示例集合

目录&#xff1a; 1、精准匹配2、字符匹配3、参考示例3.1、一个合理的用户名正则表达式3.2、匹配 HTML 标签及内容3.3、其他示例3.4、微信号正则表达式3.5、QQ号正则表达式3.6、车牌号号正则表达式3.7、邮箱正则表达式 1、精准匹配 单字符模式&#xff0c;如 a&#xff0c;不论…
阅读更多...
2025 年前端与后端开发方向的抉择与展望-优雅草卓伊凡

2025 年前端与后端开发方向的抉择与展望-优雅草卓伊凡

2025 年前端与后端开发方向的抉择与展望-优雅草卓伊凡 在 2025 年这个科技浪潮奔涌的时代&#xff0c;软件开发领域持续变革&#xff0c;前端与后端开发方向的抉择&#xff0c;成为众多从业者和爱好者亟待破解的关键命题。卓伊凡就频繁收到这样的疑问&#xff1a;“2025 年了&…
阅读更多...
巧用数论与动态规划破解包子凑数问题

巧用数论与动态规划破解包子凑数问题

本文针对“包子凑数”问题&#xff0c;深入解析如何通过最大公约数&#xff08;GCD&#xff09;判断无法组成的数目是否无限&#xff0c;并结合动态规划高效求解有限情况下的具体数目。通过清晰的算法思路、代码实现及示例详解&#xff0c;揭秘数论与动态规划在组合问题中的巧妙…
阅读更多...
什么是数据

什么是数据

一、数据的本质定义​​ ​​哲学视角​​ 亚里士多德《形而上学》中"未加工的观察记录"现代认知科学&#xff1a;人类感知系统接收的原始刺激信号&#xff08;如视网膜光信号、听觉神经电信号&#xff09;信息论奠基人香农&#xff1a;消除不确定性的度量载体 ​​…
阅读更多...
FreeRTOS中互斥量实现数据共享优化

FreeRTOS中互斥量实现数据共享优化

在 FreeRTOS 中&#xff0c;当读操作远多于写操作时&#xff0c;使用**互斥量&#xff08;Mutex&#xff09;会导致读任务频繁阻塞&#xff0c;降低系统性能。此时&#xff0c;可以通过实现读者-写者锁&#xff08;Reader-Writer Lock&#xff09;**优化&#xff0c;允许多个读…
阅读更多...
国内虚拟电厂（VPP）管控平台供应商

国内虚拟电厂（VPP）管控平台供应商

以下是几家专注于虚拟电厂业务的供应商及其官网地址&#xff1a; 1. 华茂能联科技有限公司 官网地址&#xff1a;https://huamod.com/简介&#xff1a;华茂能联是分布式资源管理与虚拟电厂产品与服务提供商&#xff0c;团队汇聚了来自美国、欧洲和国内多个行业知名研究机构或…
阅读更多...
协方差相关问题

协方差相关问题

为什么无偏估计用 ( n − 1 ) (n-1) (n−1) 而不是 n n n&#xff0c;区别是什么&#xff1f; 在统计学中&#xff0c;无偏估计是指估计量的期望值等于总体参数的真实值。当我们用样本数据估计总体方差或协方差时&#xff0c;分母使用 ( n − 1 ) (n-1) (n−1) 而不是 n n…
阅读更多...
算法设计学习6

算法设计学习6

实验目的及要求&#xff1a; 目标是使学生学会分析数据对象的特点&#xff0c;掌握数据组织的方法和在计算机中的存储方式&#xff0c;能够对具体问题中所涉及的数据选择合适的逻辑结构、存储结构&#xff0c;进而在此基础上&#xff0c;对各种具体操作设计高效的算法&#xff…
阅读更多...
Java 三大特性—多态

Java 三大特性—多态

目录 1、多态的概念2、多态的条件3、向上转型3.1 概念3.2 使用场景 4、向下转型5、多态的优缺点 1、多态的概念 多态&#xff0c;通俗来讲就是多种形态&#xff0c;即对于同样的行为&#xff0c;不同的对象去完成会产生不同的状态。比如动物都会吃东西&#xff0c;小狗和小猫都…
阅读更多...
Ubuntu 24.04 LTS系统安装RTX 4090显卡驱动和cuda并部署ollama下载DeepSeek模型【自用详细版】

Ubuntu 24.04 LTS系统安装RTX 4090显卡驱动和cuda并部署ollama下载DeepSeek模型【自用详细版】

自己捣鼓玩玩哈&#xff0c;正好有机子 1. 安装驱动前的系统配置工作 卸载原有驱动并禁用nouveau sudo apt remove --purge nvidia*sudo cp /etc/modprobe.d/blacklist.conf /etc/modprobe.d/blacklist.conf.backup //备份文件sudo vim /etc/modprobe.d/blacklist.conf //修…
阅读更多...
【一篇搞定配置】一篇带你从配置到使用（PyCharm远程）完成服务器运行项目（配置、使用一条龙）【全网最详细版】

【一篇搞定配置】一篇带你从配置到使用（PyCharm远程）完成服务器运行项目（配置、使用一条龙）【全网最详细版】

&#x1f308; 个人主页&#xff1a;十二月的猫-CSDN博客 &#x1f525; 系列专栏&#xff1a; &#x1f3c0;各种软件安装与配置_十二月的猫的博客-CSDN博客 &#x1f4aa;&#x1f3fb; 十二月的寒冬阻挡不了春天的脚步&#xff0c;十二点的黑夜遮蔽不住黎明的曙光 目录 1.…
阅读更多...
Mamba模型

Mamba模型

为什么要提出mamba模型&#xff1f; transformer特点&#xff1a;训练快&#xff0c;推理慢&#xff0c;计算成本O&#xff08;n*n&#xff09; Rnn的特点&#xff1a;训练慢&#xff0c;推理快&#xff0c;容易遗忘 其实很容易理解&#xff0c;因为RNN的输入只包含前一个隐…
阅读更多...
最新文章

Copyright @ 2022~2023