关于PDFTron自定义印章删除事件及添加确认弹窗的技术咨询

针对你遇到的点击删除按钮后印章仅从UI消失但未真正删除的问题，PDFTron WebViewer没有直接暴露删除按钮的原生事件，但可以通过拦截DOM点击事件+调用官方API的方式实现确认逻辑并完成真实删除，避免闪烁和数据不一致的问题：

1. 拦截删除按钮的点击事件 #

由于自定义印章的删除按钮是动态生成的，建议使用事件委托来监听点击，阻止默认行为后弹出确认框：

instance.then(async (instance) => {
  const viewerElement = document.getElementById('viewer');
  // 监听所有点击，判断是否为删除按钮
  viewerElement.addEventListener('click', async (e) => {
    const deleteBtn = e.target.closest('.stamp-delete-button');
    if (deleteBtn) {
      // 阻止默认行为，避免印章直接从UI消失
      e.stopPropagation();
      e.preventDefault();

      // 从DOM元素中获取要删除的印章信息（根据实际DOM结构调整）
      const stampItem = deleteBtn.closest('.stamp-item');
      const stampName = stampItem.dataset.stampName;
      const customStamps = instance.UI.getCustomStamps();
      const targetStamp = customStamps.find(stamp => stamp.name === stampName);

      // 弹出确认对话框
      if (confirm('确定要删除该自定义印章吗？')) {
        // 调用API完成真实删除
        await instance.UI.deleteCustomStamp(targetStamp);
      }
      // 取消则什么都不做，UI不会变化
    }
  });
});

2. 调用API完成真实删除 #

• 新版WebViewer（v8+）提供了instance.UI.deleteCustomStamp(stampObject)方法，调用后会同时更新UI和本地存储的印章数据，无需手动刷新。
• 若使用旧版本WebViewer，可通过获取并修改自定义印章列表的方式实现：

if (confirm('确定要删除该自定义印章吗？')) {
  const customStamps = instance.UI.getCustomStamps();
  // 过滤掉要删除的印章
  const updatedStamps = customStamps.filter(stamp => stamp.name !== stampName);
  // 更新UI和存储
  instance.UI.setCustomStamps(updatedStamps);
  localStorage.setItem('customStamps', JSON.stringify(updatedStamps));
}

关键注意事项 #

• DOM选择器需根据你使用的WebViewer版本调整，可通过浏览器开发者工具查看删除按钮的实际class和元素结构。
• 使用事件委托而非直接绑定静态元素，确保动态生成的删除按钮也能被监听。
• 不要使用重新加载印章的方式，通过官方API更新UI不会产生闪烁问题。

内容的提问来源于stack exchange，提问作者Ali Sajjad