Syncfusion AI Assistant

How can I help you?

Getting started with standalone Vue PDF Viewer Component in Vue 2

22 May 20265 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 Syncfusion® 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

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

Import and register the PDF Viewer component directives in the script section of src/App.vue. Then, define the component in the template section.

<template>
  <div id="app">
    <ejs-pdfviewer
      id="pdfViewer"
      :resourceUrl="resourceUrl"
      :documentPath="documentPath">
    </ejs-pdfviewer>
  </div>
</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 {
      // Specifies the location of the PDFium dependency files required
      // for rendering and processing PDFs in the PDF Viewer.
      resourceUrl: 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib',
      // Defines the source of the PDF to load in the PDF Viewer.
      // Accepts either a public URL or a Base64-encoded PDF string.
      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>

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

See also