{"id":7276,"date":"2025-12-04T13:44:57","date_gmt":"2025-12-04T05:44:57","guid":{"rendered":"https:\/\/support.fuxinsoft.cn\/?p=7276"},"modified":"2025-12-24T10:54:08","modified_gmt":"2025-12-24T02:54:08","slug":"websdk%e5%a6%82%e4%bd%95%e8%ae%be%e7%bd%ae%e6%b3%a8%e9%87%8a%e7%9a%84%e5%8f%b3%e9%94%ae%e8%8f%9c%e5%8d%95%e5%8f%aa%e6%98%be%e7%a4%ba%e5%88%a0%e9%99%a4","status":"publish","type":"post","link":"https:\/\/support.fuxinsoft.cn\/?p=7276","title":{"rendered":"WebSDK\u5982\u4f55\u8bbe\u7f6e\u6ce8\u91ca\u7684\u53f3\u952e\u83dc\u5355\u53ea\u663e\u793a\u5220\u9664"},"content":{"rendered":"\n

\u4e00\u3001\u529f\u80fd\u8bf4\u660e<\/h2>\n\n\n\n

\u672c\u6587\u6863\u4ecb\u7ecd\u5982\u4f55\u57fa\u4e8e\u798f\u6615 PDF Web SDK\uff08WebSDK\uff09\u81ea\u5b9a\u4e49\u6ce8\u91ca\u53f3\u952e\u83dc\u5355\uff1a\u4ec5\u4fdd\u7559 \u201c\u5220\u9664\u201d \u83dc\u5355\u9879\uff0c\u5e76\u6309\u9700\u5b9a\u5236\u83dc\u5355\u7684\u89c6\u89c9\u6837\u5f0f\uff08\u5982\u5c3a\u5bf8\u3001\u989c\u8272\u3001\u5185\u8fb9\u8ddd\u7b49\uff09\u3002\u9002\u7528\u4e8e\u9700\u8981\u7b80\u5316\u6ce8\u91ca\u64cd\u4f5c\u3001\u4ec5\u4fdd\u7559\u5220\u9664\u529f\u80fd\u7684\u4e1a\u52a1\u573a\u666f\uff08\u5982\u4ec5\u5141\u8bb8\u5220\u9664\u5370\u7ae0 \/ \u666e\u901a\u6ce8\u91ca\u7684\u573a\u666f\uff09\u3002<\/p>\n\n\n\n

\u4e8c\u3001\u524d\u7f6e\u6761\u4ef6<\/h2>\n\n\n\n
    \n
  1. \u5df2\u96c6\u6210\u798f\u6615 PDF Web SDK\uff0c\u4e14\u80fd\u6b63\u5e38\u4f7f\u7528\u6ce8\u91ca\uff08Annot\uff09\u76f8\u5173\u529f\u80fd\uff1b<\/li>\n\n\n\n
  2. \u4e86\u89e3 SDK \u57fa\u7840\u6269\u5c55\u903b\u8f91\uff0c\u719f\u6089ViewerUI<\/code>\u7c7b\u7684\u91cd\u5199\u65b9\u5f0f\uff1b<\/li>\n\n\n\n
  3. \u53c2\u8003\u5f00\u53d1\u8005\u624b\u518c\uff1a\u81ea\u5b9a\u4e49\u6ce8\u91ca\u53f3\u952e\u83dc\u5355<\/a>\u3002<\/li>\n<\/ol>\n\n\n\n

    \u4e09\u3001\u5b9e\u73b0\u6b65\u9aa4<\/h2>\n\n\n\n

    \u6b65\u9aa4 1\uff1a\u91cd\u5199 ViewerUI \u7684 createContextMenu \u65b9\u6cd5<\/h3>\n\n\n\n

    \u901a\u8fc7\u7ee7\u627fPDFViewCtrl.ViewerUI<\/code>\u7c7b\uff0c\u91cd\u5199\u6838\u5fc3\u65b9\u6cd5createContextMenu<\/code>\uff0c\u5b9e\u73b0\u83dc\u5355\u9009\u9879\u7684\u8fc7\u6ee4\u548c\u6837\u5f0f\u5b9a\u5236\u3002<\/p>\n\n\n\n

    \u6b65\u9aa4 2\uff1a\u8fc7\u6ee4\u83dc\u5355\u914d\u7f6e\uff08\u4ec5\u4fdd\u7559\u5220\u9664\u9879\uff09<\/h3>\n\n\n\n

    \u63d0\u53d6\u539f\u59cb\u83dc\u5355\u914d\u7f6e\u4e2d\u7684 \u201c\u5220\u9664\u201d \u9879\uff0c\u79fb\u9664\u5176\u4ed6\u6240\u6709\u9ed8\u8ba4\u9009\u9879\uff0c\u5e76\u81ea\u5b9a\u4e49\u5220\u9664\u9879\u7684\u663e\u793a\u540d\u79f0\u3002<\/p>\n\n\n\n

    \u6b65\u9aa4 3\uff1a\u5b9a\u5236\u83dc\u5355\u6837\u5f0f\uff08\u53ef\u9009\uff09<\/h3>\n\n\n\n

    \u52a8\u6001\u751f\u6210\u6837\u5f0f\u6807\u7b7e\uff0c\u8986\u76d6\u9ed8\u8ba4\u83dc\u5355\u7684\u5c3a\u5bf8\u3001\u989c\u8272\u3001\u60ac\u6d6e\u6548\u679c\u7b49\u6837\u5f0f\uff0c\u907f\u514d\u6837\u5f0f\u6c61\u67d3\u3002<\/p>\n\n\n\n

    \u56db\u3001\u5b8c\u6574\u4ee3\u7801\u793a\u4f8b<\/h2>\n\n\n\n
    \/**\n * PDF SDK Web \u6ce8\u91ca\u53f3\u952e\u83dc\u5355\u81ea\u5b9a\u4e49\uff1a\u4ec5\u4fdd\u7559\u5220\u9664\u9879 + \u6837\u5f0f\u5b9a\u5236\n * \u6838\u5fc3\u903b\u8f91\uff1a\u91cd\u5199ViewerUI\u7684createContextMenu\u65b9\u6cd5\uff0c\u8fc7\u6ee4\u83dc\u5355\u9879\u5e76\u5b9a\u5236\u6837\u5f0f\n *\/\nclass CustomViewerUI extends PDFViewCtrl.ViewerUI {\n  \/**\n   * \u91cd\u5199\u521b\u5efa\u53f3\u952e\u83dc\u5355\u65b9\u6cd5\n   * @param {Object} owner - \u83dc\u5355\u6240\u5c5e\u5bf9\u8c61\uff08\u6b64\u5904\u4e3aAnnotComponent\u6ce8\u91ca\u7ec4\u4ef6\uff09\n   * @param {Object} anchor - \u83dc\u5355\u951a\u70b9\u4f4d\u7f6e\uff08\u9f20\u6807\u53f3\u952e\u70b9\u51fb\u5750\u6807\uff09\n   * @param {Object} config - \u539f\u59cb\u83dc\u5355\u914d\u7f6e\uff08\u5305\u542b\u6240\u6709\u9ed8\u8ba4\u83dc\u5355\u9879\uff09\n   * @returns {Object} \u5904\u7406\u540e\u7684\u53f3\u952e\u83dc\u5355\u5b9e\u4f8b\n   *\/\n  createContextMenu(owner, anchor, config) {\n    \/\/ \u4ec5\u5904\u7406\u6ce8\u91ca\u7ec4\u4ef6\u7684\u53f3\u952e\u83dc\u5355\n    if (owner instanceof PDFViewCtrl.AnnotComponent) {\n      \/\/ \u6761\u4ef6\u53ef\u6269\u5c55\uff1a\u5982\u4ec5\u5904\u7406\u5370\u7ae0\u6ce8\u91ca\uff0c\u53ef\u6dfb\u52a0\u5224\u65ad owner.annot.getType() === 'stamp'\n      if (owner.annot) {\n        \/\/ \u8fc7\u6ee4\u914d\u7f6e\uff1a\u4ec5\u4fdd\u7559\u5220\u9664\u9879\n        const customConfig = this.keepOnlyRemoveItem({ ...config });\n        \/\/ \u5b9a\u5236\u83dc\u5355\u6837\u5f0f\uff08\u53ef\u9009\uff0c\u6309\u9700\u542f\u7528\uff09\n        this.customizeContextMenuStyle();\n        \/\/ \u8c03\u7528\u7236\u7c7b\u65b9\u6cd5\u521b\u5efa\u83dc\u5355\uff08\u4f20\u5165\u8fc7\u6ee4\u540e\u7684\u914d\u7f6e\uff09\n        return super.createContextMenu(owner, anchor, customConfig);\n      }\n    }\n    \/\/ \u975e\u6ce8\u91ca\u7ec4\u4ef6\u7684\u53f3\u952e\u83dc\u5355\uff0c\u4f7f\u7528\u9ed8\u8ba4\u914d\u7f6e\n    return super.createContextMenu(owner, anchor, config);\n  }\n\n  \/**\n   * \u8fc7\u6ee4\u83dc\u5355\u914d\u7f6e\uff1a\u4ec5\u4fdd\u7559\u5220\u9664\u9879\uff0c\u5e76\u4fee\u6539\u663e\u793a\u540d\u79f0\n   * @param {Object} config - \u539f\u59cb\u83dc\u5355\u914d\u7f6e\n   * @returns {Object} \u4ec5\u5305\u542b\u5220\u9664\u9879\u7684\u65b0\u914d\u7f6e\n   *\/\n  keepOnlyRemoveItem(config) {\n    \/\/ \u8fb9\u754c\u6821\u9a8c\uff1a\u786e\u4fdd\u914d\u7f6e\u548c\u83dc\u5355\u9879\u5b58\u5728\n    if (!config || !config.items) {\n      return config;\n    }\n\n    const removeItem = config.items.remove;\n   \n\n    \/\/ \u91cd\u7f6eitems\u4e3a\u4ec5\u5305\u542b\u5220\u9664\u9879\u7684\u6570\u7ec4\uff08\u6838\u5fc3\uff1a\u79fb\u9664\u5176\u4ed6\u6240\u6709\u9009\u9879\uff09\n    config.items = removeItem ? [removeItem] : [];\n    return config;\n  }\n\n  \/**\n   * \u52a8\u6001\u5b9a\u5236\u53f3\u952e\u83dc\u5355\u6837\u5f0f\uff08\u53ef\u9009\uff09\n   * \u903b\u8f91\uff1a\u5148\u79fb\u9664\u65e7\u6837\u5f0f\u907f\u514d\u91cd\u590d\uff0c\u518d\u65b0\u589e\u81ea\u5b9a\u4e49\u6837\u5f0f\n   *\/\n  customizeContextMenuStyle() {\n    \/\/ 1. \u79fb\u9664\u5df2\u5b58\u5728\u7684\u65e7\u6837\u5f0f\uff08\u9632\u6b62\u91cd\u590d\u6dfb\u52a0\uff09\n    const oldStyle = document.getElementById('annot-menu-style');\n    if (oldStyle) {\n      oldStyle.remove();\n    }\n\n    \/\/ 2. \u521b\u5efa\u65b0\u7684\u6837\u5f0f\u6807\u7b7e\u5e76\u914d\u7f6e\u81ea\u5b9a\u4e49\u6837\u5f0f\n    const style = document.createElement('style');\n    style.id = 'annot-menu-style';\n    const menuItemSelector = \".context-menu-item\"; \/\/ \u83dc\u5355\u9879\u6838\u5fc3\u9009\u62e9\u5668\n\n    style.textContent = `\n      \/* \u53f3\u952e\u83dc\u5355\u5bb9\u5668\u6837\u5f0f *\/\n      .context-menu {\n        width: 120px !important; \/* \u56fa\u5b9a\u5bbd\u5ea6 *\/\n        min-width: 120px !important;\n        max-width: 120px !important;\n        height: auto !important; \/* \u9ad8\u5ea6\u81ea\u9002\u5e94 *\/\n        overflow: hidden !important; \/* \u9632\u6b62\u5185\u5bb9\u6ea2\u51fa *\/\n        box-sizing: border-box !important;\n      }\n\n      \/* \u83dc\u5355\u5217\u8868\u6837\u5f0f *\/\n      .context-menu-list {\n        padding: 2px !important; \/* \u51cf\u5c0f\u5185\u8fb9\u8ddd *\/\n        min-width: unset !important;\n        max-width: 100% !important;\n        box-sizing: border-box !important;\n      }\n\n      \/* \u83dc\u5355\u9879\u57fa\u7840\u6837\u5f0f\uff08\u5220\u9664\u9879\uff09 *\/\n      ${menuItemSelector} {\n        color: #ff4444 !important; \/* \u6587\u5b57\u7ea2\u8272 *\/\n        font-size: 12px !important; \/* \u5c0f\u53f7\u5b57\u4f53 *\/\n        padding: 6px 12px !important; \/* \u51cf\u5c0f\u5185\u8fb9\u8ddd *\/\n        background-color: #ffff00 !important; \/* \u9ec4\u8272\u80cc\u666f *\/\n        border-radius: 4px !important; \/* \u5706\u89d2\u6548\u679c *\/\n        border: none !important; \/* \u79fb\u9664\u9ed8\u8ba4\u8fb9\u6846 *\/\n      }\n\n      \/* \u83dc\u5355\u9879\u60ac\u6d6e\u6837\u5f0f *\/\n      ${menuItemSelector}:hover {\n        background-color: #ffff99 !important; \/* \u6d45\u9ec4\u80cc\u666f *\/\n        color: #d32f2f !important; \/* \u60ac\u6d6e\u6df1\u7ea2\u8272 *\/\n      }\n    `;\n\n    \/\/ \u5c06\u6837\u5f0f\u6dfb\u52a0\u5230\u9875\u9762\u5934\u90e8\n    document.head.appendChild(style);\n  }\n}\n\n\/\/ \u751f\u6548\u81ea\u5b9a\u4e49ViewerUI\uff08\u5173\u952e\uff1a\u66ff\u6362SDK\u9ed8\u8ba4\u7684ViewerUI\uff09\nPDFViewCtrl.ViewerUI = CustomViewerUI;\n<\/code><\/pre>\n\n\n\n
    \u4e94\u3001\u5173\u952e\u914d\u7f6e\u8bf4\u660e<\/h2>\n\n\n\n
    1. \u6837\u5f0f\u5b9a\u5236\uff08\u53ef\u9009\uff09<\/h3>\n\n\n\n
    \u53ef\u6839\u636e\u4e1a\u52a1\u9700\u6c42\u4fee\u6539customizeContextMenuStyle<\/code>\u4e2d\u7684\u6837\u5f0f\u5c5e\u6027\uff1a<\/p>\n\n\n\n
      \n
    • \u8c03\u6574\u83dc\u5355\u5bbd\u5ea6\uff1a\u4fee\u6539.context-menu<\/code>\u7684width<\/code>\u503c\uff1b<\/li>\n\n\n\n
    • \u4fee\u6539\u6587\u5b57\u989c\u8272\uff1a\u8c03\u6574.context-menu-item<\/code>\u7684color<\/code>\u503c\uff1b<\/li>\n\n\n\n
    • \u8c03\u6574\u80cc\u666f\u8272\uff1a\u4fee\u6539.context-menu-item<\/code>\u7684background-color<\/code>\u503c\uff1b<\/li>\n\n\n\n
    • \u79fb\u9664\u6837\u5f0f\u5b9a\u5236\uff1a\u5220\u9664this.customizeContextMenuStyle()<\/code>\u8c03\u7528\u5373\u53ef\u6062\u590d\u9ed8\u8ba4\u6837\u5f0f\u3002<\/li>\n<\/ul>\n\n\n\n
      2. \u83dc\u5355\u9879\u6269\u5c55\uff08\u53ef\u9009\uff09<\/h3>\n\n\n\n
      \u82e5\u9700\u4fdd\u7559\u591a\u4e2a\u83dc\u5355\u9879\uff08\u5982 \u201c\u5220\u9664\u201d+\u201c\u5c5e\u6027\u201d\uff09\uff0c\u53ef\u4fee\u6539keepOnlyRemoveItem<\/code>\u65b9\u6cd5\uff1a<\/p>\n\n\n\n
      keepOnlyRemoveItem(config) {\n  if (!config || !config.items) return config;\n  \/\/ \u4fdd\u7559\u5220\u9664\u548c\u5c5e\u6027\u9879\n  const keepItems = {\n    remove: config.items.remove,\n    property: config.items.property\n  };\n  \/\/ \u91cd\u547d\u540d\uff08\u53ef\u9009\uff09\n  if (keepItems.remove) keepItems.remove.name = '\u5220\u9664';\n  if (keepItems.property) keepItems.property.name = '\u5c5e\u6027';\n  \/\/ \u8f6c\u6362\u4e3a\u6570\u7ec4\uff08SDK\u8981\u6c42items\u4e3a\u6570\u7ec4\u683c\u5f0f\uff09\n  config.items = Object.values(keepItems).filter(Boolean);\n  return config;\n}\n<\/code><\/pre>\n\n\n\n
      \u516d\u3001\u4f7f\u7528\u6ce8\u610f\u4e8b\u9879<\/h2>\n\n\n\n
        \n
      1. \u6837\u5f0f\u5b9a\u5236\u65f6\u9700\u6dfb\u52a0!important<\/code>\uff0c\u786e\u4fdd\u8986\u76d6 SDK \u9ed8\u8ba4\u6837\u5f0f\uff1b<\/li>\n\n\n\n
      2. \u52a8\u6001\u6837\u5f0f\u4f1a\u6dfb\u52a0\u5230document.head<\/code>\uff0c\u82e5\u9875\u9762\u5237\u65b0\u9700\u91cd\u65b0\u751f\u6210\uff08SDK \u521d\u59cb\u5316\u65f6\u6267\u884c\u5373\u53ef\uff09\uff1b<\/li>\n\n\n\n
      3. \u91cd\u5199ViewerUI<\/code>\u9700\u5728 SDK \u521d\u59cb\u5316\u524d\u5b8c\u6210\uff0c\u5426\u5219\u81ea\u5b9a\u4e49\u903b\u8f91\u4e0d\u751f\u6548\uff1b<\/li>\n\n\n\n
      4. \u82e5\u83dc\u5355\u4e0d\u751f\u6548\uff0c\u68c0\u67e5PDFViewCtrl<\/code>\u5bf9\u8c61\u662f\u5426\u5b58\u5728\uff0c\u786e\u4fdd SDK \u5df2\u6b63\u786e\u52a0\u8f7d\u3002<\/li>\n<\/ol>\n\n\n\n
        \u4e03\u3001\u603b\u7ed3<\/h2>\n\n\n\n
          \n
        1. \u6838\u5fc3\u903b\u8f91\uff1a\u901a\u8fc7\u7ee7\u627fViewerUI<\/code>\u5e76\u91cd\u5199createContextMenu<\/code>\u65b9\u6cd5\uff0c\u8fc7\u6ee4\u83dc\u5355\u914d\u7f6e\u4ec5\u4fdd\u7559\u5220\u9664\u9879\uff1b<\/li>\n\n\n\n
        2. \u6837\u5f0f\u5b9a\u5236\uff1a\u52a8\u6001\u751f\u6210\u6837\u5f0f\u6807\u7b7e\uff0c\u6309\u9700\u4fee\u6539\u83dc\u5355\u5c3a\u5bf8\u3001\u989c\u8272\u7b49\u89c6\u89c9\u5c5e\u6027\uff1b<\/li>\n\n\n\n
        3. \u7075\u6d3b\u6269\u5c55\uff1a\u53ef\u901a\u8fc7\u6ce8\u91ca\u7c7b\u578b\u7b5b\u9009\u3001\u83dc\u5355\u9879\u914d\u7f6e\uff0c\u9002\u914d\u4e0d\u540c\u4e1a\u52a1\u573a\u666f\u7684\u9700\u6c42\u3002<\/li>\n<\/ol>\n\n\n\n
          <\/p>\n","protected":false},"excerpt":{"rendered":"
          \u4e00\u3001\u529f\u80fd\u8bf4\u660e \u672c\u6587\u6863\u4ecb\u7ecd\u5982\u4f55\u57fa\u4e8e\u798f\u6615 PDF Web SDK\uff08WebSDK\uff09\u81ea\u5b9a\u4e49\u6ce8\u91ca\u53f3\u952e\u83dc\u5355\uff1a\u4ec5\u4fdd\u7559 \u201c\u5220\u9664 […]<\/p>\n","protected":false},"author":33,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[67],"tags":[1112,1245,595,604,374],"class_list":["post-7276","post","type-post","status-publish","format-standard","hentry","category-websdk","tag-createcontextmenu","tag-viewerui","tag-websdk","tag-604","tag-374"],"pp_statuses_selecting_workflow":false,"pp_workflow_action":"current","pp_status_selection":"publish","_links":{"self":[{"href":"https:\/\/support.fuxinsoft.cn\/index.php?rest_route=\/wp\/v2\/posts\/7276","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/support.fuxinsoft.cn\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/support.fuxinsoft.cn\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/support.fuxinsoft.cn\/index.php?rest_route=\/wp\/v2\/users\/33"}],"replies":[{"embeddable":true,"href":"https:\/\/support.fuxinsoft.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=7276"}],"version-history":[{"count":2,"href":"https:\/\/support.fuxinsoft.cn\/index.php?rest_route=\/wp\/v2\/posts\/7276\/revisions"}],"predecessor-version":[{"id":7512,"href":"https:\/\/support.fuxinsoft.cn\/index.php?rest_route=\/wp\/v2\/posts\/7276\/revisions\/7512"}],"wp:attachment":[{"href":"https:\/\/support.fuxinsoft.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=7276"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/support.fuxinsoft.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=7276"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/support.fuxinsoft.cn\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=7276"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}