如何实现注释数据的自动加载与服务器数据同步？

福昕PDF SDK 软件开发工具包 > 福昕PDF SDK(Web)

标签:

如何实现注释数据的自动加载与服务器数据同步？

福昕知识库
2024-10-29

问题背景

在线阅读页面退出后重新进入，原有的注释消失。在未提醒用户及时保存时，容易出现本想保存的数据丢失的情况。注释可否自动保存在本地？用户打开文档时自动打开相应注释？或者在关闭页面时提示用户手动保存注释？

希望对于同一个账号的用户，无论在任何机器登录，均能在阅读同一本书时显示相应注释信息。即：为用户保存在线批注、标记、注释等信息并实现多终端同步和共享。

解答

注释不能自动保存到本地，因为WebSDK是运行在浏览器内存中的库，没有权限越过浏览器直接对本机硬盘上的文件进行读写操作，其内置的注释“导入”“导出”功能之所以可以将注释数据保存到本地，是WebSDK将注释数据传递给了浏览器，利用浏览器的接口，交由用户自主进行本地文件的读/写。
如果想要实现注释数据的自动保存，以及打开文档时自动关联相关注释的功能，可以利用WebSDK的相关接口，结合具体业务场景进行实现，具体如下：

应用程序在监听到离开当前预览界面（关闭标签页 / 返回上一级页面 / 前往下一级页面等）的事件时，可以在其回调函数中，调用WebSDK的导出注释接口，将注释数据保存到服务器端。相关接口是：exportAnnotsToFDF （将注释数据导出到FDF文件或 XFDF文件）、exportAnnotsToJSON （将注释数据导出到JSON），如果需要多终端同步和共享注释内容，建议将注释数据以FDF或XFDF文件作为载体进行导出 / 导入；
应用程序在监听到文档打开成功的事件（openFileSuccess）时，可以在其回调函数中，获取服务器端的注释数据，然后调用WebSDK的导入注释接口，将注释数据自动导入文档。相关接口是：importAnnotsFromFDF （将FDF或XFDF文件中的注释数据导入到当前文档中）、importAnnotsFromJSON （将JSON文件中的注释数据导入到当前文档中）。示例代码如下：

pdfui.eventEmitter.on(PDFViewCtrl.constants.ViewerEvents.openFileSuccess, (pdfDoc) => {
    //获取当前文件对应的注释数据
    fetch('http://xxxxx/xxxx/xxxx/xxx.fdf').then(response => {
        return response.blob();
    }).then(annotFile => {
        //导入json注释数据
        pdfDoc.importAnnotsFromFDF(annotFile);
    })
});

请注意：

“离开当前预览界面（关闭标签页 / 返回上一级页面 / 前往下一级页面等）的事件”需要应用层负责监听，WebSDK是被集成到Web应用内部的，只能感知WebSDK自身相关的事件，感知不到上层Web应用页面级的变化。

编辑器中如何设置不同文档权限保护策略

Linux版本中如何获取电脑的UUID信息

编辑器中如何使用密码保护功能

编辑器中如何设置不同文档权限保护策略

Linux版本中如何获取电脑的UUID信息

编辑器中如何使用密码保护功能

专业获取当前页面截图的技术实现方案

PDF文档关键词搜索替换功能的技术实现方案

基于HTTP范围请求的非事件监听式PDF注释数据自动导入方案

基于ActiveX控件的高效PDF阅读水印实现方案

Web SDK UIExtension 右键菜单深度定制指南（基于jQuery-contextMenu）

如何分别自定义文本类型注释（打字机/文本框/注释框）的默认样式属性

在WebSDK实现放置签名

编辑器中如何设置不同文档权限保护策略

Linux版本中如何获取电脑的UUID信息

编辑器中如何使用密码保护功能

专业获取当前页面截图的技术实现方案

PDF文档关键词搜索替换功能的技术实现方案

基于HTTP范围请求的非事件监听式PDF注释数据自动导入方案

基于ActiveX控件的高效PDF阅读水印实现方案

Web SDK UIExtension 右键菜单深度定制指南（基于jQuery-contextMenu）

如何分别自定义文本类型注释（打字机/文本框/注释框）的默认样式属性

在WebSDK实现放置签名