当前位置： 首页 > article >正文

使用 CDN 在国内加载本地 PDF 文件并处理批注：PDF.js 5.x 实战指南

article 2025/10/7 5:17:41

PDF.js 是一个强大的开源 JavaScript 库，用于在 Web 浏览器中渲染 PDF 文件。它由 Mozilla 开发，能够将 PDF 文档绘制到 HTML5 Canvas 或 SVG 上，无需任何本机代码或浏览器插件。对于许多需要在网页中展示 PDF 内容的应用场景来说，PDF.js 是一个非常理想的选择。

本文将重点探讨以下几个方面：

  1. 如何通过 CDN 在网页中引入 PDF.js 库。
  2. 在中国大陆地区选择哪些 CDN 服务以获得更好的访问速度和稳定性。
  3. 如何使用 PDF.js 加载用户选择的本地 PDF 文件。
  4. PDF.js 如何处理 PDF 文件中的批注，以及在使用批注功能时需要注意的事项。

我们将以 PDF.js 5.x 版本为例进行讲解，但核心原理同样适用于其他版本。

1. 通过 CDN 引入 PDF.js

使用 CDN (内容分发网络) 引入 PDF.js 是最常见和便捷的方式，它可以减轻服务器压力，并利用 CDN 节点的地理优势加速文件的传输。引入 PDF.js 主要需要两个文件：

  • pdf.min.js: PDF.js 的核心库，包含了主要的 API 和渲染逻辑。
  • pdf.worker.min.js: PDF.js 的 Worker 脚本，用于在后台线程中处理 PDF 的解析和渲染任务，避免阻塞主线程。

你需要在 HTML 文件的 <head> 或 <body> 标签中引入它们：

<script src="[CDN_URL_FOR_PDF.MIN.JS]"></script>
<script>// 必须设置 workerSrc 指向 worker 脚本的 URLpdfjsLib.GlobalWorkerOptions.workerSrc = '[CDN_URL_FOR_PDF.WORKER.MIN.JS]';
</script>

请将 [CDN_URL_FOR_PDF.MIN.JS] 和 [CDN_URL_FOR_PDF.WORKER.MIN.JS] 替换为实际的 CDN 链接。注意，workerSrc 必须设置，并且核心库和 worker 脚本的版本号必须严格匹配。

2. 中国大陆地区 CDN 选择建议

对于在中国大陆地区访问的用户，受限于网络环境，直接使用一些国际 CDN（如 Cloudflare CDN）可能会遇到访问速度慢或不稳定的问题。为了获得更好的用户体验，建议选择在中国有部署节点或与中国本地服务商有合作的 CDN。

以下是两个在中国大陆地区表现通常较好的开源库 CDN：

a. jsDelivr

jsDelivr 是一个免费的、高速的开源 CDN，它与中国的网宿、七牛云等服务商有深度合作，拥有广泛的中国大陆节点。对于开源库来说，jsDelivr 是一个非常可靠的选择。

你可以在 jsDelivr 上通过 npm/package-name@version/file-path 的格式找到 PDF.js 的文件。PDF.js 的 npm 包名是 pdfjs-dist。

例如，如果你需要引入接近 5.x 的某个稳定版本，你需要查找具体的版本号（请注意，pdf.js 版本号通常是构建号，例如 4.0.269 是一个近期版本，请替换为你实际需要的 5.x 对应的版本号）：

  • 核心库 (pdf.min.js):
    https://cdn.jsdelivr.net/npm/pdfjs-dist@版本号/build/pdf.min.js
    例：https://cdn.jsdelivr.net/npm/pdfjs-dist@4.0.269/build/pdf.min.js
  • Worker 脚本 (pdf.worker.min.js):
    https://cdn.jsdelivr.net/npm/pdfjs-dist@版本号/build/pdf.worker.min.js
    例：https://cdn.jsdelivr.net/npm/pdfjs-dist@4.0.269/build/pdf.worker.min.js

请访问 jsDelivr 官网或利用其搜索功能，查找 pdfjs-dist 包下您需要的具体 5.x 版本号和文件路径。

b. BootCDN

BootCDN 是一个由国内团队维护的、专注于服务国内开发者的开源库 CDN 平台。它同步了许多国外常用开源库的资源，并使用国内的 CDN 服务商提供加速。

你可以在 BootCDN 上搜索 “pdf.js” 或 “pdfjs-dist” 来找到对应的资源。BootCDN 的 URL 格式通常是 cdn.bootcdn.net/ajax/libs/library-name/version/file-path。

例如，如果你需要引入接近 5.x 的某个版本（同样，请替换为你实际需要的 5.x 对应的版本号）：

  • 核心库 (pdf.min.js):
    https://cdn.bootcdn.net/ajax/libs/pdf.js/版本号/pdf.min.js
    例：https://cdn.bootcdn.net/ajax/libs/pdf.js/4.0.269/pdf.min.js
  • Worker 脚本 (pdf.worker.min.js):
    https://cdn.bootcdn.net/ajax/libs/pdf.js/版本号/pdf.worker.min.js
    例：https://cdn.bootcdn.net/ajax/libs/pdf.js/4.0.269/pdf.worker.min.js

请访问 BootCDN 官网查找您需要的 pdf.js 版本对应的具体文件路径。

重要： 在选择 CDN 后，请务必替换 HTML 中的 [CDN_URL_FOR_PDF.MIN.JS] 和 [CDN_URL_FOR_PDF.WORKER.MIN.JS] 为您选择的 CDN 提供的实际链接，并确保两个文件的版本号一致。

3. 加载本地 PDF 文件

PDF.js 可以通过多种方式加载 PDF 源，包括 URL、 TypedArray (如 ArrayBuffer)、以及 Blob。要加载本地文件，最常用的方式是结合 <input type="file"> 和 FileReader API，将文件读取为 ArrayBuffer，然后传递给 PDF.js。

首先，在 HTML 中添加一个用于用户选择本地文件的输入框，以及一个用于渲染 PDF 的 canvas 元素：

<input type="file" id="pdfFile" accept=".pdf">
<canvas id="the-canvas"></canvas>

然后，使用 JavaScript 监听文件输入框的 change 事件，读取文件内容并使用 PDF.js 加载和渲染：

document.getElementById('pdfFile').addEventListener('change', function(event) {var file = event.target.files[0]; // 获取用户选择的第一个文件// 检查文件类型if (file.type !== "application/pdf") {alert(file.name + " 不是一个有效的 PDF 文件。");return;}var fileReader = new FileReader();// 当文件读取完成后fileReader.onload = function() {// 文件内容作为 ArrayBuffervar typedarray = new Uint8Array(this.result);// 使用 PDF.js 加载 PDF 文档const loadingTask = pdfjsLib.getDocument(typedarray);loadingTask.promise.then(function(pdf) {console.log('PDF 加载成功');// 以第一页为例进行渲染pdf.getPage(1).then(function(page) {console.log('页面加载成功');var scale = 1.5; // 缩放比例var viewport = page.getViewport({ scale: scale });// 获取 canvas 元素及其上下文var canvas = document.getElementById('the-canvas');var context = canvas.getContext('2d');// 设置 canvas 的尺寸与页面 viewport 匹配canvas.height = viewport.height;canvas.width = viewport.width;// 渲染页面到 canvasvar renderContext = {canvasContext: context,viewport: viewport};var renderTask = page.render(renderContext);renderTask.promise.then(function() {console.log('页面渲染完成');});});}, function(reason) {// PDF 加载失败的处理console.error('PDF 加载失败: ' + reason);});};// 读取文件内容为 ArrayBufferfileReader.readAsArrayBuffer(file);
});

这段代码演示了如何加载用户选择的本地 PDF 文件，并将其第一页渲染到页面上指定的 canvas 元素中。你可以根据需要扩展代码，实现多页加载、滚动、缩放等功能。

4. 关于批注功能

当涉及到 PDF 批注时，需要明确一点：PDF.js 的核心功能是渲染和显示 PDF 文档内容，这包括显示 PDF 文件本身已经包含的标准批注类型（如文本标记、高亮、形状等）。

但是，PDF.js (包括 5.x 版本) 本身并不提供创建**、编辑或保存新批注的内置交互式工具或 API。**

这意味着：

  • 如果你加载的本地 PDF 文件本身已经包含了批注，PDF.js 在渲染时会尝试将其显示出来。通常情况下，如果批注是标准的 PDF 批注类型，它们会随着页面内容一起被绘制到 Canvas 上，或者作为独立的图层数据提供（需要进一步处理）。
  • 如果你希望实现用户在网页上添加、修改或删除批注的功能，仅仅依靠 PDF.js 的核心库是不够的。你需要自己实现一套完整的批注交互逻辑和数据管理系统。这通常非常复杂，需要：
    • 监听鼠标事件，识别用户在 Canvas 上的操作。
    • 在 Canvas 上方叠加一个交互层（例如另一个 Canvas 或 SVG）来绘制批注的图形表示。
    • 根据用户操作，创建或修改批注的数据结构。
    • 将这些批注数据保存下来，如果需要保存回 PDF 文件本身，则需要更高级的库（如 PDF-LIB，它可以在浏览器端修改 PDF 文件，但功能有限）或依赖后端服务来处理 PDF 文件的修改。

建议：

如果你的需求是实现功能完善的交互式批注工具，考虑到其复杂性，你可能需要：

  • 深入研究 PDF.js 的底层 API 如何获取批注信息，并结合 Canvas 或 SVG 绘图技术自行实现批注的绘制和交互逻辑。
  • 考虑使用第三方的 JavaScript PDF SDK 或库，这些库通常基于 PDF.js 或其他渲染引擎构建，并提供了开箱即用的批注创建、编辑和保存功能。一些库声称与 PDF.js 兼容，或者提供了更高级的 API 来处理 PDF 文档的结构和批注。

总结

本文详细介绍了如何在中国大陆地区选择合适的 CDN（如 jsDelivr 或 BootCDN），通过 CDN 引入 PDF.js 5.x 版本，并使用 JavaScript 加载用户选择的本地 PDF 文件并将其渲染到网页的 Canvas 元素上。

同时，我们澄清了 PDF.js 在批注功能方面的能力：它能很好地显示 PDF 中已有的批注，但不包含创建和编辑批注的内置工具。如果你需要完整的交互式批注功能，需要进行额外的开发或考虑使用更专业的第三方库。

希望这篇博文对你在使用 PDF.js 构建 Web PDF 应用时有所帮助！

相关文章：

使用 CDN 在国内加载本地 PDF 文件并处理批注：PDF.js 5.x 实战指南

PDF.js 是一个强大的开源 JavaScript 库&#xff0c;用于在 Web 浏览器中渲染 PDF 文件。它由 Mozilla 开发&#xff0c;能够将 PDF 文档绘制到 HTML5 Canvas 或 SVG 上&#xff0c;无需任何本机代码或浏览器插件。对于许多需要在网页中展示 PDF 内容的应用场景来说&#xff0c…...

编程日记 2025/6/24 21:55:42

一些模型测试中的BUG和可能解决方法

一些模型测试中的BUG和可能解决方法 模型一直重复反馈相同内容的问题查找思路 如下顺序也是排查优先级 检查提示词和上下文，保证提示词中没有类似的要求，然后再查看上下文是不是占满了token长度。检查一下选择的model是不是本身就有这样的问题尝试增加repeat_penalty（1.05、…...

编程日记 2025/8/6 5:58:42

dotnet core c#调用Linux c++导出函数

1.声明C++导出函数 platform_export.h // // Created by dev on 5/6/25. //#ifndef PLATFORM_EXPORT_H #define PLATFORM_EXPORT_H #if defined(_WIN32)#ifdef LIB_EXPORTS#define LIB_API __declspec(dllimport)#else#define LIB_API __declspec(dllimport)#endif #else#ifde…...

编程日记 2025/10/1 1:26:58

多智能体学习CAMEL-调用api

可选模型范围 在ModelScope中的模型库中选择推理 API-Inference &#xff0c;里面的模型都可以选择&#xff0c;我们可以体验到最新的使用DeepSeek-R1数据蒸馏出的Llama-70B模型。 1.2.2 使用API调用模型 这里我们使用CAMEL中的ChatAgent模块来简单调用一下模型&#xff0c;…...

编程日记 2025/8/6 2:15:07

C++八股 —— vector底层

vector底层为动态数组 类构成 class vector : protected _Vector_base_Vector_base: _M_start&#xff1a;容器元素开始的位置_M_finish&#xff1a;容器元素结束的位置_M_end_of_storage&#xff1a;动态内存最后一个元素的下一个位置 构造函数 无参构造 根据性能优先规则&a…...

编程日记 2025/9/29 11:29:37

宁德时代区块链+数字孪生专利解析：去中心化身份认证重构产业安全底座

引言&#xff1a;当动力电池巨头瞄准数字孪生安全 2025年5月6日&#xff0c;金融界披露宁德时代未来能源&#xff08;上海&#xff09;研究院与母公司宁德时代新能源科技股份有限公司联合申请的一项关键专利——“身份验证方法、系统、电子设备及存储介质”。这项技术将区块链…...

编程日记 2025/10/7 5:16:46

1.微服务概念

1.单体、分布式、集群 先理解单体、集群、分布式这些概念 1.单体 一个系统业务量很小的时候,所有的代码都放在一个项目中&#xff0c;然后这个项目部署在一台服务器上就好了。整个项目所有的服务都由这台服务器提供。这就是单机结构. 1.1 优点 单体应用开发简单,部署测试简单 …...

编程日记 2025/9/29 16:49:04

基于SSM实现的健身房系统功能实现八

一、前言介绍&#xff1a; 1.1 项目摘要 随着社会的快速发展和人们健康意识的不断提升&#xff0c;健身行业也在迅速扩展。越来越多的人加入到健身行列&#xff0c;健身房的数量也在不断增加。这种趋势使得健身房的管理变得越来越复杂&#xff0c;传统的手工或部分自动化的管…...

编程日记 2025/10/6 13:15:51

Spring Boot配置文件详解：从入门到精通

一、Spring Boot配置文件概述 Spring Boot配置文件是应用程序的核心配置管理工具&#xff0c;它允许开发者在不修改代码的情况下调整应用行为。配置文件主要有两种格式&#xff1a; 文件类型优点缺点适用场景application.properties简单直观&#xff0c;键值对形式不支持复杂…...

编程日记 2025/10/2 3:51:35

Webug4.0靶场通关笔记24- 第29关Webshell爆破

目录 一、Webshell爆破原理分析 二、第29关webshell爆破渗透实战 1.环境搭建 2.打开靶场 3.暴力破解 &#xff08;1&#xff09;bp开启抓包模式 &#xff08;2&#xff09;输入密码12并抓包 &#xff08;3&#xff09;配置position &#xff08;4&#xff09;配置payl…...

编程日记 2025/10/2 1:07:32

CMA认证对象？CMA评审依据，CMA认证好处

CMA认证对象 CMA&#xff08;中国计量认证&#xff0c;China Metrology Accreditation&#xff09;的认证对象主要是第三方检测机构和实验室&#xff0c;包括&#xff1a; 独立检测机构&#xff1a;如环境监测站、产品质量检验所、食品药品检测机构等。 企业内部实验室&#…...

编程日记 2025/9/12 13:25:19

在 MyBatis 中实现控制台输出 SQL 参数

在 MyBatis 中实现控制台输出 SQL 参数&#xff0c;可通过以下方案实现&#xff1a; # 一、使用 MyBatis-Plus 的 SqlLogInterceptor&#xff08;推荐&#xff09; ‌适用场景‌&#xff1a;项目已集成 MyBatis-Plus&#xff08;3.5.3版本&#xff09; ‌配置步骤‌&#xff…...

编程日记 2025/6/25 7:19:28

深入解析网络联通性检测：ping 与 tracert 的原理、用法及实战应用

深入解析网络联通性检测&#xff1a;ping 与 tracert 的原理、用法及实战应用 在网络世界中&#xff0c;确保设备之间的联通性是一切网络服务正常运行的基础。无论是网络工程师排查故障&#xff0c;还是普通用户检查网络连接&#xff0c;ping和tracert&#xff08;在 Windows …...

编程日记 2025/10/6 9:28:23

LeetCode：101、对称二叉树

递归法&#xff1a; /*** Definition for a binary tree node.* public class TreeNode {* int val;* TreeNode left;* TreeNode right;* TreeNode() {}* TreeNode(int val) { this.val val; }* TreeNode(int val, TreeNode left, TreeNode right) {…...

编程日记 2025/10/6 12:46:19

从生产事故看软件质量保障：开发规范落实与时间资源矛盾的深度探讨

“穷则变&#xff0c;变则通&#xff0c;通则久。” —— 《周易系辞下》。在困境中要勇于变革&#xff0c;正如软件团队在遇到生产事故后&#xff0c;需要改变现有的开发方式和流程&#xff0c;以适应新的挑战。 在项目推进过程中&#xff0c;一场生产事故如晴天霹雳般袭来&am…...

编程日记 2025/10/1 23:48:00

Redis 常见数据类型

Redis 常见数据类型 一、基本全局命令详解与实操 1. KEYS 命令 功能&#xff1a;按模式匹配返回所有符合条件的键&#xff08;生产环境慎用&#xff0c;可能导致阻塞&#xff09;。 语法&#xff1a; KEYS pattern 模式规则&#xff1a; h?llo&#xff1a;匹配 hello, ha…...

编程日记 2025/9/29 13:20:35

TextRNN 模型实现微博文本情感分类

在自然语言处理&#xff08;NLP&#xff09;领域&#xff0c;文本情感分类是一项极具应用价值的任务。它能帮助企业分析用户反馈、社交媒体舆情监测等。本文将通过一段实际代码&#xff0c;带大家了解如何利用 PyTorch 框架和 TextRNN 模型&#xff0c;完成微博文本的情感分类工…...

编程日记 2025/9/25 9:57:30

SAP note 3565626 ： Baltimore CyberTrust 根证书即将过期

SAP note 3565626 &#xff1a; Baltimore CyberTrust 根证书即将过期 20250512 2025年5月9日 症状 您已收到来⾃ SAP Integration Suite/Cloud Integration 服务的通知邮件&#xff0c; 建议 Baltimore CyberTrust 根证书将于 2025 年 5 ⽉ 12 ⽇ 过期&#xff0c;其中 Balt…...

编程日记 2025/10/1 23:42:57

4.3 Thymeleaf案例演示：图书管理

本项目通过整合 Thymeleaf 实现了一个简单的图书管理系统。系统功能包括查询所有图书、按条件查询图书、根据用户角色显示按钮以及借阅图书。通过 Spring Boot 框架搭建项目&#xff0c;创建了用户和图书的实体类&#xff0c;以及图书的数据访问类和控制器。在 Thymeleaf 模板中…...

编程日记 2025/9/19 0:47:06

STM32GPIO输入实战-key按键easy_button库移植

STM32GPIO输入实战-key按键easy_button库移植 一&#xff0c;ebtn介绍二&#xff0c;ebtn移植三&#xff0c;组件库的思想组成1. 事件驱动 (Event-Driven) &#x1f6ce;️ —— 像按门铃2. 状态机 (State Machine) &#x1f6a6; —— 像红绿灯3. 回调函数 (Callback Function…...

编程日记 2025/10/5 20:12:05

【递归、搜索和回溯】递归、搜索和回溯介绍及递归类算法例题

个人主页 &#xff1a; zxctscl 专栏 【C】、 【C语言】、 【Linux】、 【数据结构】、 【算法】 如有转载请先通知 文章目录 递归、搜索和回溯递归搜索VS 深度优先遍历 VS 深度优先搜索 VS 宽度优先遍历 VS 宽度优先搜索 VS 暴搜回溯与剪枝 1 面试题 08.06. 汉诺塔问题1.1 分析…...

编程日记 2025/9/19 14:43:46

JDK8 HashMap红黑树退化为链表的机制解析

目录 1、数据结构&#xff1a; 2、Fail-Fast机制 2.1、核心作用 2.2、实现原理 2.3、触发场景 2.4、实现细节 2.5、对比 2.6、注意事项 3、核心结论 4、转化安全机制 4.1. 触发场景 4.2. 转换过程 4.3. 并发安全机制 5、设计原因 5.1. 性能权衡 5.2. 空间局部性…...

编程日记 2025/10/5 0:13:55

【基础】模型上下文协议（Model Context Protocol, MCP）根本原理与工作机制详解

一、MCP的根本原理 模型上下文协议&#xff08;MCP&#xff09;是一种标准化接口协议&#xff0c;旨在解决AI系统&#xff08;尤其是大型语言模型&#xff0c;LLM&#xff09;与外部工具、数据源之间的交互碎片化问题。其核心原理可以概括为以下三点&#xff1a; 统一接口抽象…...

编程日记 2025/9/19 14:44:00

霸王茶姬微信小程序自动化签到系统完整实现解析

霸王茶姬微信小程序自动化签到系统完整实现解析 技术栈&#xff1a;Node.js 微信小程序API MD5动态签名 一、脚本全景架构 功能模块图 #mermaid-svg-0vx5W2xo0IZWn6mH {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-s…...

编程日记 2025/9/19 8:04:17

北斗导航 ｜ RTKLib中重难点技术，公式，代码

Rtklib 一、抗差自适应卡尔曼滤波1. **核心难点**2. **公式与代码实现**二、模糊度固定与LAMBDA算法1. **核心难点**2. **LAMBDA算法实现**3. **部分模糊度固定技术**三、伪距单点定位与误差修正1. **多系统多频点修正**2. **接收机钟差与系统间偏差**四、动态模型与周跳处理1.…...

编程日记 2025/8/6 5:33:29

p2p虚拟服务器

ZeroTier Central ✅ 推荐工具&#xff1a;ZeroTier&#xff08;免费、稳定、跨平台&#xff09; ZeroTier 可以帮你把多台设备&#xff08;无论是否跨网&#xff09;加入一个虚拟局域网&#xff0c;彼此间可以像在同一个 LAN 中通信&#xff0c;UDP 视频、文件传输、SSH 等都…...

编程日记 2025/9/19 8:15:59

Python 爬虫基础入门教程（超详细）

一、什么是爬虫&#xff1f; 网络爬虫&#xff08;Web Crawler&#xff09;&#xff0c;又称网页蜘蛛&#xff0c;是一种自动抓取互联网信息的程序。爬虫会模拟人的浏览行为&#xff0c;向网站发送请求&#xff0c;然后获取网页内容并提取有用的数据。 二、Python爬虫的基本原…...

编程日记 2025/5/29 15:24:21

python实现点餐系统

使用python实现点餐系统的增加菜品及价格&#xff0c;删除菜品&#xff0c;查询菜单&#xff0c;点菜以及会员折扣价等功能。 代码&#xff1a; 下面展示一些 内联代码片。 # coding utf-8menu {拍黄瓜: 6, 小炒肉: 28, 西红柿炒蛋: 18, 烤鱼: 30, 红烧肉: 38, 手撕鸡: 45,…...

编程日记 2025/10/4 11:02:40

（三）毛子整洁架构（Infrastructure层/DapperHelper/乐观锁）

文章目录 项目地址一、Infrastructure Layer1.1 创建Application层需要的服务1. Clock服务2. Email 服务3. 注册服务 1.2 数据库服务1. 表配置Configurations2. Respository实现3. 数据库链接Factory实现4. Dapper的DataOnly服务实现5. 所有数据库服务注册 1.3 基于RowVersion的…...

编程日记 2025/9/19 8:15:59

探索Stream流：高效数据处理的秘密武器

不可变集合 stream流 Stream流的使用步骤&#xff1a; 先得到一条Stream流&#xff08;流水线&#xff09;&#xff0c;并把数据放上去 使用中间方法对流水线上的数据进行操作 使用终结方法对流水线上的数据进行操作 Stream流的中间方法 注意1&#xff1a;中间方法&#xff0…...

编程日记 2025/10/3 1:10:05