签章页面的渲染与卸载

签章页面的渲染方式

1. 通过 `render` + `addFile` 渲染签章页面

在快速上手章节中介绍了如何快速将单体签章系统集成到已有的应用中，其 demo 中我们创建 SDK 实例时未传递任何参数，签章页面的渲染由我们手动调用 render 函数进行执行，在页面渲染后我们才执行了 addFile。

如果后续不执行 addFile，页面将会渲染出没有 PDF 文件的情况，因此，我们在判断 files.length 为 0 时直接返回，避免出现空白页面的情况。

// vue demo 中的示例
const handleAddFile = (event: any) => {
  const files = event.target.files;
  if (!files || !files.length || !ukeySdk) return;
  /** ukeySdk.container 可用于判断当前是否已经渲染，组件渲染后会将根 dom 元素保存在 sdk 实例中 */
  if (!ukeySdk.container) {
    ukeySdk.render(container.value!)
  }
  /** 向签章系统中添加 pdf 文件 */
  ukeySdk.addFile(files)
}

2. 创建 sdk 实例时传入 `file` 参数直接渲染签章页面

除了上述的渲染方式，SDK 构造函数的参数配置中还提供了 file 字段，用于页面初始化渲染时直接渲染出指定的 PDF 文件。

我们对之前的 vue 中的 demo 进行一定的改造，初始时无 sdk 实例，当我们上传文件后再进行创建，我们可以直接将 FileList 类型的文件通过构造函数中的 file 字段进行传递，后续直接进行 render 即可直接在页面渲染后加载 PDF 文件。

当然，面对 input 后续的 change，我们只需通过 addFile 将对应文件追加到系统中即可。

  const container = ref<HTMLDivElement|null>(null)
  
  let ukeySdk: QysUKeySdk|null = null;

  const handleAddFile = (event: any) => {
    const files = event.target.files;
    if (!files || !files.length) return;

    if (!ukeySdk) {
      /** 通过配置传递文件 */
      ukeySdk = new QysUKeySdk({
        file: files
      })
    }

    /** ukeySdk.container 可用于判断当前是否已经渲染，组件渲染后会将根 dom 元素保存在 sdk 实例中 */
    if (!ukeySdk.container) {
      ukeySdk.render(container.value!)
    } else {
      /** 如果页面已经渲染，则通过 addFile 将文件追加到系统中 */
      ukeySdk.addFile(files)
    }
  }

⚠️ 注意

通过构造函数参数传递的文件，在渲染结束后会从 sdk.config 中删除，这是因为如果页面通过 sdk.close 或 sdk.unmount 卸载后，如果再次调用 render 进行渲染，config.file 如果未被删除，则仍会在页面中出现。

如果您确实有这样的需求，不希望 file 从 config 中删除，建议您在渲染前将文件列表单独保存，重新调用 sdk.render 渲染前，先通过 sdk.updateConfig({ file: fileList }) 更新配置后再渲染。

3. 如何选择使用那种方式？

如果您追求统一操作，推荐您使用第一种方式，提前创建好 sdk 实例，所有文件添加都通过 sdk.addFile 进行。
如果您的需求非常简单，每次只有单个 PDF 需要渲染并操作，操作结束后页面即可关闭，此时推荐使用第二种方式，创建 sdk 实例时就传入文件，代码会更简洁。