Load a PDF only after PDFium resources are ready

28 Feb 20263 minutes to read

When using the Standalone PDF Viewer, the component downloads the PDFium runtime assets (scripts/wasm) from the path specified in resourceUrl. Attempting to load a document before those assets are available can cause errors. Use the resourcesLoaded event to defer document loading until all required assets are ready.

When does resourcesLoaded trigger?

The resourcesLoaded event fires once the viewer finishes loading all required PDFium assets. At this point, it is safe to call the load method to open a document (by URL or Base64).

How to load a document after resourcesLoaded

  • Set the resourceUrl to a valid PDF Viewer assets path (CDN or a hosted path).
  • Listen to (resourcesLoaded) and call load inside the handler.
<!-- App.vue -->
<template>
  <div id="app">
    <ejs-pdfviewer
      id="pdfViewer"
      ref="pdfviewer"
      :documentPath="documentPath"
      :resourceUrl="resourceUrl"
      @resourcesLoaded="onResourcesLoaded"
      style="height: 640px;"
    >
    </ejs-pdfviewer>
  </div>
</template>

<script>
import {
  PdfViewerComponent,
  Toolbar,
  Magnification,
  Navigation,
  Annotation,
  TextSelection,
  TextSearch,
  FormFields,
  FormDesigner,
  PageOrganizer,
} from '@syncfusion/ej2-vue-pdfviewer';

export default {
  name: 'App',
  components: {
    'ejs-pdfviewer': PdfViewerComponent,
  },
  data() {
    return {
        documentPath:'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
        resourceUrl: 'https://cdn.syncfusion.com/ej2/28.1.33/dist/ej2-pdfviewer-lib'
    };
  },
  provide: {
    PdfViewer: [
      Toolbar,
      Magnification,
      Navigation,
      Annotation,
      TextSelection,
      TextSearch,
      FormFields,
      FormDesigner,
      PageOrganizer,
    ],
  },
    methods: {
    onResourcesLoaded() {
      // Choose ONE of the following load options:

      // 1) Load by URL
      this.$refs.pdfviewer?.load(this.documentPath, '');

      // 2) Load by Base64 (uncomment if you want to load Base64)
      // const base64 ='data:application/pdf;base64,JVBERi0xLjMNCiXi48...';
      // if (base64) {
      //   this.$refs.viewer?.load(base64, '');
      // }
    }
  },
};
</script>

View sample in GitHub

Notes and best practices

  • Always set a valid resourceUrl when using the Standalone PDF Viewer. If the path is incorrect or blocked by the network, the event cannot fire.
  • Load documents inside resourcesLoaded. This guarantees the PDFium runtime is ready and prevents intermittent errors on slower networks.
  • The event fires for the viewer’s asset load life cycle, not for every document load. After it fires once, you can safely call load again later (for example, in response to user actions) without waiting for the event.

See also