弃用 PDF.js !快100倍的 PDF 预览神器!兼容Vue、React、Svelte!

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示例

<divid="pdf-viewer"style="height: 600px;"></div><scripttype="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';functionApp() {return (<divstyle={{height: '600px' }}><EmbedPDFconfig={{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