一款前端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，体积更小。
功能丰富：支持标注、文本搜索、缩放、旋转、内容编辑、插件化扩展。

与传统方案对比

方案	优势	劣势
EmbedPDF	易集成、高性能、可定制、框架无关、开源	较新，生态在完善
pdf.js	成熟、功能全	配置复杂、易报错、定制难
iframe/embed	零代码	无法定制、体验差、跨域限制
后端转图片	兼容性好	丢失文本、加载慢、无法交互

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

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);

四、与传统方案对比

方案	优势	劣势
EmbedPDF	易集成、高性能、可定制、框架无关、开源	较新，生态在完善
pdf.js	成熟、功能全	配置复杂、易报错、定制难
iframe/embed	零代码	无法定制、体验差、跨域限制
后端转图片	兼容性好	丢失文本、加载慢、无法交互

五、地址

官网：https://www.embedpdf.com
GitHub：https://github.com/embedpdf/embed-pdf-viewer
演示：https://app.embedpdf.com