Getting Started with standalone Vue PDF Viewer Component in Vue 2

24 Jun 20264 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 server.

Prerequisites

System requirements for Vue components

Create a Vue Application

Use one of the following commands to create a Vue application using Vue CLI.

npm install -g @vue/cli
vue create quickstart
cd quickstart
yarn global add @vue/cli
vue create quickstart
cd quickstart

When prompted, select Default ([Vue 2] babel, eslint).

For Vue 3 application setup, see Create a Vue 3 app.

Install the Syncfusion® Vue PDF Viewer packages

Install the Vue PDF Viewer package from npm using the following command:

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

Import Syncfusion® CSS styles

Add the required CSS styles for the PDF Viewer component and its dependencies to your App.vue file.

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

<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>

NOTE

Refer to the Themes topic to learn more about built-in themes and different ways to refer to themes in a Vue project.

Add the Syncfusion® Vue PDF Viewer component

Add the PDF Viewer component to your Vue application by following these instructions:

Import and register the PDF Viewer

Import and register the PDF Viewer component directives in the <script> section of src/App.vue.

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 ]
  }
}

serviceUrl – The back-end endpoint for PDF processing. The Syncfusion-hosted URL provides evaluation capabilities. For production, replace with your deployed web service endpoint.

documentPath – The URL or file path to the PDF document to display.

Initialize the PDF Viewer

Add the Syncfusion Vue PDF Viewer component to the <template> section in the src/App.vue file.

<ejs-pdfviewer id="pdfViewer" :resourceUrl="resourceUrl" :documentPath="documentPath">
</ejs-pdfviewer>

NOTE

To load PDF documents and resources from your local application instead of a CDN, refer to Load PDF Viewer with Local Resources

Run the project

Run the following command to start the Vue application:

npm run serve
yarn serve

After the application starts, open the localhost URL shown in the terminal to view the Vue PDF Viewer in the browser. The output will appear as follows:

Vue PDF Viewer control

You can also explore the PDF Viewer interactively using the live sample below.

View sample in GitHub

Video tutorial

To get started quickly with Vue PDF Viewer, you can watch this video:

NOTE

Looking for the full Vue PDF Viewer component overview, features, pricing, and documentation? Visit the Vue PDF Viewer page.

See also