Web SDK

コア機能

プラグイン情報

Univer PDFs のコア機能は、正式な PDF Unit、永続的な編集レイヤー、ブラウザーワークベンチで構成されます。インポートした PDF はソースの基準として保持され、確定した変更は Unit スナップショットに保存されて現在の文書として描画されます。

機能

  • PDF Unit モデル：ソース文書、ページ構造、リソース、永続的な編集内容を IPdfUnitData に保存します。
  • ページと要素の操作：ページの移動と挿入に加え、テキスト、リスト、表、画像、区切り線、注釈を編集できます。
  • ブラウザーワークベンチ：PDF ページの描画、サムネイル、選択、編集コントロール、クリップボード、インスペクター UI を提供します。
  • コマンドパイプライン：確定した変更を永続的なコマンドとミューテーションバッチで適用し、保存、元に戻す、やり直しで同じモデルを使用します。
  • Facade API：PDF、ページ、要素、ネイティブテキストの各オブジェクトから PDF Unit を作成、検索、編集、保存できます。

プラグインモード

インストール

Shell
pnpm add @univerjs/core @univerjs/design @univerjs/ui @univerjs-pro/license @univerjs-pro/pdfs @univerjs-pro/pdfs-ui

使用方法

TypeScript
import { UniverLicensePlugin } from '@univerjs-pro/license'import { UniverPdfsPlugin } from '@univerjs-pro/pdfs'import { UniverPdfsUIPlugin } from '@univerjs-pro/pdfs-ui'import PdfsUIEnUS from '@univerjs-pro/pdfs-ui/locale/en-US'import { LocaleType, mergeLocales, Univer } from '@univerjs/core'import { FUniver } from '@univerjs/core/facade'import DesignEnUS from '@univerjs/design/locale/en-US'import { UniverUIPlugin } from '@univerjs/ui'import UIEnUS from '@univerjs/ui/locale/en-US'import '@univerjs-pro/pdfs/facade'import '@univerjs/design/lib/index.css'import '@univerjs/ui/lib/index.css'import '@univerjs-pro/pdfs-ui/lib/index.css'const univer = new Univer({  locale: LocaleType.EN_US,  locales: {    [LocaleType.EN_US]: mergeLocales(DesignEnUS, UIEnUS, PdfsUIEnUS),  },})univer.registerPlugin(UniverUIPlugin, { container: 'app' })univer.registerPlugin(UniverLicensePlugin, {  license: process.env.CLIENT_LICENSE_TEXT,})univer.registerPlugin(UniverPdfsPlugin)univer.registerPlugin(UniverPdfsUIPlugin)const univerAPI = FUniver.newAPI(univer)const pdf = univerAPI.createPdf({ name: 'Untitled PDF' })

UniverPdfsPlugin は PDF Unit と永続的なコマンドを担当し、UniverPdfsUIPlugin はブラウザーのビューアーと編集コントロールを担当します。閲覧専用 UI では { editor: { enabled: false } } を指定します。コラボレーションを使うアプリケーションでは、必要なコラボレーションプラグインとともに @univerjs-pro/pdfs-editor を追加できます。

プリセットモード

Univer PDFs は現在プリセットパッケージを提供していません。PDF アプリケーションはプラグインモードで作成してください。

編集と表示の操作

開始リボンにはコピー、切り取り、貼り付け、ツールモード、注釈ツールがあります。挿入にはページ、テキストボックス、段落、リスト、表、画像、区切り線、表示にはズーム、全画面、注釈の表示切替、連続スクロールがあります。テキストや表を選ぶと、プロパティや表のスタイルなどのコンテキスト操作が表示されます。リボンを利用するには UniverPdfsUIPlugin の既定の editor.enabled: true を維持してください。

メニューの順序とグリッドレイアウト

既存の UniverUIPlugin 登録時に menu と ribbonType を設定します。これらは共通 UI のオプションであり、UniverPdfsUIPlugin には渡しません。次の例では PDFs の実際のメニュー項目 ID を使用します。

初期設定

TypeScript
import type { MenuConfig } from '@univerjs/ui'import { UniverUIPlugin } from '@univerjs/ui'const menu: MenuConfig = {  'ribbon.view': { order: -1 },  'ribbon.start.layout': { order: -1 },  'pdf.menu.tool.highlight': {    order: 1,    gridLayout: { row: 2, column: 1 },  },  'pdf.menu.tool.ink': {    order: 0,    gridLayout: { row: 1, column: 1 },  },}univer.registerPlugin(UniverUIPlugin, { container: 'app', ribbonType: 'grid', menu })

order は同じ階層のタブ、グループ、メニュー項目を昇順に並べます。項目を別のグループに移すことはありません。メニュー項目 ID は data-u-command 属性で確認できます。コマンド ID と同じとは限りません。

実行時の更新

@univerjs/ui/facade をインポートしてから、FUniver.newAPI(univer) で univerAPI を作成します。updateMenuConfig() は変更をマージし、未指定のフィールドを保持してメニューを更新します。後から登録されるメニューにも設定が適用されます。

TypeScript
import '@univerjs/ui/facade'univerAPI.updateMenuConfig({  'pdf.menu.tool.highlight': { gridLayout: { row: 2, column: 1, showLabel: true, width: 96 } },})

gridLayout はグリッド Ribbon のみに適用されます。各グループは 2 行で、row と column は 1 から始まります。明示的な座標が位置を決めるため、使用中のセルを入れ替える際は order だけでなく両方の項目を更新してください。未指定の任意フィールドは既存の設定または Schema を引き継ぎます。行・列の結合、ラベル、幅、アイコンサイズは IRibbonGridLayout を参照してください。

UniverPdfsUIPlugin の編集機能を有効にしてください。editor.enabled: false を指定すると製品の Ribbon は登録されません。メニューの上書き設定で未登録のボタンが作成されることはありません。

カスタムボタンとサブメニューの入口も createMenu()、createSubmenu() で order と gridLayout を指定し、appendTo() で登録できます。ポップアップ内には Ribbon のグリッドレイアウトは適用されません。

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

© 2026 DreamNum Co., Ltd.