From 1dc4e69f06b36d728ee567a737019eaf0e75a759 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Sun, 26 May 2024 22:35:30 +0000 Subject: [PATCH] Deploy to GitHub pages --- 404.html | 22 +++ assets/app.CPdx1pHn.js | 1 + .../chunks/@localSearchIndexroot.CQmrweKt.js | 1 + assets/chunks/VPLocalSearchBox.DVBBXNkX.js | 7 + assets/chunks/framework.uxIHJ7Q2.js | 17 +++ assets/chunks/index.-EVKqUhF.js | 1 + assets/chunks/theme.DKJ1gKC5.js | 28 ++++ .../chunks/vite-browser-external.BIHI7g3E.js | 1 + assets/examples_README.md.xUNjoHVR.js | 1 + assets/examples_README.md.xUNjoHVR.lean.js | 1 + ..._advanced_annotation_filter.md.CS2HpK38.js | 27 ++++ ...nced_annotation_filter.md.CS2HpK38.lean.js | 1 + ...xamples_advanced_fit_parent.md.CdTQz1kl.js | 31 ++++ ...es_advanced_fit_parent.md.CdTQz1kl.lean.js | 1 + ...les_advanced_highlight_text.md.E_oQuIkG.js | 24 +++ ...dvanced_highlight_text.md.E_oQuIkG.lean.js | 1 + ...mples_advanced_multiple_pdf.md.CPe21CiY.js | 35 +++++ ..._advanced_multiple_pdf.md.CPe21CiY.lean.js | 1 + assets/examples_advanced_toc.md.D4_TAtJH.js | 45 ++++++ .../examples_advanced_toc.md.D4_TAtJH.lean.js | 1 + ...examples_advanced_watermark.md.D5LdRjgD.js | 34 +++++ ...les_advanced_watermark.md.D5LdRjgD.lean.js | 1 + ...vents_annotation_attachment.md.BW7DyZWL.js | 15 ++ ..._annotation_attachment.md.BW7DyZWL.lean.js | 1 + ...ion_events_annotation_forms.md.MU92Ovv6.js | 15 ++ ...vents_annotation_forms.md.MU92Ovv6.lean.js | 1 + ...ion_events_annotation_links.md.CZ5CLImb.js | 15 ++ ...vents_annotation_links.md.CZ5CLImb.lean.js | 1 + .../examples_basic_all_pages.md.Bgiz8YKO.js | 11 ++ ...amples_basic_all_pages.md.Bgiz8YKO.lean.js | 1 + ...ples_basic_annotation_layer.md.bRERWQrF.js | 19 +++ ...basic_annotation_layer.md.bRERWQrF.lean.js | 1 + assets/examples_basic_one_page.md.BQJ5PNC5.js | 22 +++ ...xamples_basic_one_page.md.BQJ5PNC5.lean.js | 1 + assets/examples_basic_rotation.md.hLcYj0sL.js | 22 +++ ...xamples_basic_rotation.md.hLcYj0sL.lean.js | 1 + assets/examples_basic_scale.md.zG8witMG.js | 22 +++ .../examples_basic_scale.md.zG8witMG.lean.js | 1 + .../examples_basic_text_layer.md.CvqCS7X4.js | 19 +++ ...mples_basic_text_layer.md.CvqCS7X4.lean.js | 1 + .../examples_basic_xfa_layer.md.41D_gXwR.js | 15 ++ ...amples_basic_xfa_layer.md.41D_gXwR.lean.js | 1 + ...ed_events_annotation_loaded.md.CvtWpCf6.js | 14 ++ ...ents_annotation_loaded.md.CvtWpCf6.lean.js | 1 + ...amples_loaded_events_loaded.md.ClUowwGY.js | 15 ++ ...s_loaded_events_loaded.md.ClUowwGY.lean.js | 1 + ...s_loaded_events_text_loaded.md.BfjqVtQx.js | 14 ++ ...ded_events_text_loaded.md.BfjqVtQx.lean.js | 1 + ...es_loaded_events_xfa_loaded.md.0fevCerE.js | 18 +++ ...aded_events_xfa_loaded.md.0fevCerE.lean.js | 1 + ..._text_events_text_highlight.md.DoaqSf0G.js | 24 +++ ..._events_text_highlight.md.DoaqSf0G.lean.js | 1 + assets/guide_composables.md.faNLVSlf.js | 71 +++++++++ assets/guide_composables.md.faNLVSlf.lean.js | 1 + assets/guide_events.md.EJPsrau-.js | 115 +++++++++++++++ assets/guide_events.md.EJPsrau-.lean.js | 1 + assets/guide_introduction.md.CdL9bhWN.js | 52 +++++++ assets/guide_introduction.md.CdL9bhWN.lean.js | 1 + assets/guide_methods.md.BSqw95De.js | 23 +++ assets/guide_methods.md.BSqw95De.lean.js | 1 + assets/guide_props.md.Bj6ueBb0.js | 34 +++++ assets/guide_props.md.Bj6ueBb0.lean.js | 1 + assets/guide_slots.md.CtDmd0rJ.js | 7 + assets/guide_slots.md.CtDmd0rJ.lean.js | 1 + assets/index.md.Cn-5gwTH.js | 1 + assets/index.md.Cn-5gwTH.lean.js | 1 + .../inter-italic-cyrillic-ext.r48I6akx.woff2 | Bin 0 -> 43112 bytes assets/inter-italic-cyrillic.By2_1cv3.woff2 | Bin 0 -> 31300 bytes assets/inter-italic-greek-ext.1u6EdAuj.woff2 | Bin 0 -> 17404 bytes assets/inter-italic-greek.DJ8dCoTZ.woff2 | Bin 0 -> 32564 bytes assets/inter-italic-latin-ext.CN1xVJS-.woff2 | Bin 0 -> 120840 bytes assets/inter-italic-latin.C2AdPX0b.woff2 | Bin 0 -> 74784 bytes assets/inter-italic-vietnamese.BSbpV94h.woff2 | Bin 0 -> 14884 bytes .../inter-roman-cyrillic-ext.BBPuwvHQ.woff2 | Bin 0 -> 40488 bytes assets/inter-roman-cyrillic.C5lxZ8CY.woff2 | Bin 0 -> 29164 bytes assets/inter-roman-greek-ext.CqjqNYQ-.woff2 | Bin 0 -> 16272 bytes assets/inter-roman-greek.BBVDIX6e.woff2 | Bin 0 -> 29920 bytes assets/inter-roman-latin-ext.4ZJIpNVo.woff2 | Bin 0 -> 110160 bytes assets/inter-roman-latin.Di8DUHzh.woff2 | Bin 0 -> 67792 bytes assets/inter-roman-vietnamese.BjW4sHH5.woff2 | Bin 0 -> 14072 bytes assets/style.CveKGxks.css | 1 + example_014.pdf | Bin 0 -> 43678 bytes example_036.pdf | Bin 0 -> 26154 bytes example_041.pdf | Bin 0 -> 28854 bytes example_045.pdf | Bin 0 -> 196940 bytes example_xfa.pdf | Bin 0 -> 1628272 bytes examples/README.html | 25 ++++ examples/advanced/annotation_filter.html | 51 +++++++ examples/advanced/fit_parent.html | 55 +++++++ examples/advanced/highlight_text.html | 48 ++++++ examples/advanced/multiple_pdf.html | 59 ++++++++ examples/advanced/toc.html | 69 +++++++++ examples/advanced/watermark.html | 58 ++++++++ .../annotation_attachment.html | 39 +++++ .../annotation_events/annotation_forms.html | 39 +++++ .../annotation_events/annotation_links.html | 39 +++++ examples/basic/all_pages.html | 35 +++++ examples/basic/annotation_layer.html | 43 ++++++ examples/basic/one_page.html | 46 ++++++ examples/basic/rotation.html | 46 ++++++ examples/basic/scale.html | 46 ++++++ examples/basic/text_layer.html | 43 ++++++ examples/basic/xfa_layer.html | 39 +++++ examples/loaded_events/annotation_loaded.html | 38 +++++ examples/loaded_events/loaded.html | 39 +++++ examples/loaded_events/text_loaded.html | 38 +++++ examples/loaded_events/xfa_loaded.html | 42 ++++++ examples/text_events/text_highlight.html | 48 ++++++ guide/composables.html | 95 ++++++++++++ guide/events.html | 139 ++++++++++++++++++ guide/introduction.html | 76 ++++++++++ guide/methods.html | 47 ++++++ guide/props.html | 58 ++++++++ guide/slots.html | 31 ++++ hashmap.json | 1 + index.html | 25 ++++ logo.png | Bin 0 -> 76350 bytes 117 files changed, 2325 insertions(+) create mode 100644 404.html create mode 100644 assets/app.CPdx1pHn.js create mode 100644 assets/chunks/@localSearchIndexroot.CQmrweKt.js create mode 100644 assets/chunks/VPLocalSearchBox.DVBBXNkX.js create mode 100644 assets/chunks/framework.uxIHJ7Q2.js create mode 100644 assets/chunks/index.-EVKqUhF.js create mode 100644 assets/chunks/theme.DKJ1gKC5.js create mode 100644 assets/chunks/vite-browser-external.BIHI7g3E.js create mode 100644 assets/examples_README.md.xUNjoHVR.js create mode 100644 assets/examples_README.md.xUNjoHVR.lean.js create mode 100644 assets/examples_advanced_annotation_filter.md.CS2HpK38.js create mode 100644 assets/examples_advanced_annotation_filter.md.CS2HpK38.lean.js create mode 100644 assets/examples_advanced_fit_parent.md.CdTQz1kl.js create mode 100644 assets/examples_advanced_fit_parent.md.CdTQz1kl.lean.js create mode 100644 assets/examples_advanced_highlight_text.md.E_oQuIkG.js create mode 100644 assets/examples_advanced_highlight_text.md.E_oQuIkG.lean.js create mode 100644 assets/examples_advanced_multiple_pdf.md.CPe21CiY.js create mode 100644 assets/examples_advanced_multiple_pdf.md.CPe21CiY.lean.js create mode 100644 assets/examples_advanced_toc.md.D4_TAtJH.js create mode 100644 assets/examples_advanced_toc.md.D4_TAtJH.lean.js create mode 100644 assets/examples_advanced_watermark.md.D5LdRjgD.js create mode 100644 assets/examples_advanced_watermark.md.D5LdRjgD.lean.js create mode 100644 assets/examples_annotation_events_annotation_attachment.md.BW7DyZWL.js create mode 100644 assets/examples_annotation_events_annotation_attachment.md.BW7DyZWL.lean.js create mode 100644 assets/examples_annotation_events_annotation_forms.md.MU92Ovv6.js create mode 100644 assets/examples_annotation_events_annotation_forms.md.MU92Ovv6.lean.js create mode 100644 assets/examples_annotation_events_annotation_links.md.CZ5CLImb.js create mode 100644 assets/examples_annotation_events_annotation_links.md.CZ5CLImb.lean.js create mode 100644 assets/examples_basic_all_pages.md.Bgiz8YKO.js create mode 100644 assets/examples_basic_all_pages.md.Bgiz8YKO.lean.js create mode 100644 assets/examples_basic_annotation_layer.md.bRERWQrF.js create mode 100644 assets/examples_basic_annotation_layer.md.bRERWQrF.lean.js create mode 100644 assets/examples_basic_one_page.md.BQJ5PNC5.js create mode 100644 assets/examples_basic_one_page.md.BQJ5PNC5.lean.js create mode 100644 assets/examples_basic_rotation.md.hLcYj0sL.js create mode 100644 assets/examples_basic_rotation.md.hLcYj0sL.lean.js create mode 100644 assets/examples_basic_scale.md.zG8witMG.js create mode 100644 assets/examples_basic_scale.md.zG8witMG.lean.js create mode 100644 assets/examples_basic_text_layer.md.CvqCS7X4.js create mode 100644 assets/examples_basic_text_layer.md.CvqCS7X4.lean.js create mode 100644 assets/examples_basic_xfa_layer.md.41D_gXwR.js create mode 100644 assets/examples_basic_xfa_layer.md.41D_gXwR.lean.js create mode 100644 assets/examples_loaded_events_annotation_loaded.md.CvtWpCf6.js create mode 100644 assets/examples_loaded_events_annotation_loaded.md.CvtWpCf6.lean.js create mode 100644 assets/examples_loaded_events_loaded.md.ClUowwGY.js create mode 100644 assets/examples_loaded_events_loaded.md.ClUowwGY.lean.js create mode 100644 assets/examples_loaded_events_text_loaded.md.BfjqVtQx.js create mode 100644 assets/examples_loaded_events_text_loaded.md.BfjqVtQx.lean.js create mode 100644 assets/examples_loaded_events_xfa_loaded.md.0fevCerE.js create mode 100644 assets/examples_loaded_events_xfa_loaded.md.0fevCerE.lean.js create mode 100644 assets/examples_text_events_text_highlight.md.DoaqSf0G.js create mode 100644 assets/examples_text_events_text_highlight.md.DoaqSf0G.lean.js create mode 100644 assets/guide_composables.md.faNLVSlf.js create mode 100644 assets/guide_composables.md.faNLVSlf.lean.js create mode 100644 assets/guide_events.md.EJPsrau-.js create mode 100644 assets/guide_events.md.EJPsrau-.lean.js create mode 100644 assets/guide_introduction.md.CdL9bhWN.js create mode 100644 assets/guide_introduction.md.CdL9bhWN.lean.js create mode 100644 assets/guide_methods.md.BSqw95De.js create mode 100644 assets/guide_methods.md.BSqw95De.lean.js create mode 100644 assets/guide_props.md.Bj6ueBb0.js create mode 100644 assets/guide_props.md.Bj6ueBb0.lean.js create mode 100644 assets/guide_slots.md.CtDmd0rJ.js create mode 100644 assets/guide_slots.md.CtDmd0rJ.lean.js create mode 100644 assets/index.md.Cn-5gwTH.js create mode 100644 assets/index.md.Cn-5gwTH.lean.js create mode 100644 assets/inter-italic-cyrillic-ext.r48I6akx.woff2 create mode 100644 assets/inter-italic-cyrillic.By2_1cv3.woff2 create mode 100644 assets/inter-italic-greek-ext.1u6EdAuj.woff2 create mode 100644 assets/inter-italic-greek.DJ8dCoTZ.woff2 create mode 100644 assets/inter-italic-latin-ext.CN1xVJS-.woff2 create mode 100644 assets/inter-italic-latin.C2AdPX0b.woff2 create mode 100644 assets/inter-italic-vietnamese.BSbpV94h.woff2 create mode 100644 assets/inter-roman-cyrillic-ext.BBPuwvHQ.woff2 create mode 100644 assets/inter-roman-cyrillic.C5lxZ8CY.woff2 create mode 100644 assets/inter-roman-greek-ext.CqjqNYQ-.woff2 create mode 100644 assets/inter-roman-greek.BBVDIX6e.woff2 create mode 100644 assets/inter-roman-latin-ext.4ZJIpNVo.woff2 create mode 100644 assets/inter-roman-latin.Di8DUHzh.woff2 create mode 100644 assets/inter-roman-vietnamese.BjW4sHH5.woff2 create mode 100644 assets/style.CveKGxks.css create mode 100644 example_014.pdf create mode 100644 example_036.pdf create mode 100644 example_041.pdf create mode 100644 example_045.pdf create mode 100644 example_xfa.pdf create mode 100644 examples/README.html create mode 100644 examples/advanced/annotation_filter.html create mode 100644 examples/advanced/fit_parent.html create mode 100644 examples/advanced/highlight_text.html create mode 100644 examples/advanced/multiple_pdf.html create mode 100644 examples/advanced/toc.html create mode 100644 examples/advanced/watermark.html create mode 100644 examples/annotation_events/annotation_attachment.html create mode 100644 examples/annotation_events/annotation_forms.html create mode 100644 examples/annotation_events/annotation_links.html create mode 100644 examples/basic/all_pages.html create mode 100644 examples/basic/annotation_layer.html create mode 100644 examples/basic/one_page.html create mode 100644 examples/basic/rotation.html create mode 100644 examples/basic/scale.html create mode 100644 examples/basic/text_layer.html create mode 100644 examples/basic/xfa_layer.html create mode 100644 examples/loaded_events/annotation_loaded.html create mode 100644 examples/loaded_events/loaded.html create mode 100644 examples/loaded_events/text_loaded.html create mode 100644 examples/loaded_events/xfa_loaded.html create mode 100644 examples/text_events/text_highlight.html create mode 100644 guide/composables.html create mode 100644 guide/events.html create mode 100644 guide/introduction.html create mode 100644 guide/methods.html create mode 100644 guide/props.html create mode 100644 guide/slots.html create mode 100644 hashmap.json create mode 100644 index.html create mode 100644 logo.png diff --git a/404.html b/404.html new file mode 100644 index 0000000..350c56a --- /dev/null +++ b/404.html @@ -0,0 +1,22 @@ + + +
+ + +=0)c=r.activeElement;else{var f=i.tabbableGroups[0],p=f&&f.firstTabbableNode;c=p||h("fallbackFocus")}if(!c)throw new Error("Your focus-trap needs to have at least one focusable element");return c},v=function(){if(i.containerGroups=i.containers.map(function(c){var f=lr(c,a.tabbableOptions),p=cr(c,a.tabbableOptions),N=f.length>0?f[0]:void 0,I=f.length>0?f[f.length-1]:void 0,L=p.find(function(D){return te(D)}),g=p.slice().reverse().find(function(D){return te(D)}),w=!!f.find(function(D){return X(D)>0});return{container:c,tabbableNodes:f,focusableNodes:p,posTabIndexesFound:w,firstTabbableNode:N,lastTabbableNode:I,firstDomTabbableNode:L,lastDomTabbableNode:g,nextTabbableNode:function(U){var j=arguments.length>1&&arguments[1]!==void 0?arguments[1]:!0,J=f.indexOf(U);return J<0?j?p.slice(p.indexOf(U)+1).find(function(H){return te(H)}):p.slice(0,p.indexOf(U)).reverse().find(function(H){return te(H)}):f[J+(j?1:-1)]}}}),i.tabbableGroups=i.containerGroups.filter(function(c){return c.tabbableNodes.length>0}),i.tabbableGroups.length<=0&&!h("fallbackFocus"))throw new Error("Your focus-trap must have at least one container with at least one tabbable node in it at all times");if(i.containerGroups.find(function(c){return c.posTabIndexesFound})&&i.containerGroups.length>1)throw new Error("At least one node with a positive tabindex was found in one of your focus-trap's multiple containers. Positive tabindexes are only supported in single-container focus-traps.")},m=function x(c){var f=c.activeElement;if(f)return f.shadowRoot&&f.shadowRoot.activeElement!==null?x(f.shadowRoot):f},b=function x(c){if(c!==!1&&c!==m(document)){if(!c||!c.focus){x(d());return}c.focus({preventScroll:!!a.preventScroll}),i.mostRecentlyFocusedNode=c,pr(c)&&c.select()}},E=function(c){var f=h("setReturnFocus",c);return f||(f===!1?!1:c)},y=function(c){var f=c.target,p=c.event,N=c.isBackward,I=N===void 0?!1:N;f=f||xe(p),v();var L=null;if(i.tabbableGroups.length>0){var g=l(f,p),w=g>=0?i.containerGroups[g]:void 0;if(g<0)I?L=i.tabbableGroups[i.tabbableGroups.length-1].lastTabbableNode:L=i.tabbableGroups[0].firstTabbableNode;else if(I){var D=at(i.tabbableGroups,function(ie){var K=ie.firstTabbableNode;return f===K});if(D<0&&(w.container===f||Ie(f,a.tabbableOptions)&&!te(f,a.tabbableOptions)&&!w.nextTabbableNode(f,!1))&&(D=g),D>=0){var U=D===0?i.tabbableGroups.length-1:D-1,j=i.tabbableGroups[U];L=X(f)>=0?j.lastTabbableNode:j.lastDomTabbableNode}else ve(p)||(L=w.nextTabbableNode(f,!1))}else{var J=at(i.tabbableGroups,function(ie){var K=ie.lastTabbableNode;return f===K});if(J<0&&(w.container===f||Ie(f,a.tabbableOptions)&&!te(f,a.tabbableOptions)&&!w.nextTabbableNode(f))&&(J=g),J>=0){var H=J===i.tabbableGroups.length-1?0:J+1,ne=i.tabbableGroups[H];L=X(f)>=0?ne.firstTabbableNode:ne.firstDomTabbableNode}else ve(p)||(L=w.nextTabbableNode(f))}}else L=h("fallbackFocus");return L},S=function(c){var f=xe(c);if(!(l(f,c)>=0)){if(he(a.clickOutsideDeactivates,c)){s.deactivate({returnFocus:a.returnFocusOnDeactivate});return}he(a.allowOutsideClick,c)||c.preventDefault()}},T=function(c){var f=xe(c),p=l(f,c)>=0;if(p||f instanceof Document)p&&(i.mostRecentlyFocusedNode=f);else{c.stopImmediatePropagation();var N,I=!0;if(i.mostRecentlyFocusedNode)if(X(i.mostRecentlyFocusedNode)>0){var L=l(i.mostRecentlyFocusedNode),g=i.containerGroups[L].tabbableNodes;if(g.length>0){var w=g.findIndex(function(D){return D===i.mostRecentlyFocusedNode});w>=0&&(a.isKeyForward(i.recentNavEvent)?w+1 $)for(;E<=k;)Le(u[E],v,S,!0),E++;else{const W=E,z=E,Q=new Map;for(E=z;E<=$;E++){const ve=d[E]=R?Xe(d[E]):Ae(d[E]);ve.key!=null&&Q.set(ve.key,E)}let te,ae=0;const Te=$-z+1;let mt=!1,es=0;const Ot=new Array(Te);for(E=0;E {const{el:S,type:I,transition:C,children:R,shapeFlag:E}=u;if(E&6){st(u.component.subTree,d,m,b);return}if(E&128){u.suspense.move(d,m,b);return}if(E&64){I.move(u,d,m,gt);return}if(I===ye){r(S,d,m);for(let k=0;k p){e=W,p=R;continue}S?W>e&&(e=W):W WARNING Annotation loaded event's payload has too many data to display on screen, open the console to see the results. WARNING Text loaded event's payload has too many data to display on screen, open the console to see the results. WARNING Highlight event's payload has too many data to display on screen, open the console to see the results. This package provides a default composable named Keep in mind that Type: This parameter is the same Type: An object with the following properties: All values returned by Type: Document's loading task, see PDFDocumentLoadingTask for more details. Type: Document's number pages. Type: Document's information object. Type: This function returns the page number referenced by Type: Open the browser's print dialog with current PDF loaded with the following parameters: Type: Trigger a downloading action using an You can access to PDFDocumentProxy through pdf's promise property and use its API methods to get more document's info like Using Emitted when page has finished to render, the payload value contains the page's data. Payload example: Emitted when text layer has finished to render, the payload value contains the Payload example: Emitted when annotation layer has finished to render, the payload value contains the Payload example: Emitted when XFA page has finished to render. Emitted when a text has been searched in page using highlight-text and highlight-options, this event return a list of matches and the page where the text was found with its Check the example: Highlight Event Emitted when user has an interaction with any annotation. Annotation event data depends on what type of annotation has triggered the event, in general, the events value follows this structure: VuePDF is a client-side component for Vue 3 that allows you to flexibly render PDF pages within your project. This library wraps The most basic usage is as simple as import the This component supports text selection and annotation interaction by enabling them with Check the examples: You could create your own custom styles and set them in your project, use this styles as a guide: XFA forms also can be supported by enabling them from Check the example: If you are looking for display non-latin text or you are getting a warning like: Warning: Error during font loading: CMapReaderFactory not initialized, see the useWorkerFetch parameter you will probably need to copy the With that made the Any idea, suggestion or contribution to the code or documentation are very welcome. Reload page's render task, useful to update some props, for example, the parent width when Cancel the render task if the page is currently rendering. Type: The Type: Page to render, this prop must be a page number starting at 1. Type: Rendering intent, can be Type: Page's scale. Type: Fit the page's width with the parent width. This prop replace scale in size calculation and has more precedence than width. Type: Scale the page using a Type: Scale the page using a Type: Rotate the page in 90° multiples eg. ( Type: Enables text selection. Type: Highlight on the page the searched text or the searched array of text. Type: Settings for how to find the highlight-text on page's text. Type: Enables document annotations like links, popups, widgets, etc. Type: Prints a watermark pattern over the canvas. Type: Customize how watermark is printed over the canvas. Type: Path to image resources needed to render some graphics when required. Type: Hide AcroForms from annotation-layer. Type: Allows to choose which annotations display on page, the following options are available: NOTE: Type: Allows to map values to annotation's storage, useful for edit annotation's data before rendering. Content to display when page is rendering Fz
zp0){I=z-Math.floor(v/4/z);break}if(o.canvas.width=o.canvas.height=0,o.font=u,I){const v=I/(I+x);return S.set(s,v),v}return S.set(s,Y),Y}function W(s,h,o){const u=document.createElement("span"),L={angle:0,canvasWidth:0,hasText:h.str!=="",hasEOL:h.hasEOL,fontSize:0};s._textDivs.push(u);const I=U.Util.transform(s._transform,h.transform);let x=Math.atan2(I[1],I[0]);const O=o[h.fontName];O.vertical&&(x+=Math.PI/2);const v=s._fontInspectorEnabled&&O.fontSubstitution||O.fontFamily,Ul=Math.hypot(I[2],I[3]),Nl=Ul*R(v);let q,r;x===0?(q=I[4],r=I[5]-Nl):(q=I[4]+Nl*Math.sin(x),r=I[5]-Nl*Math.cos(x));const P="calc(var(--scale-factor)*",ll=u.style;s._container===s._rootContainer?(ll.left=`${(100*q/s._pageWidth).toFixed(2)}%`,ll.top=`${(100*r/s._pageHeight).toFixed(2)}%`):(ll.left=`${P}${q.toFixed(2)}px)`,ll.top=`${P}${r.toFixed(2)}px)`),ll.fontSize=`${P}${Ul.toFixed(2)}px)`,ll.fontFamily=v,L.fontSize=Ul,u.setAttribute("role","presentation"),u.textContent=h.str,u.dir=h.dir,s._fontInspectorEnabled&&(u.dataset.fontName=O.fontSubstitutionLoadedName||h.fontName),x!==0&&(L.angle=x*(180/Math.PI));let Vl=!1;if(h.str.length>1)Vl=!0;else if(h.str!==" "&&h.transform[0]!==h.transform[3]){const cl=Math.abs(h.transform[0]),hl=Math.abs(h.transform[3]);cl!==hl&&Math.max(cl,hl)/Math.min(cl,hl)>1.5&&(Vl=!0)}Vl&&(L.canvasWidth=O.vertical?h.height:h.width),s._textDivProperties.set(u,L),s._isReadableStream&&s._layoutText(u)}function J(s){const{div:h,scale:o,properties:u,ctx:L,prevFontSize:I,prevFontFamily:x}=s,{style:O}=h;let v="";if(u.canvasWidth!==0&&u.hasText){const{fontFamily:Ul}=O,{canvasWidth:Nl,fontSize:q}=u;(I!==q||x!==Ul)&&(L.font=`${q*o}px ${Ul}`,s.prevFontSize=q,s.prevFontFamily=Ul);const{width:r}=L.measureText(h.textContent);r>0&&(v=`scaleX(${Nl*o/r})`)}u.angle!==0&&(v=`rotate(${u.angle}deg) ${v}`),v.length>0&&(O.transform=v)}function d(s){if(s._canceled)return;const h=s._textDivs,o=s._capability;if(h.length>m){o.resolve();return}if(!s._isReadableStream)for(const L of h)s._layoutText(L);o.resolve()}class a{constructor({textContentSource:h,container:o,viewport:u,textDivs:L,textDivProperties:I,textContentItemsStr:x}){this._textContentSource=h,this._isReadableStream=h instanceof ReadableStream,this._container=this._rootContainer=o,this._textDivs=L||[],this._textContentItemsStr=x||[],this._fontInspectorEnabled=!!globalThis.FontInspector?.enabled,this._reader=null,this._textDivProperties=I||new WeakMap,this._canceled=!1,this._capability=Promise.withResolvers(),this._layoutTextParams={prevFontSize:null,prevFontFamily:null,div:null,scale:u.scale*(globalThis.devicePixelRatio||1),properties:null,ctx:e()};const{pageWidth:O,pageHeight:v,pageX:Ul,pageY:Nl}=u.rawDims;this._transform=[1,0,0,-1,-Ul,Nl+v],this._pageWidth=O,this._pageHeight=v,(0,n.setLayerDimensions)(o,u),this._capability.promise.finally(()=>{this._layoutTextParams=null}).catch(()=>{})}get promise(){return this._capability.promise}cancel(){this._canceled=!0,this._reader&&(this._reader.cancel(new U.AbortException("TextLayer task cancelled.")).catch(()=>{}),this._reader=null),this._capability.reject(new U.AbortException("TextLayer task cancelled."))}_processItems(h,o){for(const u of h){if(u.str===void 0){if(u.type==="beginMarkedContentProps"||u.type==="beginMarkedContent"){const L=this._container;this._container=document.createElement("span"),this._container.classList.add("markedContent"),u.id!==null&&this._container.setAttribute("id",`${u.id}`),L.append(this._container)}else u.type==="endMarkedContent"&&(this._container=this._container.parentNode);continue}this._textContentItemsStr.push(u.str),W(this,u,o)}}_layoutText(h){const o=this._layoutTextParams.properties=this._textDivProperties.get(h);if(this._layoutTextParams.div=h,J(this._layoutTextParams),o.hasText&&this._container.append(h),o.hasEOL){const u=document.createElement("br");u.setAttribute("role","presentation"),this._container.append(u)}}_render(){const{promise:h,resolve:o,reject:u}=Promise.withResolvers();let L=Object.create(null);if(this._isReadableStream){const I=()=>{this._reader.read().then(({value:x,done:O})=>{if(O){o();return}Object.assign(L,x.styles),this._processItems(x.items,L),I()},u)};this._reader=this._textContentSource.getReader(),I()}else if(this._textContentSource){const{items:I,styles:x}=this._textContentSource;this._processItems(I,x),o()}else throw new Error('No "textContentSource" parameter specified.');h.then(()=>{L=null,d(this)},this._capability.reject)}}function l(s){const h=new a(s);return h._render(),h}function c({container:s,viewport:h,textDivs:o,textDivProperties:u,mustRotate:L=!0,mustRescale:I=!0}){if(L&&(0,n.setLayerDimensions)(s,{rotation:h.rotation}),I){const x=e(),v={prevFontSize:null,prevFontFamily:null,div:null,scale:h.scale*(globalThis.devicePixelRatio||1),properties:null,ctx:x};for(const Ul of o)v.properties=u.get(Ul),v.div=Ul,J(v)}}},585:(T,N,t)=>{t.d(N,{PDFDataTransportStream:()=>m});var U=t(292),n=t(419);class m{constructor(p,{disableRange:e=!1,disableStream:F=!1}){(0,U.assert)(p,'PDFDataTransportStream - missing required "pdfDataRangeTransport" argument.');const{length:R,initialData:W,progressiveDone:J,contentDispositionFilename:d}=p;if(this._queuedChunks=[],this._progressiveDone=J,this._contentDispositionFilename=d,W?.length>0){const a=W instanceof Uint8Array&&W.byteLength===W.buffer.byteLength?W.buffer:new Uint8Array(W).buffer;this._queuedChunks.push(a)}this._pdfDataRangeTransport=p,this._isStreamingSupported=!F,this._isRangeSupported=!e,this._contentLength=R,this._fullRequestReader=null,this._rangeReaders=[],p.addRangeListener((a,l)=>{this._onReceiveData({begin:a,chunk:l})}),p.addProgressListener((a,l)=>{this._onProgress({loaded:a,total:l})}),p.addProgressiveReadListener(a=>{this._onReceiveData({chunk:a})}),p.addProgressiveDoneListener(()=>{this._onProgressiveDone()}),p.transportReady()}_onReceiveData({begin:p,chunk:e}){const F=e instanceof Uint8Array&&e.byteLength===e.buffer.byteLength?e.buffer:new Uint8Array(e).buffer;if(p===void 0)this._fullRequestReader?this._fullRequestReader._enqueue(F):this._queuedChunks.push(F);else{const R=this._rangeReaders.some(function(W){return W._begin!==p?!1:(W._enqueue(F),!0)});(0,U.assert)(R,"_onReceiveData - no `PDFDataTransportStreamRangeReader` instance found.")}}get _progressiveDataLength(){return this._fullRequestReader?._loaded??0}_onProgress(p){p.total===void 0?this._rangeReaders[0]?.onProgress?.({loaded:p.loaded}):this._fullRequestReader?.onProgress?.({loaded:p.loaded,total:p.total})}_onProgressiveDone(){this._fullRequestReader?.progressiveDone(),this._progressiveDone=!0}_removeRangeReader(p){const e=this._rangeReaders.indexOf(p);e>=0&&this._rangeReaders.splice(e,1)}getFullReader(){(0,U.assert)(!this._fullRequestReader,"PDFDataTransportStream.getFullReader can only be called once.");const p=this._queuedChunks;return this._queuedChunks=null,new z(this,p,this._progressiveDone,this._contentDispositionFilename)}getRangeReader(p,e){if(e<=this._progressiveDataLength)return null;const F=new Y(this,p,e);return this._pdfDataRangeTransport.requestDataRange(p,e),this._rangeReaders.push(F),F}cancelAllRequests(p){this._fullRequestReader?.cancel(p);for(const e of this._rangeReaders.slice(0))e.cancel(p);this._pdfDataRangeTransport.abort()}}class z{constructor(p,e,F=!1,R=null){this._stream=p,this._done=F||!1,this._filename=(0,n.isPdfFile)(R)?R:null,this._queuedChunks=e||[],this._loaded=0;for(const W of this._queuedChunks)this._loaded+=W.byteLength;this._requests=[],this._headersReady=Promise.resolve(),p._fullRequestReader=this,this.onProgress=null}_enqueue(p){this._done||(this._requests.length>0?this._requests.shift().resolve({value:p,done:!1}):this._queuedChunks.push(p),this._loaded+=p.byteLength)}get headersReady(){return this._headersReady}get filename(){return this._filename}get isRangeSupported(){return this._stream._isRangeSupported}get isStreamingSupported(){return this._stream._isStreamingSupported}get contentLength(){return this._stream._contentLength}async read(){if(this._queuedChunks.length>0)return{value:this._queuedChunks.shift(),done:!1};if(this._done)return{value:void 0,done:!0};const p=Promise.withResolvers();return this._requests.push(p),p.promise}cancel(p){this._done=!0;for(const e of this._requests)e.resolve({value:void 0,done:!0});this._requests.length=0}progressiveDone(){this._done||(this._done=!0)}}class Y{constructor(p,e,F){this._stream=p,this._begin=e,this._end=F,this._queuedChunk=null,this._requests=[],this._done=!1,this.onProgress=null}_enqueue(p){if(!this._done){if(this._requests.length===0)this._queuedChunk=p;else{this._requests.shift().resolve({value:p,done:!1});for(const F of this._requests)F.resolve({value:void 0,done:!0});this._requests.length=0}this._done=!0,this._stream._removeRangeReader(this)}}get isStreamingSupported(){return!1}async read(){if(this._queuedChunk){const e=this._queuedChunk;return this._queuedChunk=null,{value:e,done:!1}}if(this._done)return{value:void 0,done:!0};const p=Promise.withResolvers();return this._requests.push(p),p.promise}cancel(p){this._done=!0;for(const e of this._requests)e.resolve({value:void 0,done:!0});this._requests.length=0,this._stream._removeRangeReader(this)}}},164:(T,N,t)=>{t.d(N,{GlobalWorkerOptions:()=>U});class U{static#l=null;static#U="";static get workerPort(){return this.#l}static set workerPort(m){if(!(typeof Worker<"u"&&m instanceof Worker)&&m!==null)throw new Error("Invalid `workerPort` type.");this.#l=m}static get workerSrc(){return this.#U}static set workerSrc(m){if(typeof m!="string")throw new Error("Invalid `workerSrc` type.");this.#U=m}}},284:(T,N,t)=>{t.d(N,{XfaLayer:()=>n});var U=t(50);class n{static setupStorage(z,Y,S,p,e){const F=p.getValue(Y,{value:null});switch(S.name){case"textarea":if(F.value!==null&&(z.textContent=F.value),e==="print")break;z.addEventListener("input",R=>{p.setValue(Y,{value:R.target.value})});break;case"input":if(S.attributes.type==="radio"||S.attributes.type==="checkbox"){if(F.value===S.attributes.xfaOn?z.setAttribute("checked",!0):F.value===S.attributes.xfaOff&&z.removeAttribute("checked"),e==="print")break;z.addEventListener("change",R=>{p.setValue(Y,{value:R.target.checked?R.target.getAttribute("xfaOn"):R.target.getAttribute("xfaOff")})})}else{if(F.value!==null&&z.setAttribute("value",F.value),e==="print")break;z.addEventListener("input",R=>{p.setValue(Y,{value:R.target.value})})}break;case"select":if(F.value!==null){z.setAttribute("value",F.value);for(const R of S.children)R.attributes.value===F.value?R.attributes.selected=!0:R.attributes.hasOwnProperty("selected")&&delete R.attributes.selected}z.addEventListener("input",R=>{const W=R.target.options,J=W.selectedIndex===-1?"":W[W.selectedIndex].value;p.setValue(Y,{value:J})});break}}static setAttributes({html:z,element:Y,storage:S=null,intent:p,linkService:e}){const{attributes:F}=Y,R=z instanceof HTMLAnchorElement;F.type==="radio"&&(F.name=`${F.name}-${p}`);for(const[W,J]of Object.entries(F))if(J!=null)switch(W){case"class":J.length&&z.setAttribute(W,J.join(" "));break;case"dataId":break;case"id":z.setAttribute("data-element-id",J);break;case"style":Object.assign(z.style,J);break;case"textContent":z.textContent=J;break;default:(!R||W!=="href"&&W!=="newWindow")&&z.setAttribute(W,J)}R&&e.addLinkAttributes(z,F.href,F.newWindow),S&&F.dataId&&this.setupStorage(z,F.dataId,Y,S)}static render(z){const Y=z.annotationStorage,S=z.linkService,p=z.xfaHtml,e=z.intent||"display",F=document.createElement(p.name);p.attributes&&this.setAttributes({html:F,element:p,intent:e,linkService:S});const R=e!=="richText",W=z.div;if(W.append(F),z.viewport){const a=`matrix(${z.viewport.transform.join(",")})`;W.style.transform=a}R&&W.setAttribute("class","xfaLayer xfaFont");const J=[];if(p.children.length===0){if(p.value){const a=document.createTextNode(p.value);F.append(a),R&&U.XfaText.shouldBuildText(p.name)&&J.push(a)}return{textDivs:J}}const d=[[p,-1,F]];for(;d.length>0;){const[a,l,c]=d.at(-1);if(l+1===a.children.length){d.pop();continue}const s=a.children[++d.at(-1)[1]];if(s===null)continue;const{name:h}=s;if(h==="#text"){const u=document.createTextNode(s.value);J.push(u),c.append(u);continue}const o=s?.attributes?.xmlns?document.createElementNS(s.attributes.xmlns,h):document.createElement(h);if(c.append(o),s.attributes&&this.setAttributes({html:o,element:s,storage:Y,intent:e,linkService:S}),s.children?.length>0)d.push([s,-1,o]);else if(s.value){const u=document.createTextNode(s.value);R&&U.XfaText.shouldBuildText(h)&&J.push(u),o.append(u)}}for(const a of W.querySelectorAll(".xfaNonInteractive input, .xfaNonInteractive textarea"))a.setAttribute("readOnly",!0);return{textDivs:J}}static update(z){const Y=`matrix(${z.viewport.transform.join(",")})`;z.div.style.transform=Y,z.div.hidden=!1}}},50:(T,N,t)=>{t.d(N,{XfaText:()=>U});class U{static textContent(m){const z=[],Y={items:z,styles:Object.create(null)};function S(p){if(!p)return;let e=null;const F=p.name;if(F==="#text")e=p.value;else if(U.shouldBuildText(F))p?.attributes?.textContent?e=p.attributes.textContent:p.value&&(e=p.value);else return;if(e!==null&&z.push({str:e}),!!p.children)for(const R of p.children)S(R)}return S(m),Y}static shouldBuildText(m){return!(m==="textarea"||m==="input"||m==="option"||m==="select")}}},228:(T,N,t)=>{t.a(T,async(U,n)=>{try{t.d(N,{AbortException:()=>m.AbortException,AnnotationEditorLayer:()=>p.AnnotationEditorLayer,AnnotationEditorParamsType:()=>m.AnnotationEditorParamsType,AnnotationEditorType:()=>m.AnnotationEditorType,AnnotationEditorUIManager:()=>e.AnnotationEditorUIManager,AnnotationLayer:()=>F.AnnotationLayer,AnnotationMode:()=>m.AnnotationMode,CMapCompressionType:()=>m.CMapCompressionType,ColorPicker:()=>R.ColorPicker,DOMSVGFactory:()=>Y.DOMSVGFactory,DrawLayer:()=>W.DrawLayer,FeatureTest:()=>m.FeatureTest,GlobalWorkerOptions:()=>J.GlobalWorkerOptions,ImageKind:()=>m.ImageKind,InvalidPDFException:()=>m.InvalidPDFException,MissingPDFException:()=>m.MissingPDFException,OPS:()=>m.OPS,Outliner:()=>d.Outliner,PDFDataRangeTransport:()=>z.PDFDataRangeTransport,PDFDateString:()=>Y.PDFDateString,PDFWorker:()=>z.PDFWorker,PasswordResponses:()=>m.PasswordResponses,PermissionFlag:()=>m.PermissionFlag,PixelsPerInch:()=>Y.PixelsPerInch,RenderingCancelledException:()=>Y.RenderingCancelledException,UnexpectedResponseException:()=>m.UnexpectedResponseException,Util:()=>m.Util,VerbosityLevel:()=>m.VerbosityLevel,XfaLayer:()=>a.XfaLayer,build:()=>z.build,createValidAbsoluteUrl:()=>m.createValidAbsoluteUrl,fetchData:()=>Y.fetchData,getDocument:()=>z.getDocument,getFilenameFromUrl:()=>Y.getFilenameFromUrl,getPdfFilenameFromUrl:()=>Y.getPdfFilenameFromUrl,getXfaPageViewport:()=>Y.getXfaPageViewport,isDataScheme:()=>Y.isDataScheme,isPdfFile:()=>Y.isPdfFile,noContextMenu:()=>Y.noContextMenu,normalizeUnicode:()=>m.normalizeUnicode,renderTextLayer:()=>S.renderTextLayer,setLayerDimensions:()=>Y.setLayerDimensions,shadow:()=>m.shadow,updateTextLayer:()=>S.updateTextLayer,version:()=>z.version});var m=t(292),z=t(831),Y=t(419),S=t(814),p=t(731),e=t(830),F=t(976),R=t(259),W=t(47),J=t(164),d=t(61),a=t(284),l=U([z]);z=(l.then?(await l)():l)[0];const c="4.2.67",s="49b388101";n()}catch(c){n(c)}})},178:(T,N,t)=>{t.d(N,{MessageHandler:()=>Y});var U=t(292);const n={UNKNOWN:0,DATA:1,ERROR:2},m={UNKNOWN:0,CANCEL:1,CANCEL_COMPLETE:2,CLOSE:3,ENQUEUE:4,ERROR:5,PULL:6,PULL_COMPLETE:7,START_COMPLETE:8};function z(S){switch(S instanceof Error||typeof S=="object"&&S!==null||(0,U.unreachable)('wrapReason: Expected "reason" to be a (possibly cloned) Error.'),S.name){case"AbortException":return new U.AbortException(S.message);case"MissingPDFException":return new U.MissingPDFException(S.message);case"PasswordException":return new U.PasswordException(S.message,S.code);case"UnexpectedResponseException":return new U.UnexpectedResponseException(S.message,S.status);case"UnknownErrorException":return new U.UnknownErrorException(S.message,S.details);default:return new U.UnknownErrorException(S.message,S.toString())}}class Y{constructor(p,e,F){this.sourceName=p,this.targetName=e,this.comObj=F,this.callbackId=1,this.streamId=1,this.streamSinks=Object.create(null),this.streamControllers=Object.create(null),this.callbackCapabilities=Object.create(null),this.actionHandler=Object.create(null),this._onComObjOnMessage=R=>{const W=R.data;if(W.targetName!==this.sourceName)return;if(W.stream){this.#U(W);return}if(W.callback){const d=W.callbackId,a=this.callbackCapabilities[d];if(!a)throw new Error(`Cannot resolve callback ${d}`);if(delete this.callbackCapabilities[d],W.callback===n.DATA)a.resolve(W.data);else if(W.callback===n.ERROR)a.reject(z(W.reason));else throw new Error("Unexpected callback case");return}const J=this.actionHandler[W.action];if(!J)throw new Error(`Unknown action from worker: ${W.action}`);if(W.callbackId){const d=this.sourceName,a=W.sourceName;new Promise(function(l){l(J(W.data))}).then(function(l){F.postMessage({sourceName:d,targetName:a,callback:n.DATA,callbackId:W.callbackId,data:l})},function(l){F.postMessage({sourceName:d,targetName:a,callback:n.ERROR,callbackId:W.callbackId,reason:z(l)})});return}if(W.streamId){this.#l(W);return}J(W.data)},F.addEventListener("message",this._onComObjOnMessage)}on(p,e){const F=this.actionHandler;if(F[p])throw new Error(`There is already an actionName called "${p}"`);F[p]=e}send(p,e,F){this.comObj.postMessage({sourceName:this.sourceName,targetName:this.targetName,action:p,data:e},F)}sendWithPromise(p,e,F){const R=this.callbackId++,W=Promise.withResolvers();this.callbackCapabilities[R]=W;try{this.comObj.postMessage({sourceName:this.sourceName,targetName:this.targetName,action:p,callbackId:R,data:e},F)}catch(J){W.reject(J)}return W.promise}sendWithStream(p,e,F,R){const W=this.streamId++,J=this.sourceName,d=this.targetName,a=this.comObj;return new ReadableStream({start:l=>{const c=Promise.withResolvers();return this.streamControllers[W]={controller:l,startCall:c,pullCall:null,cancelCall:null,isClosed:!1},a.postMessage({sourceName:J,targetName:d,action:p,streamId:W,data:e,desiredSize:l.desiredSize},R),c.promise},pull:l=>{const c=Promise.withResolvers();return this.streamControllers[W].pullCall=c,a.postMessage({sourceName:J,targetName:d,stream:m.PULL,streamId:W,desiredSize:l.desiredSize}),c.promise},cancel:l=>{(0,U.assert)(l instanceof Error,"cancel must have a valid reason");const c=Promise.withResolvers();return this.streamControllers[W].cancelCall=c,this.streamControllers[W].isClosed=!0,a.postMessage({sourceName:J,targetName:d,stream:m.CANCEL,streamId:W,reason:z(l)}),c.promise}},F)}#l(p){const e=p.streamId,F=this.sourceName,R=p.sourceName,W=this.comObj,J=this,d=this.actionHandler[p.action],a={enqueue(l,c=1,s){if(this.isCancelled)return;const h=this.desiredSize;this.desiredSize-=c,h>0&&this.desiredSize<=0&&(this.sinkCapability=Promise.withResolvers(),this.ready=this.sinkCapability.promise),W.postMessage({sourceName:F,targetName:R,stream:m.ENQUEUE,streamId:e,chunk:l},s)},close(){this.isCancelled||(this.isCancelled=!0,W.postMessage({sourceName:F,targetName:R,stream:m.CLOSE,streamId:e}),delete J.streamSinks[e])},error(l){(0,U.assert)(l instanceof Error,"error must have a valid reason"),!this.isCancelled&&(this.isCancelled=!0,W.postMessage({sourceName:F,targetName:R,stream:m.ERROR,streamId:e,reason:z(l)}))},sinkCapability:Promise.withResolvers(),onPull:null,onCancel:null,isCancelled:!1,desiredSize:p.desiredSize,ready:null};a.sinkCapability.resolve(),a.ready=a.sinkCapability.promise,this.streamSinks[e]=a,new Promise(function(l){l(d(p.data,a))}).then(function(){W.postMessage({sourceName:F,targetName:R,stream:m.START_COMPLETE,streamId:e,success:!0})},function(l){W.postMessage({sourceName:F,targetName:R,stream:m.START_COMPLETE,streamId:e,reason:z(l)})})}#U(p){const e=p.streamId,F=this.sourceName,R=p.sourceName,W=this.comObj,J=this.streamControllers[e],d=this.streamSinks[e];switch(p.stream){case m.START_COMPLETE:p.success?J.startCall.resolve():J.startCall.reject(z(p.reason));break;case m.PULL_COMPLETE:p.success?J.pullCall.resolve():J.pullCall.reject(z(p.reason));break;case m.PULL:if(!d){W.postMessage({sourceName:F,targetName:R,stream:m.PULL_COMPLETE,streamId:e,success:!0});break}d.desiredSize<=0&&p.desiredSize>0&&d.sinkCapability.resolve(),d.desiredSize=p.desiredSize,new Promise(function(a){a(d.onPull?.())}).then(function(){W.postMessage({sourceName:F,targetName:R,stream:m.PULL_COMPLETE,streamId:e,success:!0})},function(a){W.postMessage({sourceName:F,targetName:R,stream:m.PULL_COMPLETE,streamId:e,reason:z(a)})});break;case m.ENQUEUE:if((0,U.assert)(J,"enqueue should have stream controller"),J.isClosed)break;J.controller.enqueue(p.chunk);break;case m.CLOSE:if((0,U.assert)(J,"close should have stream controller"),J.isClosed)break;J.isClosed=!0,J.controller.close(),this.#d(J,e);break;case m.ERROR:(0,U.assert)(J,"error should have stream controller"),J.controller.error(z(p.reason)),this.#d(J,e);break;case m.CANCEL_COMPLETE:p.success?J.cancelCall.resolve():J.cancelCall.reject(z(p.reason)),this.#d(J,e);break;case m.CANCEL:if(!d)break;new Promise(function(a){a(d.onCancel?.(z(p.reason)))}).then(function(){W.postMessage({sourceName:F,targetName:R,stream:m.CANCEL_COMPLETE,streamId:e,success:!0})},function(a){W.postMessage({sourceName:F,targetName:R,stream:m.CANCEL_COMPLETE,streamId:e,reason:z(a)})}),d.sinkCapability.reject(z(p.reason)),d.isCancelled=!0,delete this.streamSinks[e];break;default:throw new Error("Unexpected stream case")}}async#d(p,e){await Promise.allSettled([p.startCall?.promise,p.pullCall?.promise,p.cancelCall?.promise]),delete this.streamControllers[e]}destroy(){this.comObj.removeEventListener("message",this._onComObjOnMessage)}}},651:(T,N,t)=>{t.d(N,{MurmurHash3_64:()=>z});const U=3285377520,n=4294901760,m=65535;class z{constructor(S){this.h1=S?S&4294967295:U,this.h2=S?S&4294967295:U}update(S){let p,e;if(typeof S=="string"){p=new Uint8Array(S.length*2),e=0;for(let u=0,L=S.length;u
Annotations Filter
<script setup>
+import { ref } from 'vue'
+import { VuePDF, usePDF } from '@tato30/vue-pdf'
+
+const { pdf } = usePDF('/example_014.pdf')
+
+const filters = ref(['Widget', 'Widget.Tx', 'Widget.Btn', 'Widget.Ch'])
+const selectedFilter = ref(['Widget'])
+const vuePDFRef = ref(null)
+
+function reloadPage() {
+ vuePDFRef.value.reload()
+}
+</script>
+
+<template>
+ <div>
+ <div>
+ <select v-model="selectedFilter[0]" class="select-example" @change="reloadPage">
+ <option v-for="flt in filters" :key="flt" :value="flt">
+ {{ flt }}
+ </option>
+ </select>
+ </div>
+ <VuePDF ref="vuePDFRef" :pdf="pdf" annotation-layer :annotations-filter="selectedFilter" />
+ </div>
+</template>
Fit parent
<script setup>
+import { ref } from 'vue'
+import { VuePDF, usePDF } from '@tato30/vue-pdf'
+
+const { pdf } = usePDF('https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf')
+
+const vuePDFRef = ref(null)
+const parentWidth = ref(300)
+
+function fitParentWidth(pxs) {
+ parentWidth.value = parentWidth.value + pxs
+ vuePDFRef.value.reload()
+}
+</script>
+
+<template>
+ <div>
+ <div>
+ <button @click="fitParentWidth(-50)">
+ Remove 50px
+ </button>
+ <span>Parent width: {{ parentWidth }}px</span>
+ <button @click="fitParentWidth(50)">
+ Add 50px
+ </button>
+ </div>
+ <div :style="\`width: \${parentWidth}px\`">
+ <VuePDF ref="vuePDFRef" :pdf="pdf" fit-parent />
+ </div>
+ </div>
+</template>
Highlight Text
<script setup>
+import { VuePDF, usePDF } from '@tato30/vue-pdf';
+import '@tato30/vue-pdf/style.css';
+import { ref } from 'vue';
+
+const { pdf } = usePDF('https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf')
+
+const highlightText = ref('javascript')
+const highlightOptions = ref({
+ completeWords: false,
+ ignoreCase: true,
+})
+</script>
+
+<template>
+ <div>
+ <div>
+ <input v-model="highlightText">
+ <input v-model="highlightOptions.completeWords" type="checkbox">
+ <input v-model="highlightOptions.ignoreCase" type="checkbox">
+ </div>
+ <VuePDF :pdf="pdf" text-layer :highlight-text="highlightText" :highlight-options="highlightOptions" />
+ </div>
+</template>
Multiples PDF
<script setup>
+import { VuePDF, usePDF } from '@tato30/vue-pdf'
+import { ref } from 'vue'
+
+const pdfSources = [
+ '/example_014.pdf',
+ '/example_036.pdf',
+ '/example_041.pdf',
+ '/example_045.pdf',
+ 'https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf',
+]
+// Setting the first (or default) PDF
+const pdfSource = ref(pdfSources[0])
+const pdfSourceIdx = ref(0)
+
+const { pdf } = usePDF(pdfSource)
+
+function nextPdf() {
+ pdfSourceIdx.value += 1
+ if (pdfSourceIdx.value >= pdfSources.length)
+ pdfSourceIdx.value = 0
+ pdfSource.value = pdfSources[pdfSourceIdx.value]
+}
+</script>
+
+<template>
+ <div>
+ <div>
+ <button @click="nextPdf">
+ Next PDF (Current index: {{ pdfSourceIdx }})
+ </button>
+ </div>
+ <VuePDF :pdf="pdf" />
+ </div>
+</template>
Table of content
<script setup>
+import { ref, triggerRef, watchEffect } from 'vue'
+
+import { VuePDF, usePDF } from '@tato30/vue-pdf'
+
+import ChaptersList from './ChaptersList.vue'
+
+const { pdf, info, getPDFDestination } = usePDF('/example_045.pdf')
+const outlineTree = ref([])
+
+watchEffect(() => {
+ if (info.value.outline !== undefined) {
+ outlineTree.value = info.value.outline.map(function convert(node) {
+ return {
+ title: node.title,
+ destination: getPDFDestination(node.dest),
+ items: node.items.map((item) => {
+ return convert(item)
+ }),
+ }
+ })
+ }
+})
+triggerRef(info)
+
+function onChapterClick(value) {
+ value.then((v) => {
+ console.log(v)
+ })
+}
+</script>
+
+<template>
+ <div id="toc_wrapper">
+ <div class="toc">
+ <ChaptersList
+ :items="outlineTree"
+ @chapterClick="onChapterClick"
+ />
+ </div>
+ <div class="container">
+ <VuePDF :pdf="pdf" />
+ </div>
+ </div>
+</template>
Watermark Text
<script setup>
+import { VuePDF, usePDF } from '@tato30/vue-pdf'
+import { ref } from 'vue'
+
+const { pdf } = usePDF('https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf')
+
+const pdfRef = ref(null)
+const watermarkText = ref('sample')
+const watermarkOptions = ref({
+ columns: 4,
+ rows: 4,
+ color: 'rgba(211, 210, 211, 0.8)',
+ rotation: 45,
+ fontSize: 18,
+})
+
+function reload() {
+ pdfRef.value.reload()
+}
+</script>
+
+<template>
+ <div>
+ <div>
+ <input v-model="watermarkText">
+ <input v-model="watermarkOptions.color">
+ <input v-model="watermarkOptions.columns">
+ <input v-model="watermarkOptions.rows">
+ <input v-model="watermarkOptions.rotation">
+ <input v-model="watermarkOptions.fontSize">
+ </div>
+ <VuePDF ref="pdfRef" :pdf="pdf" :watermark-text="watermarkText" :watermark-options="watermarkOptions" />
+ </div>
+</template>
File attachment
<script setup>
+import { ref } from 'vue'
+import { VuePDF, usePDF } from '@tato30/vue-pdf'
+
+const { pdf } = usePDF('/example_041.pdf')
+function onAnnotation(value) {
+ console.log(value)
+}
+</script>
+
+<template>
+ <div>
+ <VuePDF :pdf="pdf" annotation-layer image-resources-path="https://unpkg.com/pdfjs-dist@latest/web/images/" @annotation="onAnnotation" />
+ </div>
+</template>
Forms fields
<script setup>
+import { ref } from 'vue'
+import { VuePDF, usePDF } from '@tato30/vue-pdf'
+
+const { pdf } = usePDF('/example_014.pdf')
+function onAnnotation(value) {
+ console.log(value)
+}
+</script>
+
+<template>
+ <div>
+ <VuePDF :pdf="pdf" annotation-layer @annotation="onAnnotation" />
+ </div>
+</template>
Links
<script setup>
+import { ref } from 'vue'
+import { VuePDF, usePDF } from '@tato30/vue-pdf'
+
+const { pdf } = usePDF('/example_045.pdf')
+function onAnnotation(value) {
+ console.log(value)
+}
+</script>
+
+<template>
+ <div>
+ <VuePDF :pdf="pdf" annotation-layer @annotation="onAnnotation" />
+ </div>
+</template>
All pages
<script setup>
+import { VuePDF, usePDF } from '@tato30/vue-pdf'
+
+const { pdf, pages } = usePDF('https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf')
+</script>
+
+<template>
+ <div v-for="page in pages" :key="page">
+ <VuePDF :pdf="pdf" :page="page" />
+ </div>
+</template>
Annotation Layer
<script setup>
+import { ref } from 'vue'
+import { VuePDF, usePDF } from '@tato30/vue-pdf'
+import '@tato30/vue-pdf/style.css'
+
+const annotation_layer = ref(false)
+const { pdf } = usePDF('example_014.pdf')
+</script>
+
+<template>
+ <div>
+ <div>
+ <button @click="annotation_layer = !annotation_layer">
+ Change to {{ !annotation_layer }}
+ </button>
+ </div>
+ <VuePDF :pdf="pdf" :annotation-layer="annotation_layer" />
+ </div>
+</template>
One page
<script setup>
+import { ref } from 'vue'
+import { VuePDF, usePDF } from '@tato30/vue-pdf'
+
+const page = ref(1)
+const { pdf, pages } = usePDF('https://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf')
+</script>
+
+<template>
+ <div>
+ <div>
+ <button @click="page = page > 1 ? page - 1 : page">
+ Prev
+ </button>
+ <span>{{ page }} / {{ pages }}</span>
+ <button @click="page = page < pages ? page + 1 : page">
+ Next
+ </button>
+ </div>
+ <VuePDF :pdf="pdf" :page="page" />
+ </div>
+</template>
Rotation
<script setup>
+import { ref } from 'vue'
+import { VuePDF, usePDF } from '@tato30/vue-pdf'
+
+const rotation = ref(1)
+const { pdf } = usePDF('https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf')
+</script>
+
+<template>
+ <div>
+ <div>
+ <button @click="rotation = rotation - 90">
+ -90
+ </button>
+ <span>{{ rotation }}</span>
+ <button @click="rotation = rotation + 90">
+ +90
+ </button>
+ </div>
+ <VuePDF :pdf="pdf" :rotation="rotation" />
+ </div>
+</template>
Scale
<script setup>
+import { ref } from 'vue'
+import { VuePDF, usePDF } from '@tato30/vue-pdf'
+
+const scale = ref(1)
+const { pdf } = usePDF('https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf')
+</script>
+
+<template>
+ <div>
+ <div>
+ <button @click="scale = scale > 0.25 ? scale - 0.25 : scale">
+ -
+ </button>
+ <span>{{ scale * 100 }}%</span>
+ <button @click="scale = scale < 2 ? scale + 0.25 : scale">
+ +
+ </button>
+ </div>
+ <VuePDF :pdf="pdf" :scale="scale" />
+ </div>
+</template>
Text Layer
<script setup>
+import { ref } from 'vue'
+import { VuePDF, usePDF } from '@tato30/vue-pdf'
+import '@tato30/vue-pdf/style.css'
+
+const text_layer = ref(false)
+const { pdf } = usePDF('https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf')
+</script>
+
+<template>
+ <div>
+ <div>
+ <button @click="text_layer = !text_layer">
+ Change to {{ !text_layer }}
+ </button>
+ </div>
+ <VuePDF :pdf="pdf" :text-layer="text_layer" />
+ </div>
+</template>
XFA Forms
<script setup>
+import { VuePDF, usePDF } from '@tato30/vue-pdf'
+import '@tato30/vue-pdf/style.css'
+
+const { pdf } = usePDF({
+ url: '/example_xfa.pdf',
+ enableXfa: true,
+})
+</script>
+
+<template>
+ <div class="container">
+ <VuePDF :pdf="pdf" />
+ </div>
+</template>
Annotation Loaded Event
<script setup>
+import { VuePDF, usePDF } from '@tato30/vue-pdf'
+
+const { pdf } = usePDF('/example_014.pdf')
+function onLoaded(value) {
+ console.log(value)
+}
+</script>
+
+<template>
+ <div>
+ <VuePDF :pdf="pdf" annotation-layer @annotation-loaded="onLoaded" />
+ </div>
+</template>
Loaded Event
<script setup>
+import { ref } from 'vue'
+import { VuePDF, usePDF } from '@tato30/vue-pdf'
+
+const { pdf } = usePDF('https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf')
+function onLoaded(value) {
+ console.log(value)
+}
+</script>
+
+<template>
+ <div>
+ <VuePDF :pdf="pdf" @loaded="onLoaded" />
+ </div>
+</template>
Text Loaded Event
<script setup>
+import { VuePDF, usePDF } from '@tato30/vue-pdf'
+
+const { pdf } = usePDF('https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf')
+function onLoaded(value) {
+ console.log(value)
+}
+</script>
+
+<template>
+ <div>
+ <VuePDF :pdf="pdf" text-layer @text-loaded="onLoaded" />
+ </div>
+</template>
XFA Loaded Event
<script setup>
+import { VuePDF, usePDF } from '@tato30/vue-pdf'
+import '@tato30/vue-pdf/style.css'
+
+const { pdf } = usePDF({
+ url: '/example_xfa.pdf',
+ enableXfa: true,
+})
+function onLoaded() {
+ console.log("XFA loaded")
+}
+</script>
+
+<template>
+ <div>
+ <VuePDF :pdf="pdf" @xfa-loaded="onLoaded" />
+ </div>
+</template>
Highlight Event
<script setup>
+import { VuePDF, usePDF } from '@tato30/vue-pdf'
+import '@tato30/vue-pdf/style.css'
+import { ref } from 'vue'
+
+const { pdf } = usePDF('https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf')
+
+const highlightText = ref('Trace-based')
+const highlightOptions = ref({
+ completeWords: false,
+ ignoreCase: true,
+})
+
+function onHighlight(value) {
+ console.log(value)
+}
+</script>
+
+<template>
+ <div>
+ <input v-model="highlightText">
+ <VuePDF :pdf="pdf" text-layer :highlight-text="highlightText" :highlight-options="highlightOptions" @highlight="onHighlight" />
+ </div>
+</template>
Composables
usePDF
usePDF
that loads and prepare the PDF Document for it usage with VuePDF
component, also let you get some basic information and properties about the document.usePDF
use the same DocumentInitParameter as pdf.js
, so you could decide how pdf.js
should loads your PDF and then make use of more of pdf.js
features that are not included in VuePDF
by default.<script setup>
+import { VuePDF, usePDF } from '@tato30/vue-pdf'
+
+const { pdf, pages, info } = usePDF('sample.pdf')
+</script>
+
+<template>
+ <VuePDF :pdf="pdf" />
+</template>
Reactivity
usePDF
is also reactive if you use a ref<src>
instead of a plain src
, when the value of ref
changes the returned values also will chage.<script setup>
+import { VuePDF, usePDF } from '@tato30/vue-pdf'
+
+// Changing currentPdf value will change pdf, pages and info values
+const currentPdf = ref('sample.pdf')
+const { pdf, pages, info } = usePDF(currentPdf)
+</script>
+
+<template>
+ <VuePDF :pdf="pdf" />
+</template>
Parameters
src
string | URL | TypedArray | DocumentInitParameters | ref<string> | ref<URL> | ref<TypedArray> | ref<DocumentInitParameters>
Required: True
src
of pdf.jsconst { pdf, pages, info } = usePDF('sample.pdf')
options
object
onPassword
: Callback function to request the document password if no password (or wrong password) was provided.onProgress
: Callback function to enable progress monitor.onError
: function to handle pdf loading errorsfunction onPassword(updatePassword, reason) {
+ console.log(\`Reason for callback: \${reason}\`)
+ updatePassword('password1234')
+}
+
+function onProgress({ loaded, total }) {
+ console.log(\`\${loaded / total * 100}% Loaded\`)
+}
+
+function onError(reason) {
+ console.error(\`PDF loading error: \${reason}\`)
+}
+
+const { pdf, pages, info } = usePDF('sample.pdf', {
+ onPassword,
+ onProgress,
+ onError
+})
Properties
usePDF
are shallowRef
objects.pdf
PDFDocumentLoadingTask
pages
int
info
object
{
+ "metadata": {...}, // Metadata object
+ "attachments": {...}, // File attachments object
+ "javascript": [...], // Array of embedded scripts
+ "outline": {...} // Outline objects
+}
getPDFDestination
function
dest
object used by internal-links or outline object. Check the related example in Table of Contentprint
function
dpi
: Pages resolution (default: 150
).filename
: Filename of the printed file (default: 'filename'
).download
function
HTMLAnchorElement
with the following parameters:filename
: Filename of the downloaded file (default: 'filename'
)Document API
annotationStorage
or use functions like saveDocument
, cleanup
, etc.const { pdf } = usePDF('document.pdf')
+
+function doSomething() {
+ pdf.value.promise.then((doc) => {
+ // doc.annotationsStorage
+ // doc.saveDocument()
+ // doc.cleanup()
+ // doc.getData()
+ // ...
+ })
+}
Make your own composable
usePDF
it's not required, you can use the pdf.js
API in your components or build your own composable yourself. Just need to be sure to send on pdf
prop a shallowRef | ref
PDFDocumentLoadingTask object.<script setup>
+import { onMounted, ref } from 'vue'
+import * as PDFJS from 'pdfjs-dist'
+
+const pdf = ref()
+
+function loadPDF() {
+ const loadingTask = PDFJS.getDocument('https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf')
+ pdf.value = loadingTask
+}
+
+onMounted(() => {
+ loadPDF()
+})
+</script>
+
+<template>
+ <div>
+ <VuePDF :pdf="pdf" />
+ </div>
+</template>
Events
loaded
<VuePDF :pdf="pdf" @loaded="onLoaded" />
{
+ "viewBox": [0, 0, 595.276, 841.89],
+ "scale": 1,
+ "rotation": 90,
+ "offsetX": 0,
+ "offsetY": 0,
+ "transform": [0, 1, 1, 0, 0, 0],
+ "width": 841.89,
+ "height": 595.276
+}
text-loaded
<VuePDF :pdf="pdf" @text-loaded="onLoaded" />
textDivs
and textContent
of the page.{
+ "textContent": {
+ "items": [{
+ "dir": "ltr",
+ "fontName": "g_d3_f1",
+ "hasEOL": true,
+ "height": 17.9328,
+ "str": "Trace-based Just-in-Time Type Specialization for Dynamic",
+ "transform": [17.9328, 0, 0, 17.9328, 90.5159, 700.6706],
+ "width": 449.09111040000033
+ }], // ... more text items
+ "styles": {
+ "g_d3_f1": {
+ "fontFamily": "sans-serif",
+ "ascent": 0.69,
+ "descent": -0.209,
+ "vertical": false
+ } // ... more objects
+ }
+ },
+ "textDivs": ["<SPANElement>", "<SPANElement>", "..."]
+}
annotation-loaded
<VuePDF :pdf="pdf" @annotation-loaded="onLoaded" />
annotations
of the page.[
+ {
+ "annotationFlags": 4,
+ "annotationType": 20,
+ "rotation": 0,
+ "fieldType": "Tx",
+ "subType": "Widget"
+ // more properties...
+ }
+] // more annotations
xfa-loaded
<VuePDF :pdf="pdf" @xfa-loaded="onLoaded" />
highlight
<VuePDF :pdf="pdf" @highlight="onHighlight" />
textDivs
and textContent
.annotation
<VuePDF :pdf="pdf" @annotation="onAnnotation" />
Property Value type
Possible values: internal-link
, link
, file-attachment
, form-text
, form-select
, form-checkbox
, form-radio
, form-button
data
Annotation's associated data internal-link
internal-link
emitted when the user clicks on a link that redirects to another content within the document.{
+ "type": "internal-link",
+ "data": {
+ "referencedPage": 3,
+ "offset": {
+ "left": 82,
+ "bottom": 716
+ }
+ }
+}
link
link
emitted when the user clicks on an external link.{
+ "type": "link",
+ "data": {
+ "url": "mailto:aor@testmail.com",
+ "unsafeUrl": "mailto:aor@testmail.com"
+ }
+}
file-attachment
file-attachment
emitted when the user double-clicks an attachment annotation.{
+ "type": "file-attachment",
+ "data": {
+ "filename": "utf8test.txt",
+ "content": [83, 101, 110] // Uint8Array
+ }
+}
form-text
form-text
emitted when the user inputs a value in an text-field element.{
+ "type": "form-text",
+ "data": {
+ "fieldName": "firstname",
+ "value": "Aldo Hernandez"
+ }
+}
form-select
form-select
emitted when the user inputs a value in an one-select or multi-select element.{
+ "type": "form-select",
+ "data": {
+ "fieldName": "gender",
+ "value": [
+ {
+ "value": "M",
+ "label": "Male"
+ }
+ ],
+ "options": [
+ {
+ "value": "",
+ "label": "-"
+ },
+ {
+ "value": "M",
+ "label": "Male"
+ },
+ {
+ "value": "F",
+ "label": "Female"
+ }
+ ]
+ }
+}
form-checkbox
form-checkbox
emitted when the user changes a checkbox field element.{
+ "type": "form-checkbox",
+ "data": {
+ "fieldName": "newsletter",
+ "checked": true
+ }
+}
form-radio
form-radio
emitted when the user changes a radio field.{
+ "type": "form-radio",
+ "data": {
+ "fieldName": "drink",
+ "value": "Wine",
+ "defaultValue": "Beer",
+ "options": ["Water", "Beer", "Wine", "Milk"]
+ }
+}
form-button
form-button
emitted when the user clicks on a push button element.{
+ "type": "form-button",
+ "data": {
+ "fieldName": "Print",
+ "actions": {
+ "Mouse Down": ["Print()"]
+ },
+ "reset": false
+ }
+}
Introduction
pdf.js
library so all main features of pdf.js
are supported by VuePDF
as well.Installation
npm i @tato30/vue-pdf
yarn add @tato30/vue-pdf
Basic Usage
VuePDF
and usePDF
and use them on your project 😃<script setup>
+import { VuePDF, usePDF } from '@tato30/vue-pdf'
+
+const { pdf } = usePDF('sample.pdf')
+</script>
+
+<template>
+ <VuePDF :pdf="pdf" />
+</template>
Working With Layers
Text and Annotations
text-layer
and annotation-layer
props respectively, but for this layers renders correctly is necessary set some css
styles, it can be done by importing default styles from @tato30/vue-pdf/style.css
.<script setup>
+import { VuePDF, usePDF } from '@tato30/vue-pdf'
+import '@tato30/vue-pdf/style.css'
+
+const { pdf } = usePDF('sample.pdf')
+</script>
+
+<template>
+ <VuePDF :pdf="pdf" text-layer annotation-layer />
+</template>
XFA Forms
usePDF
.<script setup>
+import { VuePDF, usePDF } from '@tato30/vue-pdf'
+import '@tato30/vue-pdf/style.css'
+
+const { pdf } = usePDF({
+ url: '/example_xfa.pdf',
+ enableXfa: true,
+})
+</script>
+
+<template>
+ <VuePDF :pdf="pdf" />
+</template>
Server-Side Rendering
VuePDF
is a client-side library, so if you are working with a SSR framework like nuxt
, surely it will throw an error during the building stage, if that is the case, you could wrap VuePDF
in some sort of "client only" directive or component, also usePDF
should be wrapped.Supporting Non-Latin characters
cmaps
directory from node_modules/pdfjs-dist
to your project's public
directory, don't worry about no having pdfjs-dist
it's installed alongside vue-pdf
package..
+├─ node_modules
+│ ├─ pdfjs-dist
+│ │ └─ cmaps <--- Copy this directory
+├─ src
+├─ public
+| ├─ *cmaps* <--- Paste it here!
+├─ package.json
+| ...
cmaps
will be available on relative path /cmaps/
, now you need the tell usePDF
uses that cmaps
url:const { pdf } = usePDF({
+ url: pdfsource,
+ cMapUrl: '/cmaps/',
+})
Contributing
# Clone the repository
+git clone https://github.com/TaTo30/vue-pdf.git
+
+# Change to code folder
+cd vue-pdf
+cd vue-pdf/docs # In case you want to update docs
+
+# Install node_modules
+npm install
+
+# Run code with hot reload
+npm run dev
Methods
reload
fit-parent
is used<script setup>
+import { ref } from 'vue'
+
+const VPDF = ref({})
+function someEvent() {
+ VPDF.value.reload()
+}
+</script>
+
+<template>
+ <VuePDF ref="VPDF" :pdf="pdf" />
+</template>
cancel
<script setup>
+import { ref } from 'vue'
+
+const VPDF = ref({})
+function someEvent() {
+ VPDF.value.cancel()
+}
+</script>
+
+<template>
+ <VuePDF ref="VPDF" :pdf="pdf" />
+</template>
Props
pdf
PDFDocumentLoadingTask
Required: true
PDFDocumentLoadingTask
obtained from usePDF.<VuePDF :pdf="pdf" />
page
int
Required: false
Default: 1
<VuePDF :pdf="pdf" :page="1" />
intent
string
Required: false
Default: display
display
, print
, or any
.<VuePDF :pdf="pdf" intent="print" />
scale
int
Required: false
Default: 1
<VuePDF :pdf="pdf" :scale="0.5" />
fit-parent
boolean
Required: false
Default: false
<VuePDF :pdf="pdf" fit-parent />
width
number
Required: false
Default: null
width
in px. This prop replace scale in size calculation and has more precedence than height.<VuePDF :pdf="pdf" :width="500" />
height
number
Required: false
Default: null
height
in px. This prop replace scale in size calculation.<VuePDF :pdf="pdf" :height="500" />
rotation
int
Required: false
Default: Document's Default
90
, 180
, 270
)<VuePDF :pdf="pdf" :rotation="90" />
text-layer
boolean
Required: false
Default: false
<VuePDF :pdf="pdf" text-layer />
string | string[]
Required: false
Default: null
<VuePDF :pdf="pdf" text-layer hightlight-text="javascript" />
+
+<VuePDF :pdf="pdf" text-layer :hightlight-text="['javascript', 'trace-based']" />
object
Required: false
Default:{
+ completeWords: false,
+ ignoreCase: true
+}
<VuePDF :pdf="pdf" text-layer hightlight-text="javascript" :highlight-options="{
+ completeWords: true,
+ ignoreCase: false
+ }"
+/>
annotation-layer
boolean
Required: false
Default: false
<VuePDF :pdf="pdf" annotation-layer />
watermark-text
string
Required: false
Default: null
<VuePDF :pdf="pdf" watermark-text="Sample" />
watermark-options
object
Required: false
Default:{
+ columns: 4,
+ rows: 4,
+ rotation: 45,
+ fontSize: 18,
+ color: 'rgba(211, 210, 211, 0.4)',
+}
<script setup>
+const watermarkOptions = ref({
+ columns: 1,
+ rows: 1,
+ color: '#23FFFF',
+ rotation: 45,
+ fontSize: 20,
+})
+</script>
+
+<VuePDF :pdf="pdf" watermark-text="Sample" :watermark-options="watermarkOptions" />
image-resources-path
string
Required: false
Default: null
<VuePDF :pdf="pdf" image-resources-path="https://unpkg.com/pdfjs-dist@latest/web/images/" />
hide-forms
boolean
Required: false
Default: false
<VuePDF :pdf="pdf" annotation-layer hide-forms />
annotations-filter
array
Required: false
Default: null
Link
Text
Stamp
Popup
FreeText
Line
Square
Circle
PolyLine
Caret
Ink
Polygon
Highlight
Underline
Squiggly
StrikeOut
FileAttachment
Widget
Widget.Tx
Widget.Btn
Widget.Ch
Widget.Sig
Widget
shows all Widget
subtypes like Widget.Tx
, Widget.Btn
, etc.<script setup>
+const filter = ref(['Link', 'Text', 'Widget'])
+</script>
+
+<VuePDF :pdf="pdf" annotation-layer :annotations-filter="filter" />
annotations-map
object
Required: false
Default: null
<script setup>
+const annotationMap = ref({ '7R': { value: 'Modified value' } })
+</script>
+
+<VuePDF :pdf="pdf" annotation-layer :annotations-map="annotationMap" />
Slots
loading: default
<template>
+ <VuePDF :pdf="pdf">
+ <div>
+ Loading...
+ </div>
+ </VuePDF>
+</template>
aJxy{j56_L
zLQcd%;`&~HJsDrJW_a4>d&hA{Nt%hyNLF?&qFj~s+^=YLS&kL
tzY@L_F
znjt%f)7FgGCH%U2%r<$m;hG7%frnO4*
Cxz1l_%IQ-v1?C?Bp7%)F*OJ0z@yqEz+=WM=ei*ZAH
zzJ8H5?>a4seuL@4^zBx9ybKd#iB%8H59d?OUdVf!acjRSr8nu%NZwVCDI3byABa}{
zPQ!S+Y2vq;JukGy$P9
!>=)6>(KIHsWo&ikq@7K~44&+u;-l&
9cpqY4e@b{IL0yDOmNms)K5{s;cHyXVgXYf%=Oy
zyfhxujM7vzp9N8Yynw1eP2rYsZv-A`jP%lS(YivuqL3&TR4CdM?SoE0muc7Oc<4Og
z*6Et)`sgO=R_gB2z0ITb4qy~9W|%(AB32t)gR{lSaB_Wt{#}K>zG!`i0oGu`aKdoK
z{oGq%yyBOe+*B#1%NpNo)a