HelpBot Assistant

How can I help you?

Getting started with standalone Vue PDF Viewer

28 Feb 20269 minutes to read

This section explains how to create the PDF Viewer component and configure its available functionalities in a Vue 2 application using Vue-CLI with client-side rendering. The standalone PDF Viewer renders PDFs locally in the browser without requiring a backend web service.

The standalone PDF Viewer provides complete local rendering capabilities, eliminating the need for server-side processing. This is ideal for applications that require offline PDF viewing or wish to reduce server infrastructure overhead.

Prerequisites

Before you get started, ensure the following are in place:

System requirements for Syncfusion^® Vue UI components
Node.js v14.15.0 or later
Vue CLI installed globally

Setting up the Vue 2 project

To generate a Vue 2 project using Vue-CLI, use the Vue create command. Follow these steps to install Vue CLI and create a new project:

npm install -g @vue/cli
vue create quickstart
cd quickstart

yarn global add @vue/cli
vue create quickstart
cd quickstart

When creating a new project, choose the option Default ([Vue 2] babel, es-lint) from the menu.

Vue 2 project

Once the quick start project is set up with default settings, proceed to add Syncfusion^® components to the project.

Add Syncfusion^® Vue packages

Syncfusion^® packages are available at npmjs.com. Install the @syncfusion/ej2-vue-pdfviewer package, which includes all necessary PDF processing libraries for standalone rendering:

npm install @syncfusion/ej2-vue-pdfviewer --save

yarn add @syncfusion/ej2-vue-pdfviewer

Import Syncfusion^® CSS styles

You can import themes for the Syncfusion^® Vue component in various ways, such as using CSS or SASS styles from npm packages, CDN, CRG, or Theme Studio. Refer to themes documentation for more details about built-in themes and available approaches.

In this example, the Material theme is applied using CSS styles available in the installed packages. The required Material CSS styles for the PDF Viewer component and its dependencies are imported into the <style> section of the src/App.vue file.

~/src/App.vue
<style>
  @import '../node_modules/@syncfusion/ej2-base/styles/material.css';
  @import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
  @import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
  @import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
  @import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';
  @import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
  @import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
  @import '../node_modules/@syncfusion/ej2-lists/styles/material.css';
  @import '../node_modules/@syncfusion/ej2-pdfviewer/styles/material.css';
</style>

The PDF Viewer supports different themes; refer to Supported themes section.

Add Syncfusion^® Vue component

Follow the steps below to add the Vue PDF Viewer component:

1. Import and register the PDF Viewer component in the script section of the src/App.vue file.

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

</script>

In the template section, define the PDF Viewer component with the documentPath and resourceUrl properties.

~/src/App.vue
<template>
  <div id="app">
    <ejs-pdfviewer
      id="pdfViewer"
      :resourceUrl="resourceUrl"
      :documentPath="documentPath">
    </ejs-pdfviewer>
  </div>
</template>

3. Declare the bound resourceUrl and documentPath properties in the script section.

~/src/App.vue
<script>

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

  export default {

  name: 'App',

  components: {
    "ejs-pdfviewer": PdfViewerComponent
  },

    data () {
      return {
        resourceUrl:'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib',
        documentPath:"https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
      };
    },

    provide: {
      PdfViewer: [ Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
                   Print, TextSelection, TextSearch, Annotation, FormDesigner, FormFields, PageOrganizer ]}
}

</script>

Configure PDF Viewer with Local Resources

By default, the above configuration uses CDN-hosted resources for quick setup. To configure the PDF Viewer to use local files for documentPath and resourceUrl instead of CDN resources, follow these steps:

Step 1: Ensure that your application includes the ej2-pdfviewer-lib folder. This folder must contain the pdfium.js and pdfium.wasm files required for PDF rendering, along with any PDF files you intend to display. Place these in the asset directory within your project’s public folder.

Step 2: Update the documentPath and resourceUrl properties to use local file paths. The documentPath should refer to your local PDF file, and the resourceUrl should point to the directory containing the supporting library files.

Refer to the following code snippet:

~/src/App.vue
<script>
    data() {
      return {
        resourceUrl: window.location.origin + "/asset/ej2-pdfviewer-lib",
        documentPath: window.location.origin + "/asset/pdfsuccinctly.pdf"
      };
    },
</script>

View the sample in GitHub to load the PDF Viewer with local resources.

The following code summarizes the setup for the PDF Viewer in the src/App.vue file:

~/src/App.vue
<template>
  <ejs-pdfviewer
    id="pdfViewer"
    :resourceUrl="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 {
    name: 'App',

    components: {
      "ejs-pdfviewer": PdfViewerComponent
    },

    data() {
      return {
        resourceUrl: 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib',
        documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
      };
    },
    provide: {
      PdfViewer: [ Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
                   Print, TextSelection, TextSearch, Annotation, FormDesigner, FormFields, PageOrganizer ]
    }
  }
</script>

<style>
  @import '../node_modules/@syncfusion/ej2-base/styles/material.css';
  @import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
  @import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
  @import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
  @import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';
  @import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
  @import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
  @import '../node_modules/@syncfusion/ej2-lists/styles/material.css';
  @import '../node_modules/@syncfusion/ej2-pdfviewer/styles/material.css';
</style>

Run the project

To run the project, use the following command:

npm run serve

yarn run serve

Here is the summarized code for the steps above in the src/App.vue file:

The output will be displayed as follows:

~/src/App.vue
<template>
  <div id="app">
    <ejs-pdfviewer
      id="pdfViewer"
      :documentPath="documentPath"
      :resourceUrl="resourceUrl">
    </ejs-pdfviewer>
  </div>
</template>

<script>
import Vue from 'vue';
import { PdfViewerPlugin, Toolbar, Magnification, Navigation, LinkAnnotation,
         BookmarkView, ThumbnailView, Print, TextSelection, TextSearch,
         Annotation, FormDesigner, FormFields, PageOrganizer } from '@syncfusion/ej2-vue-pdfviewer';
Vue.use(PdfViewerPlugin);
export default {
  name: 'app',
  data () {
    return {
      documentPath:"https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
      resourceUrl:"https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib",
    };
  },

  provide: {
    PdfViewer: [ Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
                 Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner, PageOrganizer ]
  }
}
</script>

View sample in GitHub

Explore the Vue PDF Viewer feature tour page for comprehensive feature demonstrations. You can also review the Vue PDF Viewer example to understand the core features of the PDF Viewer.

Search docs

Ask HelpBot

Search docs

Ask HelpBot

How can I help you?

Getting started with standalone Vue PDF Viewer

Prerequisites

Setting up the Vue 2 project

Add Syncfusion^® Vue packages

Import Syncfusion^® CSS styles

Add Syncfusion^® Vue component

Configure PDF Viewer with Local Resources

Run the project

How can I help you?

Getting started with standalone Vue PDF Viewer

Prerequisites

Setting up the Vue 2 project

Add Syncfusion® Vue packages

Import Syncfusion® CSS styles

Add Syncfusion® Vue component

Configure PDF Viewer with Local Resources

Run the project

Add Syncfusion^® Vue packages

Import Syncfusion^® CSS styles

Add Syncfusion^® Vue component