DemoAPI 参考文档FAQ

PDF 生成模板编辑器

开源可视化 PDF 生成引擎，支持自定义模板，并提供面向开发者的 API，灵活构建文档生成流程。

查看 GitHub

印章 ​

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

UI API ​

UI.setStampPanelTabs(tabs) ​

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

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

调用 useViewer.setStampPanelTabs(tabs)。标签标识符：Standard、Dynamic、Custom（定义于 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)。自定义印章持久化到 localStorage 的 customStamps 键。

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.vue（components/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(...)、handleMouseMove、hidePreview、applyStyles。

示例 ​

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

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

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

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

读取当前自定义印章 ​

javascript
const stamps = UI.getCustomStamps();

相关 ​