# @embedpdf/svelte 中文文档

规范地址：https://npmcn.com/package/%40embedpdf/svelte/

版本：3\.2\.0
npm 元数据更新时间：2026-11-11T23:26:04.570Z
中文译文更新时间：2026-11-14T06:45:06.531Z
软件包许可：Apache-2\.0

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40embedpdf/svelte
原文对照：https://npmcn.com/package/%40embedpdf/svelte/?lang=original
项目主页：https://github.com/embedpdf/embed-pdf-viewer#readme
源码仓库：https://github.com/embedpdf/embed-pdf-viewer

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：452 kB，283 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：31 个
- peer 依赖：svelte ^5\.29\.0
- 首次发布：2026-10-14T01:04:58.017Z
- 最新版本发布：2026-11-11T23:26:04.378Z
- 近 30 天下载量：2213（2026-10-14 至 2026-11-12，npm 官方下载统计）
- 已发布版本数：13（近 12 个月 13 个）

## 中文简介

用 EmbedPDF 构建您自己的 PDF 查看器的 Svelte 5 组件和功能 .

## 安装

```sh
npm install @embedpdf/svelte
```

也可以使用：`pnpm add @embedpdf/svelte`、`yarn add @embedpdf/svelte`、`bun add @embedpdf/svelte`

## README

# @embedpdf/ svelte (英语)

用 EmbedPDF 构建您自己的 PDF 查看器的 Svelte 5 组件和功能 .

## 快开始

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

### 1\. 安装

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

```sh
npm install @embedpdf/svelte @embedpdf/engine
```

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

### 2\. 显示 PDF

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

**`App.svelte`**

```svelte
<script lang="ts" module>
  import { DocumentGate, Viewer, type OpenInput } from '@embedpdf/svelte/runtime';
  import { RenderLayer, renderPlugin } from '@embedpdf/svelte/render';
  import { Stage, stagePlugin } from '@embedpdf/svelte/stage';
  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()) };
  };
</script>

<Viewer {engine} {plugins} initialDocuments={[{ source: welcome }]}>
  <div style="height: 500px">
    <!-- Document UI is defined over a document: gate it on having one. -->
    <DocumentGate>
      {#snippet fallback()}
        <p>Loading…</p>
      {/snippet}
      <Stage style="height: 100%">
        <RenderLayer />
      </Stage>
    </DocumentGate>
  </div>
</Viewer>
```

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

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

## 每个插件

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

| 插件 | 它给你什么 | 从 |
| :-- | :-- | :-- |
| [阶段](https://www.embedpdf.com/docs/headless/svelte/viewing/stage) | 滚动、缩放、布局、页面导航 | `@embedpdf/svelte/stage` |
| [渲染器](https://www.embedpdf.com/docs/headless/svelte/viewing/render) | 每个缩放、深角瓦片的清晰页 | `@embedpdf/svelte/render` |
| [链接](https://www.embedpdf.com/docs/headless/svelte/viewing/links) | 可点击的网页和网站链接 | `@embedpdf/svelte/link` |
| [选择](https://www.embedpdf.com/docs/headless/svelte/text/selection) | 选择和复制文本 | `@embedpdf/svelte/selection` |
| [搜索](https://www.embedpdf.com/docs/headless/svelte/text/search) | 查找文本, 并显示每个匹配 | `@embedpdf/svelte/search` |
| [说明](https://www.embedpdf.com/docs/headless/svelte/annotations) | 突出显示、注解、形状、自由文本和你自己的工具 | `@embedpdf/svelte/annotation` |
| [邮票](https://www.embedpdf.com/docs/headless/svelte/annotations/stamps) | 邮票图书馆,通过点击或编码放置 | `@embedpdf/svelte/stamp` |
| [计量](https://www.embedpdf.com/docs/headless/svelte/annotations/measurements) | 实际规模的距离、周边和地区 | `@embedpdf/svelte/measurement` |
| [编辑](https://www.embedpdf.com/docs/headless/svelte/annotations/redaction) | 永远删除内容 | `@embedpdf/svelte/redaction` |
| [表单](https://www.embedpdf.com/docs/headless/svelte/forms) | 填充和建造PDF表格 | `@embedpdf/svelte/form` |
| [签署](https://www.embedpdf.com/docs/headless/svelte/forms/signatures) | 签署文件和检查签名 | `@embedpdf/svelte/signature` |
| [页面编辑](https://www.embedpdf.com/docs/headless/svelte/documents/pages) | 旋转、重排、插入和删除页面 | `@embedpdf/svelte/page-edit` |
| [元数据](https://www.embedpdf.com/docs/headless/svelte/documents/metadata) | 文件的标题、作者和您自己的字段 | `@embedpdf/svelte/metadata` |
| [字体](https://www.embedpdf.com/docs/headless/svelte/documents/fonts) | 文档的字体可以写入, 绘制为引擎写入的字体 | `@embedpdf/svelte/fonts` |
| [大纲](https://www.embedpdf.com/docs/headless/svelte/documents/outline) | 文档的大纲(其书签),用于显示、跟踪和编辑 | `@embedpdf/svelte/outline` |
| [附录](https://www.embedpdf.com/docs/headless/svelte/documents/attachments) | 包含 PDF 文件: 列出、保存、附加和删除 | `@embedpdf/svelte/attachment` |
| [行动](https://www.embedpdf.com/docs/headless/svelte/documents/actions) | PDF 本身做什么:按钮、脚本、打印 | `@embedpdf/svelte/actions` |
| [查看管理器](https://www.embedpdf.com/docs/headless/svelte/documents/tabs) | 几个文件并存 | `@embedpdf/svelte/view-manager` |
| [互动](https://www.embedpdf.com/docs/headless/svelte/ui/tools) | 活动工具、光标和触摸 | `@embedpdf/svelte/interaction` |
| [图标](https://www.embedpdf.com/docs/headless/svelte/ui/commands) | 用标签、图标和快捷键命名动作 | `@embedpdf/svelte/commands` |
| [贝壳](https://www.embedpdf.com/docs/headless/svelte/ui/panels) | 打开哪些面板、对话框和菜单 | `@embedpdf/svelte/shell` |
| [翻译](https://www.embedpdf.com/docs/headless/svelte/ui/translations) | 您的用户语言UI | `@embedpdf/svelte/i18n` |

## 文档

-   [快开始](https://www.embedpdf.com/docs/headless/svelte/quick-start): 一步一步地构建一个PDF取景器,其中包含文本选择,缩放按钮,亮点和保存按钮.
-   [设置](https://www.embedpdf.com/docs/headless/svelte/setup):服务器侧渲染,捆绑,字体,并亲自主持引擎.
-   [如何运作](https://www.embedpdf.com/docs/headless/svelte/concepts/how-it-works):插件,你的用户界面如何与它们交谈,层层,以及哪个组件的谈话文件.
-   [滚动、缩放和布局](https://www.embedpdf.com/docs/headless/svelte/viewing/stage):布局,缩放模式,页面导航和触摸.

## 许可证

阿帕奇 - 2.0

## 常见问题

### @embedpdf/svelte 是什么？

用 EmbedPDF 构建您自己的 PDF 查看器的 Svelte 5 组件和功能 \.

### 如何安装 @embedpdf/svelte？

在项目目录运行 npm install @embedpdf/svelte，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：svelte（^5\.29\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @embedpdf/svelte 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @embedpdf/svelte 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @embedpdf/svelte 可以商用吗？

@embedpdf/svelte 使用 Apache-2\.0 许可。宽松许可：允许商业使用、修改和再分发，并附带明确的专利授权；分发时需保留许可与 NOTICE 文件，修改过的文件要注明改动。以上为概括，不构成法律意见，请以许可原文为准。

### @embedpdf/svelte 的下载量有多少？

根据 npm 官方下载统计，@embedpdf/svelte 在 2026/10/14 – 2026/11/12 这 30 天内被下载 2,213 次，日均约 74 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @embedpdf/svelte 还在维护吗？

最新版本 3\.2\.0 发布于 2026/11/12（2 天前）；至今共发布 13 个版本，其中过去 12 个月发布了 13 个；首次发布于 2026/10/14。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。