# UI 概覽

> 設定 PDF Canvas、編輯器控制項、語言套件和縮圖 Worker。

- Human documentation: [https://docs.univer.ai/zh-TW/guides/pdfs/ui/overview](https://docs.univer.ai/zh-TW/guides/pdfs/ui/overview)

- Agent Markdown: [https://docs.univer.ai/zh-TW/guides/pdfs/ui/overview.md](https://docs.univer.ai/zh-TW/guides/pdfs/ui/overview.md)

- Requested language: `zh-TW`

- Content language: `zh-TW`

- Documentation version: `1.2.0`

- Source: [pdfs/ui/overview.zh-TW.mdx](https://github.com/dream-num/documentation/blob/dev/content/guides/pdfs/ui/overview.zh-TW.mdx)

---

`@univerjs-pro/pdfs-ui` 會將 PDF 單元掛載到 Univer 的標準工作臺，並透過 Univer Office SDK 授權。

## 套件職責

| 套件                          | 職責                                              |
| --------------------------- | ----------------------------------------------- |
| `@univerjs-pro/pdfs`        | 註冊 `UNIVER_PDF` 單元、文件模型與可持久化的 PDF 命令。           |
| `@univerjs-pro/pdfs-ui`     | 掛載瀏覽器 Canvas、縮圖列與底欄；預設啟用本機編輯控制項。                |
| `@univerjs-pro/pdfs-editor` | 宣告協同編輯側的相依套件，不會掛載 PDF UI，也不控制 `editor.enabled`。 |

`UniverPdfsUIPlugin` 相依於 `UniverLicensePlugin` 和 `UniverPdfsPlugin`。請先完成具授權的 PDF 基礎設定，再註冊 UI 外掛。

## 註冊 UI 外掛

```ts
import { UniverPdfsUIPlugin } from '@univerjs-pro/pdfs-ui'
import PdfsUIZhTW from '@univerjs-pro/pdfs-ui/locale/zh-TW'

import '@univerjs-pro/pdfs-ui/lib/index.css'

univer.registerPlugin(UniverPdfsUIPlugin)
```

將 `PdfsUIZhTW` 合併到傳給 `new Univer(...)` 的語言套件中。此語言套件包含 PDF 功能區、屬性面板、快顯功能表與頁面列的文字。

## 檢視與編輯模式

外掛一律掛載頁面縮圖列、PDF Canvas 與底欄。編輯功能預設開啟，並額外註冊功能區、快顯功能表、屬性面板、剪貼簿、插入命令，以及編輯操作和控制器。

如果目前應用程式只需檢視 PDF，可以關閉編輯控制項：

```ts
univer.registerPlugin(UniverPdfsUIPlugin, {
  editor: { enabled: false },
})
```

此選項只會變更已掛載的 UI 以及編輯專用控制器和服務；它不是權限策略，也不會修改已儲存的 PDF 快照。

## 縮圖 Worker

`thumbnailWorkerURL` 接受字串、`URL` 或既有 `Worker`。對應模組必須啟動套件匯出的 Worker 執行階段：

```ts title="pdf-thumbnail-worker.ts"
import { startPdfPageThumbnailWorker } from '@univerjs-pro/pdfs-ui'

startPdfPageThumbnailWorker()
```

```ts
univer.registerPlugin(UniverPdfsUIPlugin, {
  thumbnailWorkerURL: new URL('./pdf-thumbnail-worker.js', import.meta.url),
})
```

此 Worker 必須在專用 Worker 作用域中執行。未設定 Worker、瀏覽器缺少所需 API，或頁面依賴只能在主執行緒解析的資源時，縮圖會退回主執行緒繪製。

## 公開 API 邊界

UI 會在內部呼叫 PDF 命令與服務；功能區中有按鈕並不表示存在同名公開方法。支援的程式化編輯請參閱 [PDF Facade 指南](https://docs.univer.ai/zh-TW/guides/pdfs/getting-started/facade.md)，格式轉換請參閱[匯入匯出](https://docs.univer.ai/zh-TW/guides/pdfs/features/import-export.md)，瀏覽器列印請參閱[列印](https://docs.univer.ai/zh-TW/guides/pdfs/features/print.md)。

## 選單順序與網格佈局

透過 [`order`、`gridLayout` 和 `updateMenuConfig()`](https://docs.univer.ai/zh-TW/guides/pdfs/features/core.md#menu-order-and-grid-layout) 設定頁籤、群組及選單項目的順序、網格位置與執行階段更新；指南也提供自訂選單 Facade 設定的入口。