Skip to content
全新发布

PDF SDK 与 AI 文档处理

在 GitHub 获取完整的私有化部署SDK 包及 AI 智能文档处理能力,一键部署,快速构建您的文档处理工作流。

印章

印章是放置到页面上的基于图片的批注。WebViewer 支持标准动态自定义印章,通过印章面板和一组 UI API 管理。

UI API

UI.setStampPanelTabs(tabs)

配置印章面板显示的标签。

javascript
UI.setStampPanelTabs(['standard', 'dynamic', 'custom']);   // STANDARD / DYNAMIC / CUSTOM

调用 useViewer.setStampPanelTabs(tabs)。标签标识符:StandardDynamicCustom(定义于 constants/dataElements.js)。

UI.setImportStamps(images)

设置可导入的印章列表。

javascript
UI.setImportStamps([{ src: '/stamps/approved.png', label: 'Approved' }]);

调用 useViewer.setImportStamps(images)

UI.addCustomStamps(images)

添加自定义印章图片。

javascript
UI.addCustomStamps([{ src: dataUrl, label: 'My Stamp' }]);

调用 useViewer.addCustomStamps(images)。自定义印章持久化到 localStoragecustomStamps 键。

UI.setCustomStamps(stamps)

替换自定义印章集合。

javascript
UI.setCustomStamps([ /* 完整印章列表 */ ]);

调用 useViewer.setCustomStamps(stamps)

UI.getCustomStamps()

获取当前自定义印章。

javascript
/**
 * @method UI.getCustomStamps
 */
const stamps = UI.getCustomStamps();

返回 viewer store 的 getCustomStamps getter。

印章状态(viewer store)

字段用途
customStamps[]自定义印章(持久化到 localStorage)。
stampPanelTabs[]印章面板显示的标签。
importStamps[]可导入印章。

印章组件

  • StampPanel.vuecomponents/StampPanel/)——带 Standard / Dynamic / Custom 标签的印章选择器(标签在 App/index.vue 通过 setStampPanelTabs 设置)。懒加载。
  • CustomStamp.vue ——自定义印章创建 UI。
  • DeleteCustomStampDialog ——确认删除自定义印章。

Core 桥接层(印章接口)

core 桥接层在 instance.Core 上暴露:

函数用途
getDynamicStampPreview获取动态印章预览。
getStampRect获取印章矩形。
handleStamp应用印章。

印章预览辅助

helpers/renderStampPreview.js 提供 renderStampPreview 类,创建一个浮动 .stamp-preview div,在 .document 区域跟随鼠标,放置前显示印章图片。方法:updateStampPreview(...)handleMouseMovehidePreviewapplyStyles

示例

添加自定义印章并打开印章面板

javascript
UI.addCustomStamps([{ src: '/stamps/draft.png', label: 'Draft' }]);
UI.openElement('stampPanel');

将印章面板限制为标准+自定义

javascript
UI.setStampPanelTabs(['standard', 'custom']);

读取当前自定义印章

javascript
const stamps = UI.getCustomStamps();

相关