ARTICLE · 1357713

这个 PDF 组件库火了!React、Vue 都能用!

发布时间：2026-11-15 08:31:53 最近访问：2026-11-15 08:31:54

在前端项目中，PDF 几乎是绕不开的一项功能。

比如企业后台要预览合同，在线教育平台要展示课程资料，工业监控系统要查看设备说明书，或者文档管理系统需要支持 PDF 搜索、批注和签名。

如果只是把 PDF 放到网页里，使用浏览器自带的预览能力就能解决。

但如果产品进一步提出要求：

支持缩放、旋转和页面跳转
支持文本搜索和内容选择
可以高亮、批注、添加印章
支持填写表单和电子签名
可以插入、删除、调整 PDF 页面
甚至需要对敏感内容进行永久脱敏

这时候，事情就没那么简单了。

自己从零开发一套 PDF 查看器，涉及 PDF 解析、页面渲染、交互操作、文件保存等多个环节，开发成本并不低。

最近发现一个值得前端开发者关注的开源项目：EmbedPDF。

它是一款面向 JavaScript 应用的开源 PDF 查看器，支持原生 JavaScript、React、Vue、Svelte 和 Angular。

而 EmbedPDF 3.0 更有意思的地方在于，它不是简单增加几个 PDF 功能，而是从底层重新组织了整个架构：完整查看器、Headless 组件、独立 PDF 引擎，三种使用方式可以按需选择。

EmbedPDF 到底是什么？

EmbedPDF 是一个可以嵌入 Web 应用的 PDF 查看器。

它的目标不是让开发者重新实现一套 PDF 阅读界面，而是把常见的 PDF 能力封装成可以直接使用的功能。

项目采用 Apache-2.0 开源许可证，核心引擎基于 PDFium，并通过 WebAssembly 在浏览器中运行。

简单理解，它主要解决三个问题：

PDF 怎么在网页中打开和渲染？
如何在 PDF 上实现搜索、批注、签名和编辑？
如何把这些功能集成到不同的前端框架中？

它支持的技术栈包括：

原生 HTML / JavaScript
React
Vue
Svelte
Angular

这意味着，无论你使用哪一种前端技术，都不必因为 PDF 功能而重新选择一套开发框架。

3.0 最大变化：不再只有一个完整查看器

这是 EmbedPDF 3.0 最值得关注的架构变化。

官方把它拆成了三个层次。

1. Ready-made Viewer：开箱即用的 PDF 查看器

如果你只想快速在页面中嵌入 PDF，不想自己设计工具栏、页面导航和交互界面，那么可以直接使用完整查看器。

它已经包含了常见的阅读界面和工具栏。

开发者只需要指定 PDF 文件地址，再根据需求调整配置，就能把查看器放进自己的应用。

例如，原生 HTML 可以这样使用：

<embedpdf-viewersrc="https://www.embedpdf.com/pdfs/welcome.pdf"style="height: 100vh"></embedpdf-viewer><scripttype="module"src="https://cdn.jsdelivr.net/npm/@embedpdf/viewer@3/dist/embedpdf.js"></script>

如果使用 React：

npm install @embedpdf/viewer-react

组件中直接使用：

import { PDFViewer } from'@embedpdf/viewer-react';exportfunctionApp() {return (<PDFViewersrc="https://www.embedpdf.com/pdfs/welcome.pdf"style={{height: '100vh' }}    />  );}

Vue、Svelte 和 Angular 也有各自对应的集成包。

这种方式特别适合企业后台、文档管理系统、在线资料库等场景。

2. Headless Components：自己设计界面，底层功能交给它

如果你不喜欢默认的 PDF 查看器界面，想要完全按照产品设计来布局，应该选择 Headless 方案。

Headless 的意思是：提供功能和状态，但不强制使用某套现成的 UI。

例如，你可能只需要：

PDF 页面渲染
缩放和旋转
文本搜索
页面缩略图
批注和标记

至于工具栏、按钮、菜单、弹窗和侧边栏，都由自己设计。

EmbedPDF 将这些能力拆分为插件和响应式绑定，开发者可以根据需要组合。

官方提供 React、Vue、Svelte 和 Angular 的 Headless 集成。

这就带来了一个很大的优势：既能复用成熟的 PDF 底层能力，又不需要接受固定的 UI 样式。

对于有统一设计规范的企业产品来说，这种方式尤其有价值。

3. EmbedPDF Engine：直接使用 PDF 引擎

如果你连现成的查看器都不需要，只想在自己的业务代码中处理 PDF，那么还可以直接使用 EmbedPDF Engine。

它负责 PDF 文档的底层操作，例如：

打开和读取 PDF
页面渲染
文本提取与搜索
表单处理
批注处理
文档修改和保存

浏览器环境下，Engine 通过 WebAssembly 和 Web Worker 运行 PDFium。

Node.js 环境则提供对应的原生运行时构建，支持 macOS、Linux 和 Windows。

这意味着它不只是一个页面组件，也可以作为 PDF 处理能力集成到更复杂的 JavaScript 应用中。

三种方式可以根据项目需求选择，不必为了使用 PDF 能力而把整个应用绑定到某个固定界面。

PDF 功能有多全面？不只是预览

如果只是打开 PDF，很多现成方案都能做到。

EmbedPDF 真正值得关注的是，它把阅读、编辑和交互功能做成了插件体系。

目前官方列出的功能覆盖了多个方面。

1. 阅读和浏览

日常 PDF 阅读需要的基础能力基本都有：

页面缩放
页面旋转
文本选择
文本搜索
页面缩略图
文档目录
附件查看
打印和下载
多文档标签页

例如，一个文档管理系统可以利用这些功能，让用户在不离开当前业务页面的情况下查看多个 PDF 文件。

2. 批注和标记

文档审阅是 PDF 应用中非常常见的需求。

EmbedPDF 支持：

文本高亮
下划线
删除线
手绘标记
便签
文本框
Callout 标注
几何图形
印章
评论和回复

这些能力可以用于合同审阅、资料校对、设计文件评审等场景。

3. 表单和电子签名

EmbedPDF 还支持 PDF 表单相关操作。

例如：

填写已有 PDF 表单
创建表单字段
绘制签名
输入签名
上传签名图片
对签名字段进行签署
检查签名信息

对于需要在线填写申请表、合同和业务单据的系统，这些功能能够减少不少重复开发工作。

不过，具体签署流程是否满足业务所需的法律、身份验证和合规要求，仍然需要单独评估，不能把 PDF 签名功能直接等同于完整的电子签约平台。

4. PDF 页面编辑

除了阅读和批注，它还支持对 PDF 页面进行操作：

旋转页面
移动页面
插入页面
复制页面
删除页面
撤销操作

例如，用户可以在网页中调整一份 PDF 的页面顺序，删除不需要的页面，再保存处理后的文档。

这对于在线文档处理工具来说，是比较实用的一组能力。

5. 真正的 PDF 内容脱敏

这个功能值得单独说一下。

普通 PDF 标记工具可能只是用黑色矩形遮住敏感文字。

但这并不意味着敏感内容已经从文件中删除，有些情况下，用户仍然可能通过复制文本或其他方式获取原始信息。

EmbedPDF 提供了 Redaction（内容脱敏）功能。

它的设计目标是标记指定文本或区域，并将对应内容从 PDF 文件中真正移除，而不是只在视觉上遮挡。

这对于合同、财务文件和包含个人信息的文档尤其重要。

当然，正式用于敏感文件处理时，仍然应该对导出后的 PDF 做独立验证，确认文字、图像、元数据和其他隐藏内容没有残留。

插件化架构：需要什么功能，就组合什么功能

EmbedPDF 3.0 并不是把所有功能都写进一个庞大的组件中。

它采用插件化架构，把不同的 PDF 能力拆分成独立模块。

例如：

插件	主要用途
`plugin-render`	PDF 页面渲染
`plugin-search`	文本搜索
`plugin-selection`	文本选择
`plugin-annotation`	PDF 批注
`plugin-form`	PDF 表单
`plugin-signature`	签名相关能力
`plugin-redaction`	内容脱敏
`plugin-page-edit`	页面编辑
`plugin-outline`	文档目录
`plugin-attachment`	附件处理
`plugin-measurement`	尺寸和面积测量
`plugin-history`	操作历史

这样做的好处是，开发者可以按照实际需求组织查看器。

例如，一个只用于阅读的 PDF 页面，不一定需要加载表单编辑、电子签名和脱敏相关功能。

而一个合同管理系统，则可以按需组合批注、签名、表单和页面编辑能力。

这也让 EmbedPDF 更适合需要深度定制的业务系统。

底层 PDF 引擎：PDFium + WebAssembly

如果你对技术架构感兴趣，这部分值得了解。

EmbedPDF 的底层并不是自己从零实现 PDF 文件解析和渲染。

它基于 PDFium。

PDFium 是 Google 开源的 PDF 渲染引擎，被广泛用于 PDF 相关软件和浏览器项目中。

EmbedPDF 在此基础上构建自己的运行时和 JavaScript API，并通过 WebAssembly 将引擎运行在浏览器中。

整体流程可以简单理解为：

JavaScript / React / Vue          |          v     EmbedPDF Viewer          |          v     插件与功能层          |          v      EmbedPDF Engine          |          v     PDFium Runtime          |          v       PDF 文档

浏览器中的 PDF 处理主要在本地完成：

PDF 文件在用户浏览器侧打开。
WebAssembly 负责底层 PDF 处理。
Web Worker 承担引擎运行任务。
JavaScript 通过统一 API 控制文档和查看器。

这意味着，使用开源 EmbedPDF 本地引擎时，不需要为了基本的 PDF 查看和处理功能，默认把文件上传到某个第三方 PDF 服务。

不过，如果项目需要多人实时协作、权限控制、云端存储或服务端处理，就需要考虑它背后的 CloudPDF 产品，而不是把这些能力误认为开源本地引擎已经全部包含。

如何快速集成到项目中？

如果想体验 EmbedPDF 3.0，可以从最简单的方式开始。

原生 JavaScript / HTML

可以直接通过 CDN 引入：

<embedpdf-viewersrc="https://www.embedpdf.com/pdfs/welcome.pdf"style="height: 100vh"></embedpdf-viewer><scripttype="module"src="https://cdn.jsdelivr.net/npm/@embedpdf/viewer@3/dist/embedpdf.js"></script>

React 项目

安装：

npm install @embedpdf/viewer-react

使用：

import { PDFViewer } from'@embedpdf/viewer-react';functionApp() {return (<divstyle={{height: '100vh' }}><PDFViewersrc="/documents/example.pdf"style={{height: '100%' }}      /></div>  );}exportdefault App;