PDF.js二次开发实时批注功能首先要感谢https://juejin.cn/user/2826204370181996

首先要感谢juejin.cn/user/282620… 行深大神，在他的基础上我补充了并增加实时批注交互的功能。借用juejin.cn/post/736836… 借用该文章继续向下开发。通过修改custom.js/custom_util.js 中的方法来支持实时批注时使用Websocket的传输方式。并增加了删除批注标记、创建标记、以及修改标记等功能。

增加了4个方法以供websocket进行调用。

  removeDom(id) {
    const dom = document.getElementById(id);
    dom?.remove(dom);
  }
  createMark(params){
    const em = getEditorManager();
    em.map.set(params.id, params);
    this.show(params.id);
    createMarkingOperation(params.id);
  }
  editorMark(params){
    const em = getEditorManager();
    em.map.set(params.id, params);
    this.remove(params.id,true);
    this.doShow(params.id)
  }
  removeMark(id,direct){
    this.remove(id,direct);
    this.removeDom(id);
  }

并修改了初始化方法。

window.createdCustom = (data) => {
    const properties = getApplication().pdfViewer._layerProperties;
    const manager = properties.annotationEditorUIManager;
    editorManager.initEditorParameters(data, manager);
    controller.renderPreparedLayerAnnotations(editorManager.map);
    data.length&&data.map(item=>{
      createMarkingOperation(item.id);
    })
};

再次感谢行深！！！