一款前端PDF插件

EmbedPDF一款Web PDF查看器，基于PDFium WebAssembly渲染，可快速集成到任何JavaScript项目（React、Vue、Svelte、原生JS等），提供开箱即用与无头组件两种模式。

一、核心优势

• 框架无关：完美兼容React、Vue、Svelte、Preact、原生JS等，无框架锁定。

• 性能强劲：底层用PDFium WebAssembly，渲染快、精度高，支持虚拟滚动。

• 两种集成模式

  • 开箱即用（@embedpdf/snippet）：2行代码快速集成，自带完整UI、工具栏、响应式布局。

  • 无头组件（@embedpdf/core）：仅提供渲染引擎，100%自定义UI，体积更小。

• 功能丰富：支持标注、文本搜索、缩放、旋转、内容编辑、插件化扩展。

与传统方案对比

二、快速集成（开箱即用）

1. 安装

npm install @embedpdf/snippet # 或 yarn add @embedpdf/snippet

2. 原生JS示例

<div id="pdf-viewer" style="height: 600px;"></div> <script type="module"> import { EmbedPDF } from '@embedpdf/snippet'; new EmbedPDF({ container: '#pdf-viewer', src: 'https://example.com/your-document.pdf' }); </script>

3. Vue示例

<template> <div style="height: 600px;"> <EmbedPDF :config="{ src: 'https://example.com/your-document.pdf' }" /> </div> </template> <script setup> import { EmbedPDF } from '@embedpdf/snippet/vue'; </script>

4. React示例

import { EmbedPDF } from '@embedpdf/snippet/react'; function App() { return ( <div style={{ height: '600px' }}> <EmbedPDF config={{ src: 'https://example.com/your-document.pdf' }} /> </div> ); }

三、无头组件（自定义UI）

npm install @embedpdf/core

import { createPDFEngine } from'@embedpdf/core'; const engine = createPDFEngine({ src: 'https://example.com/your-document.pdf' }); // 监听页面加载 engine.on('pageLoaded', (page) => { // 自定义渲染逻辑 }); // 翻页 engine.goToPage(2);

四、与传统方案对比

五、地址

• 官网：https://www.embedpdf.com

• GitHub：https://github.com/embedpdf/embed-pdf-viewer

• 演示：https://app.embedpdf.com