llms.txt 完整文档索引请参见 llms.txt
工具
xiaohui
于收录

EmbedPDF | 任何 JS 项目都能嵌入的开源 PDF 查看器

EmbedPDF 是一个框架无关的开源 PDF 查看器,React / Vue / Svelte 和原生 JS 都能嵌。渲染用的是 Chrome 同源的 PDFium 引擎,自带批注和真正的涂黑删除。GitHub 4,493 Star,稳定版在 v2 分支,v3 官方暂不推荐上生产。

EmbedPDF — 官网首页。

EmbedPDF 官网首页

概述

EmbedPDF 是一个框架无关的开源 PDF 查看器:同一套能力可以嵌进 React、Vue、Svelte、Preact 或纯 JavaScript 项目,不必为每个框架重写一遍阅读层。项目在 GitHub 上有 4,493 Star、309 Fork(2026 年 9 月 18 日数据),npm 上核心包 @embedpdf/core 最近一个月的下载量是 177 万次。

它和多数浏览器 PDF 方案的差别在引擎。EmbedPDF 的渲染层叫 EmbedPDF Runtime,是一个基于 PDFium 的 fork——PDFium 是 Chrome 内置的 PDF 引擎。常见的开源替代方案,包括 Mozilla 的 PDF.js,走的是纯 JavaScript 自研渲染路线。

版本状态需要先说清楚:v3 正在开发,官方 README 直接用警告框标注「不推荐用于生产环境」,稳定版停在 v2 分支(最新 2.15.1,2026 年 9 月 16 日发布)。

产品基因

EmbedPDF 由 CloudPDF 团队维护。CloudPDF 是商业云 PDF 服务,官网称有 2500+ 组织、覆盖 134 个国家,做的是文档防下载、阅读行为追踪、访问前收集线索这类生意。EmbedPDF 是把它的前端查看能力开源出来的那一半。

这个出身解释了它的两个设计选择。

引擎选 PDFium,不选 PDF.js。 PDFium 是 Chrome 渲染 PDF 的那套代码,PDF 规范里那些边角情况——字体嵌入、表单字段、加密文档、畸形文件——它已经被 Chrome 的用户量磨了很多年。EmbedPDF 把它编译成 WASM 带进浏览器,等于继承这份兼容性,而不是重新发明一遍。

接口给两种,不给一种。 想要快,用 @embedpdf/snippet:一个 script 标签加一个容器 div,自带完整 UI 和工具栏,两行代码跑起来。想要控制,用 @embedpdf/core:这是 headless 包,只给引擎和 hooks,页面怎么画、按钮放哪,全部自己决定。官网的原话是「we provide the engine, you control the pixels」。

核心功能

注释与批注:高亮、便签、自由文本、手写墨迹,四类是内置的。

真正的涂黑(true redaction):这一点值得单独说。市面上不少查看器的「涂黑」只是在文字上盖一个黑色矩形,选中复制或提取文本时原文照样出来。EmbedPDF 的做法是把内容从文档里真正删除——这决定了它能不能被用在合同、病历、公文这类场景。

阅读体验:搜索、文本选择、缩放、旋转,滚动做了虚拟化——几百页的文档不会因为一次性渲染全部页面而卡死。

可插拔架构:仓库按包拆分为 core、engine、framework、plugin、viewer、default-stamps 六个目录,插件支持 tree-shaking——只打包用到的部分,不需要为没用上的功能付出体积代价。

最省事的接入方式是 snippet 版本:

<!-- 放一个容器 -->
<div id="pdf-viewer" style="height: 500px"></div>

<script async type="module">
  import EmbedPDF from '<https://cdn.jsdelivr.net/npm/@embedpdf/snippet@2/dist/embedpdf.js>';
  const viewer = EmbedPDF.init({
    type: 'container',
    target: document.getElementById('pdf-viewer'),
    src: '<https://snippet.embedpdf.com/ebook.pdf>'
  });
</script>

亮点对比

最直接的对手是 Mozilla 的 PDF.js——Firefox 的 PDF 能力就来自它,成熟度和验证年限都更硬。

维度EmbedPDFPDF.js
渲染引擎PDFium(Chrome 同源,编译为 WASM)自研纯 JavaScript
框架适配React / Vue / Svelte / Preact / 原生,官方维护各自绑定以原生为主,React 等生态靠社区封装
UI 形态snippet 开箱即用 + headless 完全自建自带默认查看器,深度改造要动源码
许可核心包 MIT,仓库整体 Apache-2.0Apache-2.0
成熟度v3 开发中,稳定版 v2Firefox 内置,十年以上生产验证

适合谁:需要在自家产品里嵌入 PDF 阅读或批注能力的团队;想把查看器 UI 完全做成自己产品风格、不愿被现成 UI 框住的项目;用 Svelte、Vue 这类 PDF.js 生态较薄的前端栈的团队;以及不愿接受商业 PDF SDK 授权绑定的团队。

不太适合谁:把稳定性放在第一位、不想碰「生产环境请用旧版本」这种提示的项目;只需要把文档转成图片或文本、不需要交互阅读的场景;需要厂商兜底 SLA 的企业采购。

开发者在怎么说

官网的客户评价区挂着两条署名反馈。Stirling-PDF 的 CTO 兼创始人 Anthony Stirling 谈的是插件架构:「喜欢这种模块化的插件设计——需要怎么集成、怎么定制,都能自己拿主意,社区也愿意帮忙。」另一条来自 Grella 创始人 Hamza Aitali,描述的迁移路径更直接:「在浏览器里跟 PDF.js 搏斗了很久之后,我们找到了 EmbedPDF,它对 Svelte 是一等支持。几分钟就跑通了,扩展性足够我们在上面做引用高亮。」

第二条值得多看一眼:它点到的正是 PDF.js 生态最常被抱怨的位置——非 React 框架的支持要靠社区封装,深度定制得动源码。不过这两条都出自厂商自己挑选的评价区,采样不代表整体口碑,当作「这类需求真实存在」的旁证即可。

限制与需要注意的点

第一,v3 不能上生产。README 的警告是官方的原话,稳定版走 v2 分支,写进依赖时别默认取 latest。

第二,许可是分层的,别只看徽章。仓库整体标注 Apache-2.0;但它同时声明,里面的 cloudpdf/server(可自托管的 CloudPDF 服务端)走 Fair Source 的 FCL-1.0-ALv2 许可——源码可以查看和修改,但自行部署运行需要有效的 CloudPDF 授权,每个版本在发布两年后自动转为 Apache-2.0。官网页脚写的是「Released under the MIT License」,npm 上 @embedpdf/core 标 MIT、@embedpdf/viewer 标 Apache-2.0。要用在关键位置,逐包看 LICENSE 比看一句宣传语可靠。

第三,项目还很年轻且贡献集中。仓库首次提交在 2025 年 1 月,目前 224 个未关闭 issue,贡献者以核心维护者为主。这类排期节奏的项目,遇到问题自行排查的比例会高于成熟项目,选型时可以把「愿意读源码」作为一条隐性成本算进去。

总结

PDF 是 Web 上最难处理的老格式之一:规范庞大、实现碎片化、各家浏览器渲染结果不一致。EmbedPDF 的判断是,与其再写一个 JavaScript 渲染器去追规范,不如直接把 Chrome 用了多年的 PDFium 搬进浏览器,把精力花在接口设计上——于是有了「开箱即用的 snippet」和「完全自控的 headless」两条路,以及一套按框架维护的绑定层。

这个判断成不成立,取决于两件事:v3 什么时候结束「不推荐生产」的状态,以及插件生态能不能撑起 PDF.js 多年积累的开发者惯性。

快速开始:

# 开箱即用(无需构建)
npm install @embedpdf/snippet

# 自建 UI
npm install @embedpdf/core

官网:embedpdf.com
在线演示:app.embedpdf.com
文档:embedpdf.com/docs
GitHub:github.com/embedpdf/embed-pdf-viewer

本文由「策思路 C456」(c456.com)团队撰稿。

复制成功后将正文粘贴到公众号后台即可发布