Merge pull request #13 from alekswebnet/12-open-a-file-that-i-downloaded-outside-of-the-framework

alekswebnet · web-flow · commit 32a6869b6a73 · 2023-09-16T17:55:14.000+03:00
Add access to PDFViewerApplication, update docs, refactor, fix tests
diff --git a/README.md b/README.md
@@ -4,6 +4,8 @@ A custom element, based on [PDF.js default viewer](https://mozilla.github.io/pdf
 
 ⚠️ `pdfjs-viewer-element` requires PDF.js [prebuilt](http://mozilla.github.io/pdf.js/getting_started/), that includes the generic build of PDF.js and the viewer. To use the package you should [download](http://mozilla.github.io/pdf.js/getting_started/) and **place the prebuilt** files to some directory of your project. Then specify the path to this directory with `viewer-path` property (`/pdfjs` by default).
 
+You have full access to PDF.js viewer application using `initialize` method. 
+
 ## Status
 
 [![npm version](https://img.shields.io/npm/v/pdfjs-viewer-element?logo=npm&logoColor=fff)](https://www.npmjs.com/package/pdfjs-viewer-element)
@@ -67,5 +69,19 @@ Using browser:
 
 For more clarity, see the [Api docs page](https://alekswebnet.github.io/pdfjs-viewer-element/#api).
 
+## PDF.js Viewer Application
+
+`initialize` - using this method you can access PDFViewerApplication and use methods and events of PDF.js default viewer
+
+```javascript
+document.addEventListener('DOMContentLoaded', async () => {
+  const viewer = document.querySelector('pdfjs-viewer-element')
+  // Wait for the viewer initialization, receive PDFViewerApplication
+  const viewerApp = await viewer.initialize()
+  // Open PDF file data using Uint8Array instead of URL
+  viewerApp.open(pdfData)
+})
+```
+
 ## License
-[MIT](http://opensource.org/licenses/MIT).
+[MIT](http://opensource.org/licenses/MIT)
diff --git a/index.html b/index.html
@@ -9,7 +9,7 @@
   </head>
   <body style="margin: 0">
     <pdfjs-viewer-element 
-      src="/sample-pdf-file.pdf" 
+      src="/fake-file.pdf" 
       viewer-path="/pdfjs-3.9.179-dist"
       style="height: min(500px, 50dvh)">
     </pdfjs-viewer-element>
@@ -26,11 +26,38 @@
       locale="es"
       style="height: min(500px, 50dvh)">
     </pdfjs-viewer-element>
-    <pdfjs-viewer-element 
-      src="/sample-pdf-10MB.pdf" 
+    <pdfjs-viewer-element
+      id="base-viewer"
       viewer-path="/pdfjs-3.9.179-dist"
       locale="uk"
       style="height: min(500px, 50dvh)">
     </pdfjs-viewer-element>
+    <button>Open file</button>
   </body>
+
+  <script>
+    const pdfData = Uint8Array.from(atob(
+    'JVBERi0xLjcKCjEgMCBvYmogICUgZW50cnkgcG9pbnQKPDwKICAvVHlwZSAvQ2F0YWxvZwog' +
+    'IC9QYWdlcyAyIDAgUgo+PgplbmRvYmoKCjIgMCBvYmoKPDwKICAvVHlwZSAvUGFnZXMKICAv' +
+    'TWVkaWFCb3ggWyAwIDAgMjAwIDIwMCBdCiAgL0NvdW50IDEKICAvS2lkcyBbIDMgMCBSIF0K' +
+    'Pj4KZW5kb2JqCgozIDAgb2JqCjw8CiAgL1R5cGUgL1BhZ2UKICAvUGFyZW50IDIgMCBSCiAg' +
+    'L1Jlc291cmNlcyA8PAogICAgL0ZvbnQgPDwKICAgICAgL0YxIDQgMCBSIAogICAgPj4KICA+' +
+    'PgogIC9Db250ZW50cyA1IDAgUgo+PgplbmRvYmoKCjQgMCBvYmoKPDwKICAvVHlwZSAvRm9u' +
+    'dAogIC9TdWJ0eXBlIC9UeXBlMQogIC9CYXNlRm9udCAvVGltZXMtUm9tYW4KPj4KZW5kb2Jq' +
+    'Cgo1IDAgb2JqICAlIHBhZ2UgY29udGVudAo8PAogIC9MZW5ndGggNDQKPj4Kc3RyZWFtCkJU' +
+    'CjcwIDUwIFRECi9GMSAxMiBUZgooSGVsbG8sIHdvcmxkISkgVGoKRVQKZW5kc3RyZWFtCmVu' +
+    'ZG9iagoKeHJlZgowIDYKMDAwMDAwMDAwMCA2NTUzNSBmIAowMDAwMDAwMDEwIDAwMDAwIG4g' +
+    'CjAwMDAwMDAwNzkgMDAwMDAgbiAKMDAwMDAwMDE3MyAwMDAwMCBuIAowMDAwMDAwMzAxIDAw' +
+    'MDAwIG4gCjAwMDAwMDAzODAgMDAwMDAgbiAKdHJhaWxlcgo8PAogIC9TaXplIDYKICAvUm9v' +
+    'dCAxIDAgUgo+PgpzdGFydHhyZWYKNDkyCiUlRU9G'), (m) => m.codePointAt(0));
+
+
+    document.addEventListener('DOMContentLoaded', async () => {
+      const viewer = document.querySelector('#base-viewer')
+      // Wait for the viewer initialization
+      const viewerApp = await viewer.initialize()
+      // Open PDF file data using Uint8Array instead of URL
+      viewerApp.open(pdfData)
+    })
+  </script>
 </html>
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "pdfjs-viewer-element",
-  "version": "2.3.3",
+  "version": "2.4.0",
   "license": "MIT",
   "author": {
     "name": "Oleksandr Shevchuk",
@@ -43,6 +43,6 @@
     "typescript": "^4.6.4",
     "vite": "^4.4.9",
     "vitest": "^0.34.3",
-    "webdriverio": "^8.16.4"
+    "webdriverio": "^8.16.7"
   }
 }
diff --git a/src/pdfjs-viewer-element.ts b/src/pdfjs-viewer-element.ts
@@ -38,12 +38,12 @@ export class PdfjsViewerElement extends HTMLElement {
   }
 
   attributeChangedCallback() {
-    this.debouncedRenderIframe()
+    this.onIframeReady(() => this.mountViewer(this.getIframeSrc()))
   }
 
-  private debouncedRenderIframe = debounce(async () => {
+  private onIframeReady = debounce(async (callback: () => void) => {
     await elementReady('iframe', this.shadowRoot!)
-    this.renderViewer(this.getIframeSrc())
+    callback()
   }, 0, { leading: true })
 
   private getIframeSrc() {
@@ -62,7 +62,7 @@ export class PdfjsViewerElement extends HTMLElement {
     return ''
   }
 
-  private renderViewer(src: string) {
+  private mountViewer(src: string) {
     if (!src || !this.iframe) return
     this.shadowRoot!.replaceChild(this.iframe.cloneNode(), this.iframe)
     this.iframe = this.shadowRoot!.querySelector('iframe') as PdfjsViewerElementIframe
@@ -71,16 +71,24 @@ export class PdfjsViewerElement extends HTMLElement {
 
   private setEventListeners() {
     document.addEventListener('webviewerloaded', () => {
-      if (this.getAttribute('src') !== DEFAULTS.src) this.iframe.contentWindow.PDFViewerApplicationOptions?.set('defaultUrl', '')
-      this.iframe.contentWindow.PDFViewerApplicationOptions?.set('disablePreferences', true);
-      this.iframe.contentWindow.PDFViewerApplicationOptions?.set('pdfBugEnabled', true);
-      this.iframe.contentWindow.PDFViewerApplicationOptions?.set('eventBusDispatchToDOM', true);
+      if (this.getAttribute('src') !== DEFAULTS.src) this.iframe.contentWindow?.PDFViewerApplicationOptions?.set('defaultUrl', '')
+      this.iframe.contentWindow?.PDFViewerApplicationOptions?.set('disablePreferences', true);
+      this.iframe.contentWindow?.PDFViewerApplicationOptions?.set('pdfBugEnabled', true);
+      this.iframe.contentWindow?.PDFViewerApplicationOptions?.set('eventBusDispatchToDOM', true);
     });
   }
 
   private getFullPath(path: string) {
     return path.startsWith('/') ? `${window.location.origin}${path}` : path
   }
+
+  public initialize = () => new Promise(async (reslove) => {
+    await elementReady('iframe', this.shadowRoot!)
+    this.iframe?.addEventListener('load', async () => {
+      await this.iframe.contentWindow?.PDFViewerApplication?.initializedPromise
+      reslove(this.iframe.contentWindow?.PDFViewerApplication)
+    }, { once: true })
+  })
 }
 
 declare global {
@@ -89,8 +97,17 @@ declare global {
   }
 }
 
+export interface IPdfjsViewerElement extends HTMLElement {
+  initialize: () => Promise<PdfjsViewerElementIframeWindow['PDFViewerApplication']>
+}
+
 export interface PdfjsViewerElementIframeWindow extends Window {
-  PDFViewerApplication: any,
+  PDFViewerApplication: {
+    initializedPromise: Promise<void>;
+    initialized: boolean;
+    open: (data: Uint8Array) => void;
+    eventBus: Record<string, any>;
+  },
   PDFViewerApplicationOptions: {
     set: (name: string, value: string | boolean) => void
   }
@@ -100,6 +117,12 @@ export interface PdfjsViewerElementIframe extends HTMLIFrameElement {
   contentWindow: PdfjsViewerElementIframeWindow
 }
 
+export interface PdfjsViewerLoadedEvent extends Event {
+  detail: {
+    source: PdfjsViewerElementIframeWindow
+  }
+}
+
 export default PdfjsViewerElement
 
 if (!window.customElements.get('pdfjs-viewer-element')) {
diff --git a/tests/basic.test.ts b/tests/basic.test.ts
@@ -1,36 +1,58 @@
 import { describe, expect, it } from 'vitest'
-import { getViewerContainer, renderViewer } from './test-utils'
+import { getFileData, getViewerElement, mountViewer } from './utils'
 import '../src/pdfjs-viewer-element'
 
 describe('Basic render process', async () => {
   it('should render the PDF file', async () => {
-    await renderViewer(`
+    const viewerApp = await mountViewer(`
       <pdfjs-viewer-element 
         src="/sample-pdf-10MB.pdf" 
         viewer-path="/pdfjs-3.9.179-dist"
       ></pdfjs-viewer-element>`
     )
-    expect(getViewerContainer()?.querySelector('#numPages')?.textContent).contain('37')
-    expect(getViewerContainer()?.querySelector('#viewer .page')).exist
+    expect(getViewerElement()).exist
+
+    viewerApp.eventBus.on('pagesloaded', () => {
+      expect(getViewerElement('#numPages')?.textContent).contain('37')
+    })
   })
 
   it('should not render PDF with wrong url', async () => {
-    await renderViewer(`
+    await mountViewer(`
       <pdfjs-viewer-element 
         src="/fake-file.pdf" 
         viewer-path="/pdfjs-3.9.179-dist"
       ></pdfjs-viewer-element>`
     )
-    expect(getViewerContainer()?.querySelector('#viewer .page')).not.exist
+    expect(getViewerElement()).exist
+    expect(getViewerElement('#viewer .page')).not.exist
+  })
+
+  it('should not render the viewer with wrong viewer path', async () => {
+    await mountViewer(`
+      <pdfjs-viewer-element 
+        src="/sample-pdf-10MB.pdf" 
+        viewer-path="/fake-dist"
+      ></pdfjs-viewer-element>`
+    )
+    expect(getViewerElement()).not.exist
   })
 
-  it('should not render the viewer with wrong viewer-path attribute', async () => {
-    await renderViewer(`
+  it('should open the external file with base64 source', async () => {
+    const viewerApp = await mountViewer(`
       <pdfjs-viewer-element 
-      src="/sample-pdf-10MB.pdf" 
-      viewer-path="/fake-dist"
+        src="/sample-pdf-10MB.pdf" 
+        viewer-path="/pdfjs-3.9.179-dist"
       ></pdfjs-viewer-element>`
     )
-    expect(getViewerContainer()).not.exist
+
+    expect(getViewerElement()).exist
+
+    const file = await getFileData()
+    viewerApp.open(file)
+
+    viewerApp.eventBus.on('pagesloaded', () => {
+      expect(getViewerElement('#viewer .page')).exist
+    })
   })
 })
diff --git a/tests/test-utils.ts b/tests/test-utils.ts
diff --git a/tests/utils.ts b/tests/utils.ts
@@ -0,0 +1,38 @@
+import { IPdfjsViewerElement, PdfjsViewerElementIframe } from "../src/pdfjs-viewer-element"
+
+export const getIframe = (): PdfjsViewerElementIframe => {
+  return document.body.querySelector('pdfjs-viewer-element')?.shadowRoot?.querySelector('iframe') as PdfjsViewerElementIframe
+}
+
+export const getViewerElement = (element = '#outerContainer'): HTMLElement | null | undefined => {
+  return getIframe()?.contentDocument?.querySelector(element)
+}
+
+export const mountViewer = async (template: string) => {
+  document.body.innerHTML = ''
+  document.body.innerHTML = template
+
+  const viewer = document.body.querySelector('pdfjs-viewer-element')
+  return await (viewer as IPdfjsViewerElement).initialize()
+}
+
+export const getFileData = () => {
+  const baseStr =
+    'JVBERi0xLjcKCjEgMCBvYmogICUgZW50cnkgcG9pbnQKPDwKICAvVHlwZSAvQ2F0YWxvZwog' +
+    'IC9QYWdlcyAyIDAgUgo+PgplbmRvYmoKCjIgMCBvYmoKPDwKICAvVHlwZSAvUGFnZXMKICAv' +
+    'TWVkaWFCb3ggWyAwIDAgMjAwIDIwMCBdCiAgL0NvdW50IDEKICAvS2lkcyBbIDMgMCBSIF0K' +
+    'Pj4KZW5kb2JqCgozIDAgb2JqCjw8CiAgL1R5cGUgL1BhZ2UKICAvUGFyZW50IDIgMCBSCiAg' +
+    'L1Jlc291cmNlcyA8PAogICAgL0ZvbnQgPDwKICAgICAgL0YxIDQgMCBSIAogICAgPj4KICA+' +
+    'PgogIC9Db250ZW50cyA1IDAgUgo+PgplbmRvYmoKCjQgMCBvYmoKPDwKICAvVHlwZSAvRm9u' +
+    'dAogIC9TdWJ0eXBlIC9UeXBlMQogIC9CYXNlRm9udCAvVGltZXMtUm9tYW4KPj4KZW5kb2Jq' +
+    'Cgo1IDAgb2JqICAlIHBhZ2UgY29udGVudAo8PAogIC9MZW5ndGggNDQKPj4Kc3RyZWFtCkJU' +
+    'CjcwIDUwIFRECi9GMSAxMiBUZgooSGVsbG8sIHdvcmxkISkgVGoKRVQKZW5kc3RyZWFtCmVu' +
+    'ZG9iagoKeHJlZgowIDYKMDAwMDAwMDAwMCA2NTUzNSBmIAowMDAwMDAwMDEwIDAwMDAwIG4g' +
+    'CjAwMDAwMDAwNzkgMDAwMDAgbiAKMDAwMDAwMDE3MyAwMDAwMCBuIAowMDAwMDAwMzAxIDAw' +
+    'MDAwIG4gCjAwMDAwMDAzODAgMDAwMDAgbiAKdHJhaWxlcgo8PAogIC9TaXplIDYKICAvUm9v' +
+    'dCAxIDAgUgo+PgpzdGFydHhyZWYKNDkyCiUlRU9G'
+
+  return fetch(baseStr)
+    .then(b => b.arrayBuffer())
+    .then(buff => new Uint8Array(buff))
+}
diff --git a/types/pdfjs-viewer-element.d.ts b/types/pdfjs-viewer-element.d.ts
@@ -4,23 +4,38 @@ export declare class PdfjsViewerElement extends HTMLElement {
     static get observedAttributes(): string[];
     connectedCallback(): void;
     attributeChangedCallback(): void;
-    private debouncedRenderIframe;
+    private onIframeReady;
     private getIframeSrc;
-    private renderViewer;
+    private mountViewer;
     private setEventListeners;
     private getFullPath;
+    initialize: () => Promise<unknown>;
 }
 declare global {
     interface Window {
-        'PdfjsViewerElement': typeof PdfjsViewerElement;
+        PdfjsViewerElement: typeof PdfjsViewerElement;
     }
 }
+export interface IPdfjsViewerElement extends HTMLElement {
+    initialize: () => Promise<PdfjsViewerElementIframeWindow['PDFViewerApplication']>;
+}
 export interface PdfjsViewerElementIframeWindow extends Window {
+    PDFViewerApplication: {
+        initializedPromise: Promise<void>;
+        initialized: boolean;
+        open: (data: Uint8Array) => void;
+        eventBus: Record<string, any>;
+    };
     PDFViewerApplicationOptions: {
         set: (name: string, value: string | boolean) => void;
     };
 }
 export interface PdfjsViewerElementIframe extends HTMLIFrameElement {
     contentWindow: PdfjsViewerElementIframeWindow;
 }
+export interface PdfjsViewerLoadedEvent extends Event {
+    detail: {
+        source: PdfjsViewerElementIframeWindow;
+    };
+}
 export default PdfjsViewerElement;
diff --git a/vite.config.ts b/vite.config.ts
@@ -14,7 +14,7 @@ export default defineConfig({
   test: {
     browser: {
       enabled: true,
-      name: 'chrome',
+      name: 'firefox',
       headless: true
     },
   },
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "pdfjs-viewer-element",`
`3`		`- "version": "2.3.3",`
	`3`	`+ "version": "2.4.0",`
`4`	`4`	`"license": "MIT",`
`5`	`5`	`"author": {`
`6`	`6`	`"name": "Oleksandr Shevchuk",`
`@@ -43,6 +43,6 @@`
`43`	`43`	`"typescript": "^4.6.4",`
`44`	`44`	`"vite": "^4.4.9",`
`45`	`45`	`"vitest": "^0.34.3",`
`46`		`- "webdriverio": "^8.16.4"`
	`46`	`+ "webdriverio": "^8.16.7"`
`47`	`47`	`}`
`48`	`48`	`}`