Load PDF Viewer with Local Resources in Vue

27 Apr 20263 minutes to read

This guide shows how to configure the PDF Viewer to load resources from your local application instead of a CDN.

Prerequisites

• Complete the getting started guide for the Vue PDF Viewer.
• Node.js and Vue CLI installed.

Configuration steps

Step 1: Copy resource files

Ensure that your application includes the ej2-pdfviewer-lib folder, which contains the pdfium.js and pdfium.wasm files required for PDF rendering.

Copy the folder into the public/asset directory of your application.

Step 2: Add your PDF document

Place the PDF file you want to display inside the same public/asset directory.

Example folder structure:

public/
└── asset/
    ├── ej2-pdfviewer-lib/
    │   ├── pdfium.js
    │   └── pdfium.wasm
    └── pdfsuccinctly.pdf

Step 3: Update the documentPath and resourcesUrl

Configure the PDF Viewer to use local paths as shown below.

~/src/App.vue

<script>
export default {
  data() {
    return {
      resourceUrl: window.location.origin + '/asset/ej2-pdfviewer-lib',
      documentPath: window.location.origin + '/asset/pdfsuccinctly.pdf'
    };
  }
}
</script>

Complete example

The following code summarizes the complete setup for loading the PDF Viewer with local resources.

~/src/App.vue

<template>
  <ejs-pdfviewer
    :resourcesUrl="resourceUrl"
    :documentPath="documentPath">
  </ejs-pdfviewer>
</template>

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

export default {
  components: {
    'ejs-pdfviewer': PdfViewerComponent
  },
  data() {
    return {
      resourceUrl: window.location.origin + '/asset/ej2-pdfviewer-lib',
      documentPath: window.location.origin + '/asset/pdfsuccinctly.pdf'
    };
  },
  provide: {
    PdfViewer: [
      Toolbar,
      Magnification,
      Navigation,
      LinkAnnotation,
      BookmarkView,
      ThumbnailView,
      Print,
      TextSelection,
      TextSearch,
      Annotation,
      FormDesigner,
      FormFields,
      PageOrganizer
    ]
  }
}
</script>

GitHub reference

View the complete sample on GitHub:

• Load the PDF Viewer with local resources (Vue)