@embedpdf/反应

使用 EmbedPDF 创建您自己的 PDF 查看器的响应组件和钩子 .

快开始

本指南构建一个小型 PDF 查看器: 页面、 文本人员可以选择、 缩放按钮、 a 高亮和保存按钮。 每个步骤都添加一个插件或一个控件,这样您就可以停止任何 台阶并有一个工作查看器.

1. 安装

你需要两个包:一个是框架,一个是引擎.

npm install @embedpdf/react @embedpdf/engine

每个特性都是从框架包中单独导入的,例如 @embedpdf/react/stage, (中文(简体) ), 所以,你不用的东西 从来没有达到你的捆绑.

2. 显示 PDF

一次创建引擎,然后把它给 <Viewer> 您想要的插件和文档 打开. <Stage> 显示页面,以及 <RenderLayer> 绘制每个 :

basic.tsx

import { Viewer, DocumentGate } from '@embedpdf/react/runtime';
import type { OpenInput } from '@embedpdf/react/runtime';
import { Stage, stagePlugin } from '@embedpdf/react/stage';
import { RenderLayer, renderPlugin } from '@embedpdf/react/render';
import { localEngine } from '@embedpdf/engine';

// The engine is created synchronously and costs nothing until first use, so
// a module-scope `const engine = …` is safe, even under SSR. Only opening a
// document does real work: the UI renders at t≈0.
const engine = localEngine();
const plugins = [stagePlugin(), renderPlugin()];

// The local engine opens bytes: fetch lazily, under the loading tab.
const welcome = async (): Promise<OpenInput> => {
  const response = await fetch('https://www.embedpdf.com/pdfs/welcome.pdf');
  return { kind: 'bytes', id: 'welcome', bytes: new Uint8Array(await response.arrayBuffer()) };
};

export default function App() {
  return (
    <Viewer engine={engine} plugins={plugins} initialDocuments={[{ source: welcome }]}>
      <div style={{ height: 500 }}>
        {/* Document UI is defined over a document: gate it on having one. */}
        <DocumentGate fallback={<p>Loading…</p>}>
          <Stage style={{ height: '100%' }}>{() => <RenderLayer />}</Stage>
        </DocumentGate>
      </div>
    </Viewer>
  );
}

localEngine() 所以在模块顶部创建它很安全,甚至 带有服务器侧渲染。 浏览器在挂载时启动它: 在 Web Worker in 背景,第一页在文档打开后立即显示。 发动机的 WebAssembly 是您自网站创建和加载的一部分 设置。 。 。 .

<DocumentGate> 显示其 fallback 直到文档打开为止,所以舞台永远不会变成 没有一个.

每个插件

每个插件为一导入行 。 注册插件并导入其组件来自 同一个地方:

文档

• 快开始: 一步一步地构建一个PDF取景器,其中包含文本选择,缩放按钮,亮点和保存按钮.
• 设置:服务器侧渲染,捆绑,字体,并亲自主持引擎.
• 如何运作:插件,你的用户界面如何与它们交谈,层层,以及哪个组件的谈话文件.
• 滚动、缩放和布局:布局,缩放模式,页面导航和触摸.

许可证

阿帕奇 - 2.0