福昕开发者文档中心

PDF 编辑模块 ​

PDF 编辑模块用于在 Viewer 中交互式编辑 PDF 页面内容，例如编辑页面上的文本、图片、路径、渐变对象，或新增文本、图片、形状对象。

版本说明

  • 在 10.0 版本之前，WebSDK 曾区分 Light package、Standard package 和 Full package。Light / Standard package 使用 Std Edit，Full package 默认使用 Adv Edit。
  • 从 10.0 版本开始，WebSDK 不再提供标准包(Standard package)。

如何选择 ​

SDK 提供的编辑能力包括 页面对象 API、Std Edit 和 Adv Edit，开发者可根据具体需求场景，选择对应的方式。

需求推荐方式说明
通过代码读取、添加或删除页面对象页面对象 API使用 PDFPage、GraphicsObject、TextObject、ImageObject、PathObject 等接口，详见 页面对象。
让用户在 Viewer 中做基础对象编辑Std Edit适合编辑文本、图片、路径对象，新增文本、图片和路径，设置基础文字样式。
需要完整编辑器体验Adv Edit适合 Touchup 文本编辑、对象筛选、形状和渐变编辑、文本块合并拆分、查找替换等高级交互。
只搜索或定位文本，不修改内容文本搜索请参阅 文本搜索。

UI 示例 ​

Std Edit 功能区 ​

ribbon of Edit

Adv Edit 功能区 ​

ribbon of Adv Edit

Adv Edit 右侧面板 ​

ribbon of the right panel of Adv Edit

常用入口 ​

如果只是使用完整默认 UI，一般不需要直接操作下面这些组件或 add-on。只有在自定义工具栏、替换编辑入口、或通过代码触发编辑能力时，才需要了解这些入口。

UIExtension 组件 ​

组件标签适合放在自定义模板、Ribbon 分组或 fragments 中。完整组件清单见 预配置组件 — 页面对象编辑插件中的组件。

分类组件用途
Adv Edit 入口
  • page-editor:edit-object-ribbon-dropdown
  • page-editor:edit-text
进入高级编辑工具，可编辑页面对象或 Touchup 文本内容。
Adv Edit 辅助工具
  • page-editor:join-split
  • page-editor:join / split / link / unlink / select-none / close
  • find-replace-button
文本块合并、拆分、链接及查找替换入口。
Adv Edit 新增对象
  • page-editor:add-text-button
  • page-editor:add-image-button
  • page-editor:add-shapes-ribbon-dropdown
新增文本、图片和形状对象。
Std Edit 入口
  • edit-pageobjects:edit-all-objects-button
  • add-image-ribbon-button
  • edit-text-object:add-text-ribbon-button
  • edit-pageobjects:path-objects-ribbon-dropdown
提供基础对象编辑，以及新增图片、文本和路径对象能力；右键菜单依赖 edit-graphics 中组件。

说明

编程接口 ​

Add-on API 适合通过代码主动进入编辑状态、执行查找替换，或设置编辑工具样式。

分类接口用途
Adv Edit Add-on API控制 Adv Edit 的页面对象编辑、Touchup 编辑和工具样式。相关能力需要 Adv Edit 模块和授权。
Adv Edit 查找替换 Add-on API查找并替换 PDF 页面文本，属于高级编辑相关能力。
Std Edit Add-on API控制 Std Edit 的路径与文本对象编辑相关能力；图形对象右键菜单等由 edit-graphics 提供。
基础页面对象 API
  • PDFPage.addGraphicsObject()
  • PDFPage.addImage() / addRichText()
  • PDFPage.getGraphicsObjectByIndex() / getGraphicsObjectsCount()
  • PDFPage.getGraphicsObjectAtPoint() / getGraphicsObjectsInRect() / getGraphicsObjectsByRect()
  • PDFPage.removeGraphicsObject()
  • GraphicsObject、TextObject、ImageObject、PathObject
直接读写页面内容对象，不依赖编辑 UI，适合程序化处理；详见 页面对象。

Adv Edit 切换为 Std Edit ​

完整 UI 默认展示 Adv Edit 相关入口。若没有 Adv Edit 授权，或只希望展示 Std Edit 的基础页面对象编辑能力，可以替换 Edit 选项卡中的相关组件。

推荐优先使用 fragments，因为它在初始化时完成布局替换，结构更清晰；Component API 更适合运行时动态调整。

方法 1：通过 fragments 参数修改 ​

初始化 PDFUI 时，通过 fragments 替换 Adv Edit 组件：

javascript
fragments: [
    {
        target: 'adv-edit-tab-group-mode',
        action: UIExtension.UIConsts.FRAGMENT_ACTION.REPLACE,
        template: `
            <group name="edit-tab-group-mode" retain-count="3">
                <edit-pageobjects:edit-all-objects-button @async></edit-pageobjects:edit-all-objects-button>
                <add-image-ribbon-button></add-image-ribbon-button>
                <edit-text-object:add-text-ribbon-button @async></edit-text-object:add-text-ribbon-button>
                <edit-pageobjects:path-objects-ribbon-dropdown @async></edit-pageobjects:path-objects-ribbon-dropdown>
            </group>
            `
    },
    {
        target: 'edit-tab-group-editor',
        action: UIExtension.UIConsts.FRAGMENT_ACTION.REPLACE,
        template: `
            <group name="edit-tab-group-font" retain-count="5" @require-modules="edit-text-object">
                <edit-text-object:text-bold-style-ribbon-button></edit-text-object:text-bold-style-ribbon-button>
                <edit-text-object:text-italic-style-ribbon-button></edit-text-object:text-italic-style-ribbon-button>
                <edit-text-object:font-color-picker></edit-text-object:font-color-picker>
                <edit-text-object:font-style-dropdown></edit-text-object:font-style-dropdown>
            </group>
            `
    }
]

备注

有关 fragments 参数更详细的信息，请参阅 UI Fragments。

方法 2：通过 Component 对象接口切换 ​

javascript
// 获取 Adv Edit 模块的编辑功能的 advEditTabGroupMode 组件
const advEditTabGroupMode = await pdfui.getComponentByName("adv-edit-tab-group-mode");
// 移除刚获取的 advEditTabGroupMode 组件
advEditTabGroupMode.remove();
// 获取 Adv Edit 模块的编辑功能的 advEditTabGroupEditor 组件
const advEditTabGroupEditor = await pdfui.getComponentByName("edit-tab-group-editor");
// 移除刚获取的 advEditTabGroupEditor 组件
advEditTabGroupEditor.remove();
// 获取 Edit 选项卡下第一个包含 hand 功能的 editTabGroupHand 组件
const editTabGroupHand = await pdfui.getComponentByName("edit-tab-group-hand");
// 在 editTabGroupHand 组件后插入目标 Edit 模块
editTabGroupHand.after(`
    <group name="edit-tab-group-font" retain-count="5">
        <edit-text-object:text-bold-style-ribbon-button></edit-text-object:text-bold-style-ribbon-button>
        <edit-text-object:text-italic-style-ribbon-button></edit-text-object:text-italic-style-ribbon-button>
        <edit-text-object:font-color-picker></edit-text-object:font-color-picker>
        <edit-text-object:font-style-dropdown></edit-text-object:font-style-dropdown>
    </group>
`)
editTabGroupHand.after(`
    <group name="edit-tab-group-mode" retain-count="3">
        <edit-pageobjects:edit-all-objects-button @async></edit-pageobjects:edit-all-objects-button>
        <add-image-ribbon-button></add-image-ribbon-button>
        <edit-text-object:add-text-ribbon-button @async></edit-text-object:add-text-ribbon-button>
        <edit-pageobjects:path-objects-ribbon-dropdown @async></edit-pageobjects:path-objects-ribbon-dropdown>
    </group>
`)

保存编辑结果 ​

编辑模块修改的是 PDF 页面内容。编辑完成后，如需下载或上传修改后的 PDF，应通过当前 PDFDoc 导出文件。

javascript
const pdfDoc = pdfViewer.getCurrentPDFDoc();
const file = await pdfDoc.getFile({
    fileName: 'edited.pdf'
});

注意事项 ​

  • 编辑页面内容通常需要文档修改权限，受 PDF 权限和业务 UI 权限共同影响。
  • 编辑模块面向交互式编辑；批量处理页面对象时，建议使用 页面对象 的 API。
  • 修改 PDF 内容后，需要导出或保存文件，变更才会写入最终 PDF。
  • 自定义编辑工具条时，优先通过 fragments 或 Component API 调整内置组件，不建议直接操作内部 DOM。