Syncfusion AI Assistant

How can I help you?

Getting started with standalone Vue PDF Viewer

28 Apr 20266 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

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

Create a Vue 2 app

Use one of the following commands to create a Vue 2 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® PDF Viewer packages

Install the Syncfusion PDF Viewer package from the npm registry.

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.

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

Add the PDF Viewer component

Add the PDF Viewer component to the src/App.vue file as shown below.

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

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

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

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

<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

View sample in GitHub

See also