# @embedpdf/svelte-pdf-viewer 中文文档

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

版本：2\.15\.1
npm 元数据更新时间：2026-09-16T20:53:53.157Z
中文译文更新时间：2026-11-13T15:06:38.087Z
软件包许可：MIT

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

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

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

- 包体积（解压后）：13 kB，9 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：1 个
- peer 依赖：svelte \>=4\.0\.0
- 首次发布：2025-12-12T14:58:52.254Z
- 最新版本发布：2026-09-16T20:53:53.004Z
- 近 30 天下载量：15432（2026-10-14 至 2026-11-12，npm 官方下载统计）
- 已发布版本数：35（近 12 个月 35 个）

## 中文简介

嵌入 PDF 文档的 Svelte 组件

## 安装

```sh
npm install @embedpdf/svelte-pdf-viewer
```

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

## README

[![EmbedPDF logo](https://www.embedpdf.com/logo-192.png)](https://www.embedpdf.com/svelte-pdf-viewer)

# 斯维尔特 PDF 查看器

将 PDF 文件嵌入您的 Svelte 应用程序中最简单的方式, 并配有完整、 随时可用的接口 .

[![Documentation](https://img.shields.io/badge/View%20Docs-0af?style=for-the-badge&labelColor=000000)](https://www.embedpdf.com/svelte-pdf-viewer) [![Live Demo](https://img.shields.io/badge/Try%20Live%20Demo-ff1493.svg?style=for-the-badge&labelColor=000000)](https://app.embedpdf.com/) [![NPM Version](https://img.shields.io/npm/v/@embedpdf/svelte-pdf-viewer?style=for-the-badge&labelColor=000000&color=blue)](https://www.npmjs.com/package/@embedpdf/svelte-pdf-viewer)

* * *

## 页:1

完全通过,先进的例子,和API的参考文献,在我们的文件网站上:

👉 **[https://www.embedpdf.com/svelte-pdf-viewer 互联网档案馆的存檔,存档日期2013-12-11](https://www.embedpdf.com/svelte-pdf-viewer)**

* * *

## 导 言

这个 `@embedpdf/svelte-pdf-viewer` 软件包为Svelte应用程序提供完整、生产准备的PDF查看经验.

它被设计成最快的方式 让一个高质量的 PDF 查看器进入您的应用程序。 你不需要建立工具栏,处理布局逻辑, 或担心CSS——它只是工作.

### 关键特性

-   **准备使用** 包括被打磨的工具栏、边栏和缩略图.
-   **响应** ——能无缝地适应移动和桌面屏幕.
-   **主题** ——内置灯光/暗色模式及支持自定义品牌颜色.
-   **可配置** ——轻松地禁用你不需要的特性(如打印或下载).
-   **类型脚本** ——为优秀的开发者体验打出满打字.
-   **第4和5层** 与Svelte 4和Svelte 5项目合作.
-   **SvelteKit 准备** - 与安全部门改革无缝合作.

* * *

## \* 安装

```bash
npm install @embedpdf/svelte-pdf-viewer
# or
pnpm add @embedpdf/svelte-pdf-viewer
# or
yarn add @embedpdf/svelte-pdf-viewer
```

* * *

## 基本用途

导入 `PDFViewer` 组件,并带有PDF来源.

```svelte
<script>
  import { PDFViewer } from '@embedpdf/svelte-pdf-viewer';
</script>

<div style="height: 100vh;">
  <PDFViewer
    config={{
      src: 'https://snippet.embedpdf.com/ebook.pdf',
      theme: { preference: 'light' },
    }}
  />
</div>
```

就这样! 您现在有一个功能完备的 PDF 查看器 .

### SvelteKit 用户

该组件与斯维尔特基特无缝地工作. 由于它使用浏览器API(Canvas,WebAssembly),因此应该在浏览器上下文中使用. 组件在内部处理,但如果需要,也可以懒惰地加载.

* * *

## 🎨自定义

### 主题

取景器包括一个强大的主题系统. 您可以设置偏好 `'light'`, (中文(简体) ), `'dark'`,或 `'system'`,甚至覆盖特定的颜色来匹配你的品牌.

```svelte
<PDFViewer
  config={{
    src: '/document.pdf',
    theme: {
      preference: 'system',
      light: {
        accent: {
          primary: '#ff3e00', // Custom brand color (Orange)
        },
      },
    },
  }}
/>
```

### 残疾特征

方便定制用户界面,通过功能化功能,您不需要这些功能 `disabledCategories` 选项 :

```svelte
<PDFViewer
  config={{
    src: '/document.pdf',
    disabledCategories: ['annotation', 'print', 'export'],
  }}
/>
```

现有类别包括: `zoom`, (中文(简体) ), `annotation`, (中文(简体) ), `redaction`, (中文(简体) ), `document`, (中文(简体) ), `page`, (中文(简体) ), `panel`, (中文(简体) ), `tools`, (中文(简体) ), `selection`,以及 `history`。 。 。 .

* * *

## QQ 配置选项

这个 `config` prop 接受以下顶级选项 :

| 选项 | 类型 | 说明 |
| :-- | :-- | :-- |
| `src` | `string` | PDF 文档的 URL 或路径. |
| `theme` | `object` | 主题配置( 首选, 覆盖) . |
| `tabBar` | `'always' | 'multiple' | 'never'` | 控制文档标签栏的能见度 . |
| `disabledCategories` | `string[]` | 按类别隐藏特定的UI特性. |
| `i18n` | `object` | 配置本地和翻译 . |
| `annotations` | `object` | 配置注释默认值( 作者, 工具) . |
| `zoom` | `object` | 配置默认缩放级别和限制 . |
| `scroll` | `object` | 配置滚动方向和逻辑 . |

* * *

## QQ 回调和注册

使用回调道具访问取景器实例和插件注册.

```svelte
<script>
  import { PDFViewer } from '@embedpdf/svelte-pdf-viewer';

  function onready(registry) {
    const engine = registry.getEngine();
    console.log('Engine ready:', engine);
  }
</script>

<PDFViewer config={{ src: '/doc.pdf' }} {onready} />
```

### 可用的回调

| 回电 | 有效载荷 | 说明 |
| :-- | :-- | :-- |
| `oninit` | `EmbedPdfContainer` | 取景器容器初始化后起火. |
| `onready` | `PluginRegistry` | 插件注册准备好后被解除 . |

* * *

## QQ 无头模式

需要完全控制UI吗? 打造定制设计系统??

看看我们 **无头组件** 提供没有UI的存储和逻辑:

```bash
npm install @embedpdf/core @embedpdf/plugin-zoom ...
```

读取 [无头文档](https://www.embedpdf.com/docs/svelte/headless/introduction) 更多细节.

* * *

## 许可证

嵌入PDF为 [麻省理工学院执照](https://github.com/embedpdf/embed-pdf-viewer/blob/main/LICENSE)商业用途是受欢迎的——保持版权标题完整.

## 常见问题

### @embedpdf/svelte-pdf-viewer 是什么？

嵌入 PDF 文档的 Svelte 组件

### 如何安装 @embedpdf/svelte-pdf-viewer？

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

### @embedpdf/svelte-pdf-viewer 支持 TypeScript 吗？

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

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

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

### @embedpdf/svelte-pdf-viewer 可以商用吗？

@embedpdf/svelte-pdf-viewer 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

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

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

### @embedpdf/svelte-pdf-viewer 还在维护吗？

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