{"id":206,"date":"2023-06-01T16:04:51","date_gmt":"2023-06-01T08:04:51","guid":{"rendered":""},"modified":"2025-01-02T17:05:51","modified_gmt":"2025-01-02T09:05:51","slug":"article-slug-5","status":"publish","type":"post","link":"https:\/\/support.fuxinsoft.cn\/?p=206","title":{"rendered":"\u5982\u4f55\u81ea\u5b9a\u4e49\u6309\u94ae\u7ec4\u4ef6\uff1f"},"content":{"rendered":"

\u4ecb\u7ecd<\/span><\/p>\n

Foxit PDF SDK for Web \u6709\u4e00\u4e2a\u529f\u80fd\u9f50\u5168\u7684\u67e5\u770b\u5668\u6f14\u793a\u3002<\/span> \u4f46\u6709\u65f6\uff0c\u60a8\u53ef\u80fd\u5e0c\u671b\u5b9a\u5236\u6f14\u793a<\/span> UI \u4ee5\u52a0\u8f7d\u60a8\u6240\u9700\u7684\u529f\u80fd\u3002<\/span> \u60a8\u53ef\u80fd\u53ea\u60f3\u52a0\u8f7d\u5e26\u6709\u81ea\u5b9a\u4e49\u4e8b\u4ef6\u8ddf\u8e2a\u7684\u6309\u94ae\u3002<\/span> \u672c\u6587\u5c06\u6307\u5bfc\u60a8\u9010\u6b65\u5b8c\u6210\u6240\u6709\u9636\u6bb5\u3002<\/span><\/p>\n

1.       <\/span>\u6dfb\u52a0\u4e00\u4e2a\u7b80\u5355\u7684\u6309\u94ae\u5230\u5de5\u5177\u680f<\/span><\/p>\n

1.1.    <\/span>xbutton \u7ec4\u4ef6\u5c5e\u6027<\/span><\/p>\n

\u5e38\u7528\u6309\u94ae\u5c5e\u6027<\/span><\/p>\n\n\n\n\n\n\n\n\n
\n

\u5c5e\u6027\u540d\u79f0<\/span><\/p>\n<\/td>\n

\n

\u63cf\u8ff0<\/span><\/p>\n<\/td>\n<\/tr>\n

\n

name<\/p>\n<\/td>\n

\n

\u7528\u4e8e\u5b9a\u4e49\u7ec4\u4ef6\u7684\u540d\u79f0<\/span><\/p>\n<\/td>\n<\/tr>\n

\n

text<\/p>\n<\/td>\n

\n

\u663e\u793a\u6309\u94ae\u6587\u672c<\/span><\/p>\n<\/td>\n<\/tr>\n

\n

icon-class<\/p>\n<\/td>\n

\n

\u8bbe\u7f6e\u6309\u94ae\u7684\u56fe\u6807\u6837\u5f0f<\/span><\/p>\n<\/td>\n<\/tr>\n

\n

disabled<\/p>\n<\/td>\n

\n

\u6309\u94ae\u7981\u7528\u72b6\u6001<\/span><\/p>\n<\/td>\n<\/tr>\n

\n

isVisible<\/p>\n<\/td>\n

\n

\u6309\u94ae\u53ef\u89c1\u6027\u72b6\u6001<\/span><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

\u66f4\u8be6\u7ec6\u7684\u4fe1\u606f\u8bf7\u53c2\u8003<\/span> API Reference \u7684<\/span> Component \u548c<\/span> Button Component\u3002<\/span><\/p>\n

1.2.    <\/span>\u901a\u8fc7<\/span>xbutton\u7ec4\u4ef6\u521b\u5efa\u81ea\u5b9a\u4e49\u6309\u94ae<\/span><\/p>\n

\u57fa\u4e8e<\/span> xbutton \u7ec4\u4ef6\u521b\u5efa\u81ea\u5b9a\u4e49\u6309\u94ae\u6a21\u677f\u3002\u4ee3\u7801\u5982\u4e0b\uff1a<\/span><\/p>\n

const newButton = `<xbutton name="xbtn-1" icon-class="fv__icon-toolbar-hand">simple button 1<\/xbutton>`;<\/p>\n

1.3.    <\/span> \u5c06\u6309\u94ae\u6a21\u677f\u653e\u5165<\/span> PDFViewer \u6a21\u677f<\/span><\/p>\n

\"*\"      <\/span><\/span>\u521b\u5efa<\/span> PDFViewer \u6a21\u677f<\/span><\/p>\n

\"*\"      <\/span><\/span>\u5c06\u81ea\u5b9a\u4e49\u6309\u94ae\u653e\u5165<\/span> PDFViewer \u6a21\u677f<\/span><\/p>\n

\u4ee3\u7801\u5982\u4e0b\uff1a<\/span><\/p>\n

const template = `<\/p>\n

  <webpdf><\/p>\n

    <toolbar name="toolbar"><\/p>\n

      <div style="display: flex; flex-direction: row; padding: 6px;"><\/p>\n

        <open-file-dropdown><\/open-file-dropdown><\/p>\n

        <!– here, xbtn-1 button –><\/p>\n

        ${newButton}<\/p>\n

      <\/div><\/p>\n

    <\/toolbar><\/p>\n

    <div><\/p>\n

      <viewer><\/viewer><\/p>\n

    <\/div><\/p>\n

  <\/webpdf><\/p>\n

`;<\/p>\n

1.4.    <\/span>\u4f7f\u7528<\/span>Fragments\u7ba1\u7406\u6a21\u677f\u4e2d\u6309\u94ae\u7684\u914d\u7f6e\u9879\u548c\u4ea4\u4e92\u903b\u8f91<\/span><\/p>\n

Fragments\u5c5e\u6027<\/span><\/p>\n\n\n\n\n\n
\n

\u5c5e\u6027\u540d\u79f0<\/span><\/p>\n<\/td>\n

\n

\u63cf\u8ff0<\/span><\/p>\n<\/td>\n<\/tr>\n

\n

\u76ee\u6807<\/span><\/p>\n<\/td>\n

\n

\u76ee\u6807\u6309\u94ae\u7684\u540d\u79f0<\/span><\/p>\n<\/td>\n<\/tr>\n

\n

\u914d\u7f6e<\/span><\/p>\n<\/td>\n

\n

\u914d\u7f6e\u8be5\u6309\u94ae\u7684\u8c03\u7528\u529f\u80fd<\/span><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

       \u4ee3\u7801\u5982\u4e0b\uff1a<\/span><\/p>\n

const fragments = [<\/p>\n

 {<\/p>\n

   target: 'xbtn-1', \/\/ button name<\/p>\n

   config: {<\/p>\n

     callback: function () {<\/p>\n

       alert('click xbtn-1!');<\/p>\n

     }<\/p>\n

   }<\/p>\n

 }]<\/p>\n

1.5.    <\/span>\u6784\u5efa<\/span> PDF \u67e5\u770b\u5668<\/span><\/p>\n

\u521b\u5efa\u4e00\u4e2a\u81ea\u5b9a\u4e49\u7684<\/span>Appearance\u7c7b\uff0c\u5e76\u5728\u8be5\u7c7b\u4e2d\u521b\u5efa<\/span>PDF Viewer\u6a21\u677f<\/span>\/Fragments\u7684\u56de\u8c03\u51fd\u6570<\/span><\/p>\n

\u521d\u59cb\u5316<\/span>PDFUI\uff0c\u5b8c\u6210\u4e00\u4e2a\u7b80\u5355\u7684<\/span>PDF Viewer<\/p>\n

\u4ee3\u7801\u5982\u4e0b\uff1a<\/span><\/p>\n

var CustomAppearance = PDFViewCtrl.shared.createClass({<\/p>\n

  getLayoutTemplate: function () {<\/p>\n

    return template;<\/p>\n

  },<\/p>\n

  getDefaultFragments: function () {<\/p>\n

    return fragments;<\/p>\n

  }<\/p>\n

}, UIExtension.appearances.Appearance);<\/p>\n

 <\/p>\n

var PDFUI = UIExtension.PDFUI;<\/p>\n

var Events = UIExtension.PDFViewCtrl.Events;<\/p>\n

var pdfui = new PDFUI({<\/p>\n

  viewerOptions: {<\/p>\n

    libPath: '..\/..\/..\/lib',<\/p>\n

    jr: {<\/p>\n

      readyWorker: readyWorker<\/p>\n

    },<\/p>\n

    defaultScale: 1<\/p>\n

  },<\/p>\n

  renderTo: '#pdf-ui',<\/p>\n

  appearance: CustomAppearance,\/\/UIExtension.appearances.adaptive,<\/p>\n

  fragments: [],<\/p>\n

  addons: UIExtension.PDFViewCtrl.DeviceInfo.isMobile ?<\/p>\n

    '..\/..\/..\/lib\/uix-addons\/allInOne.mobile.js' :<\/p>\n

    '..\/..\/..\/lib\/uix-addons\/allInOne.js'<\/p>\n

});<\/p>\n

window.pdfui = pdfui;<\/p>\n

 <\/p>\n

2.       <\/span>\u4f7f\u7528<\/span> Controller\u5bf9<\/span> UI\u548c\u4e1a\u52a1\u903b\u8f91\u8fdb\u884c\u5206\u79bb<\/span><\/p>\n

2.1.    <\/span>\u63a7\u5236\u5668\u5e38\u7528\u65b9\u6cd5<\/span><\/p>\n\n\n\n\n\n\n\n\n
\n

\u65b9\u6cd5\u540d\u79f0<\/span><\/p>\n<\/td>\n

\n

\u63cf\u8ff0<\/span><\/p>\n<\/td>\n<\/tr>\n

\n

prelink<\/p>\n<\/td>\n

\n

\u5728\u7ec4\u4ef6\u9884\u94fe\u63a5\u751f\u547d\u5468\u671f\u4e2d\u8c03\u7528<\/span><\/p>\n<\/td>\n<\/tr>\n

\n

postlink<\/p>\n<\/td>\n

\n

\u5728\u7ec4\u4ef6\u94fe\u63a5\u540e\u751f\u547d\u5468\u671f\u4e2d\u8c03\u7528<\/span><\/p>\n<\/td>\n<\/tr>\n

\n

mounted<\/p>\n<\/td>\n

\n

\u5728\u7ec4\u4ef6\u63d2\u5165<\/span>DOM tree\u4e4b\u540e\u8c03\u7528\uff0c\u5728<\/span>DOM tree\u4e2d\uff0c\u60a8\u53ef\u4ee5\u5411\u7ec4\u4ef6\u6dfb\u52a0\u4e00\u4e9b\u4e8b\u4ef6\u4fa6\u542c\u5668\u6216\u5904\u7406\u4efb\u4f55\u5176\u4ed6\u4efb\u52a1<\/span><\/p>\n<\/td>\n<\/tr>\n

\n

destroy<\/p>\n<\/td>\n

\n

\u5728\u7ec4\u4ef6\u9500\u6bc1\u540e\u9500\u6bc1\u6b64\u63a7\u5236\u5668<\/span><\/p>\n<\/td>\n<\/tr>\n

\n

handle<\/p>\n<\/td>\n

\n

\u7531\u7ec4\u4ef6\u5728\u7528\u6237\u4ea4\u4e92\u671f\u95f4\u89e6\u53d1\u3002\u4f8b\u5982\uff0c\u5355\u51fb\u6309\u94ae\u6216\u7528\u6237\u901a\u8fc7\u6587\u4ef6\u9009\u62e9\u5668\u7ec4\u4ef6\u800c\u9009\u62e9\u7684\u6587\u4ef6<\/span><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

2.2.    <\/span>\u521b\u5efa\u4e00\u4e2a\u7b80\u5355\u7684\u63a7\u5236\u5668<\/span><\/p>\n

\"*\"      <\/span><\/span>\u901a\u8fc7\u627f\u88ad<\/span>UIExtension.Controller;\u521b\u5efa\u81ea\u5b9a\u4e49\u7684<\/span>CustomController\u7c7b<\/span><\/p>\n

\"*\"      <\/span><\/span>\u521b\u5efa\u4e00\u4e2a\u540d\u4e3a<\/span>moduleA\u7684\u6a21\u5757\uff1b<\/span><\/p>\n

\"*\"      <\/span><\/span>\u5c06<\/span>CustomController\u6ce8\u518c\u5230<\/span>moduleA\uff1b<\/span><\/p>\n

       \u4ee3\u7801\u5982\u4e0b<\/span><\/p>\n

class CustomController extends UIExtension.Controller {<\/p>\n

  static getName() {<\/p>\n

    return 'CustomController';<\/p>\n

  }<\/p>\n

  handle() {<\/p>\n

    alert('click in CustomController')<\/p>\n

  }<\/p>\n

}<\/p>\n

\/\/ create a module<\/p>\n

const module = PDFUI.module('moduleA', []);<\/p>\n

\/\/ Register Controller to moduleA<\/p>\n

module.registerController(CustomController);<\/p>\n

2.3.    <\/span>\u6e05\u7406<\/span>1.4. \u4e2d<\/span>xbtn-1 Fragments\u914d\u7f6e\u9879<\/span><\/p>\n

\u6e05\u9664<\/span>fragments\u4e2d\u5173\u4e8e<\/span>xbtn-1\u7684\u914d\u7f6e\u9879\uff0c\u4ee3\u7801\u5982\u4e0b\uff1a<\/span><\/p>\n

fragments = [];<\/p>\n

 <\/p>\n

2.4.    <\/span>\u9644\u52a0<\/span>CustomController \u5230\u81ea\u5b9a\u4e49\u6309\u94ae<\/span><\/p>\n

\u901a\u8fc7<\/span> @controller \u6307\u4ee4\u5c06\u63a7\u5236\u5668\u7c7b\u9644\u52a0\u5230\u7ec4\u4ef6\u3002\u4ee3\u7801\u5982\u4e0b\uff1a<\/span><\/p>\n

const newButton = `<xbutton name="xbtn-1" icon-class="fv__icon-toolbar-hand" @controller="moduleA:CustomController">simple button 1<\/xbutton>`;<\/p>\n

 <\/p>\n

3.       <\/span>\u4e3a\u4ec0\u4e48\u8981\u4f7f\u7528<\/span>Controller\u6765\u7ba1\u7406\u7ec4\u4ef6<\/span><\/p>\n

3.1.    <\/span>\u8ddf\u8e2a\u5e94\u7528\u7a0b\u5e8f\u8fd0\u884c\u65f6\u4e8b\u4ef6<\/span><\/p>\n

\u5728<\/span>Controller\u4e2d\u914d\u7f6e\u4e8b\u4ef6\u8ddf\u8e2a\u66f4\u5bb9\u6613\uff0c\u6bd4\u5982\uff1a\u6dfb\u52a0\u6309\u94ae\u70b9\u51fb\u7684\u4e8b\u4ef6\u8ddf\u8e2a\u7b49\u3002<\/span><\/p>\n

3.2.    <\/span>\u901a\u8fc7<\/span>Controller\u5904\u7406<\/span>UI\u4e0e<\/span>Data\u7684\u590d\u6742\u4ea4\u4e92<\/span><\/p>\n

\"*\"      <\/span><\/span>Web SDK PDF UI\u662f\u4e00\u4e2a\u57fa\u4e8e<\/span>MVC\u6784\u5efa\u7684<\/span>UI\u6846\u67b6<\/span><\/p>\n

\"*\"      <\/span><\/span>\u63a7\u5236\u5668\u53ef\u7528\u4e8e\u54cd\u5e94\u89c6\u56fe\u7ec4\u4ef6\u751f\u547d\u5468\u671f\u51fd\u6570\u548c\u7528\u6237\u64cd\u4f5c<\/span><\/p>\n

\u6bd4\u5982\uff1a<\/span><\/p>\n

\u6309\u94ae\u7ec4\u4ef6\u63a5\u6536\u5230\u70b9\u51fb\u4e8b\u4ef6\u65f6\uff0c\u9ed8\u8ba4\u4f1a\u8c03\u7528<\/span>Controller\u7684<\/span>handle\u65b9\u6cd5\uff0c\u5728<\/span>handle\u65b9\u6cd5\u4e2d\u4f1a\u8c03\u7528\u6a21\u578b\uff08<\/span>PDFViewer\uff09\u7684\u65b9\u6cd5\u66f4\u65b0\u6a21\u578b\u4e0a\u7684\u6570\u636e<\/span><\/p>\n

\u6a21\u578b\u6570\u636e\u66f4\u65b0\u540e\uff0c\u4f1a\u53d1\u51fa\u4e8b\u4ef6\u901a\u77e5<\/span><\/p>\n

\u6700\u540e\uff0c\u89c6\u56fe\u7ec4\u4ef6\u5728\u76d1\u542c\u5230\u6a21\u578b\u7684\u6570\u636e\u53d8\u5316\u540e\u66f4\u65b0\u9875\u9762\u7684\u663e\u793a<\/span><\/p>\n

3.3.    <\/span>Demos<\/p>\n

\u4ee3\u7801\u5982\u4e0b\uff1a<\/span><\/p>\n

class ButtonController extends UIExtension.Controller {<\/p>\n

  static getName() {<\/p>\n

    return 'ButtonController';<\/p>\n

  }<\/p>\n

  prelink() {<\/p>\n

    \/\/ send an event to server<\/p>\n

  }<\/p>\n

  postlink() {<\/p>\n

    \/\/ send an event to server<\/p>\n

  }<\/p>\n

  mounted(){<\/p>\n

   \/\/ send an event to server<\/p>\n

  }<\/p>\n

  async handle() {<\/p>\n

   \/\/ send an event to server<\/p>\n

    alert('click in  ButtonController')<\/p>\n

    \/\/ get document object<\/p>\n

   doc = await pdfui.getCurrentPDFDoc();<\/p>\n

    ….<\/p>\n

  }<\/p>\n

}<\/p>\n

<\/p>\n","protected":false},"excerpt":{"rendered":"

\u4ecb\u7ecd Foxit PDF SDK for Web \u6709\u4e00\u4e2a\u529f\u80fd\u9f50\u5168\u7684\u67e5\u770b\u5668\u6f14\u793a\u3002 \u4f46\u6709\u65f6\uff0c\u60a8\u53ef\u80fd\u5e0c\u671b\u5b9a\u5236\u6f14\u793a U […]<\/p>\n","protected":false},"author":11,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[67],"tags":[],"class_list":["post-206","post","type-post","status-publish","format-standard","hentry","category-websdk"],"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\/206","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\/11"}],"replies":[{"embeddable":true,"href":"https:\/\/support.fuxinsoft.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=206"}],"version-history":[{"count":1,"href":"https:\/\/support.fuxinsoft.cn\/index.php?rest_route=\/wp\/v2\/posts\/206\/revisions"}],"predecessor-version":[{"id":3967,"href":"https:\/\/support.fuxinsoft.cn\/index.php?rest_route=\/wp\/v2\/posts\/206\/revisions\/3967"}],"wp:attachment":[{"href":"https:\/\/support.fuxinsoft.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=206"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/support.fuxinsoft.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=206"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/support.fuxinsoft.cn\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=206"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}