UI 概要

PDF Canvas、編集コントロール、ロケール、サムネイル Worker を設定します。

@univerjs-pro/pdfs-ui は PDF ユニットを Univer の標準ワークベンチにマウントし、Univer Office SDK のライセンスで提供されます。

パッケージの責務

パッケージ責務
@univerjs-pro/pdfsUNIVER_PDF ユニット、ドキュメントモデル、永続化される PDF コマンドを登録します。
@univerjs-pro/pdfs-uiブラウザーの Canvas、サムネイルレール、フッターをマウントし、既定でローカル編集コントロールを有効にします。
@univerjs-pro/pdfs-editor共同編集側の依存関係を宣言します。PDF UI のマウントや editor.enabled の制御は行いません。

UniverPdfsUIPlugin は UniverLicensePlugin と UniverPdfsPlugin に依存します。ライセンスを含む PDF の基本設定を完了してから UI プラグインを登録してください。

UI プラグインの登録

TypeScript
import { UniverPdfsUIPlugin } from '@univerjs-pro/pdfs-ui'import PdfsUIJaJP from '@univerjs-pro/pdfs-ui/locale/ja-JP'import '@univerjs-pro/pdfs-ui/lib/index.css'univer.registerPlugin(UniverPdfsUIPlugin)

PdfsUIJaJP を new Univer(...) に渡すロケールへマージします。このロケールには PDF のリボン、インスペクター、コンテキストメニュー、ページレールの文言が含まれます。

ビューアーモードと編集モード

プラグインは常にページサムネイルレール、PDF Canvas、フッターをマウントします。編集は既定で有効で、さらにリボン、コンテキストメニュー、インスペクター、クリップボード、挿入コマンド、編集アクションとコントローラーを登録します。

表示専用にする場合は編集コントロールを無効にします。

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

この設定が変更するのは、マウントされる UI と編集専用のコントローラーおよびサービスです。アクセス制御ではなく、保存済み PDF スナップショットも変更しません。

サムネイル Worker

thumbnailWorkerURL には文字列、URL、既存の Worker を指定できます。対象モジュールで、パッケージが公開する Worker ランタイムを起動します。

TypeScript
import { startPdfPageThumbnailWorker } from '@univerjs-pro/pdfs-ui'startPdfPageThumbnailWorker()
TypeScript
univer.registerPlugin(UniverPdfsUIPlugin, {  thumbnailWorkerURL: new URL('./pdf-thumbnail-worker.js', import.meta.url),})

この Worker は専用 Worker スコープで実行する必要があります。Worker が未設定、必要なブラウザー API がない、またはページがメインスレッド専用リソースを必要とする場合、サムネイルはメインスレッドで描画されます。

公開 API の境界

UI は内部で PDF コマンドとサービスを呼び出します。リボンにボタンがあっても、同名の公開メソッドがあるとは限りません。対応するプログラム編集は PDF Facade ガイド、変換はインポートとエクスポート、ブラウザー印刷は印刷を参照してください。

order、gridLayout、updateMenuConfig() でタブ・グループ・項目の順序、グリッド配置、実行時の更新を設定できます。ガイドにはカスタムメニューの Facade オプションへのリンクもあります。

このガイドはいかがですか?

© 2026 DreamNum Co., Ltd.