PDF 生成模板编辑器
开源可视化 PDF 生成引擎,支持自定义模板,并提供面向开发者的 API,灵活构建文档生成流程。
印章是放置到页面上的基于图片的批注。WebViewer 支持标准、动态和自定义印章,通过印章面板和一组 UI API 管理。
UI.setStampPanelTabs(tabs) 配置印章面板显示的标签。
UI.setStampPanelTabs(['standard', 'dynamic', 'custom']); // STANDARD / DYNAMIC / CUSTOM调用 useViewer.setStampPanelTabs(tabs)。标签标识符:Standard、Dynamic、Custom(定义于 constants/dataElements.js)。
UI.setImportStamps(images) 设置可导入的印章列表。
UI.setImportStamps([{ src: '/stamps/approved.png', label: 'Approved' }]);调用 useViewer.setImportStamps(images)。
UI.addCustomStamps(images) 添加自定义印章图片。
UI.addCustomStamps([{ src: dataUrl, label: 'My Stamp' }]);调用 useViewer.addCustomStamps(images)。自定义印章持久化到 localStorage 的 customStamps 键。
UI.setCustomStamps(stamps) 替换自定义印章集合。
UI.setCustomStamps([ /* 完整印章列表 */ ]);调用 useViewer.setCustomStamps(stamps)。
UI.getCustomStamps() 获取当前自定义印章。
/**
* @method UI.getCustomStamps
*/
const stamps = UI.getCustomStamps();返回 viewer store 的 getCustomStamps getter。
| 字段 | 用途 |
|---|---|
customStamps[] | 自定义印章(持久化到 localStorage)。 |
stampPanelTabs[] | 印章面板显示的标签。 |
importStamps[] | 可导入印章。 |
StampPanel.vue(components/StampPanel/)——带 Standard / Dynamic / Custom 标签的印章选择器(标签在 App/index.vue 通过 setStampPanelTabs 设置)。懒加载。CustomStamp.vue ——自定义印章创建 UI。DeleteCustomStampDialog ——确认删除自定义印章。core 桥接层在 instance.Core 上暴露:
| 函数 | 用途 |
|---|---|
getDynamicStampPreview | 获取动态印章预览。 |
getStampRect | 获取印章矩形。 |
handleStamp | 应用印章。 |
helpers/renderStampPreview.js 提供 renderStampPreview 类,创建一个浮动 .stamp-preview div,在 .document 区域跟随鼠标,放置前显示印章图片。方法:updateStampPreview(...)、handleMouseMove、hidePreview、applyStyles。
UI.addCustomStamps([{ src: '/stamps/draft.png', label: 'Draft' }]);
UI.openElement('stampPanel');UI.setStampPanelTabs(['standard', 'custom']);const stamps = UI.getCustomStamps();