Basic Usage

The Vue PDF Viewer component, by default, will take the full size of its container which you can also set the width and height. The component is designed to be web responsive.

Import Component

Vue 3

To initiate Vue PDF Viewer, you will first need to import VPdfViewer component.

There are two main ways to use Vue PDF Viewer in your project, namely:

• Composition API: A new method to organize and reuse logic by allowing developers to write components as functions.
• Options API: A traditional method from Vue 2 where components are grouped into series of options.

Composition API

<script setup>
  import { VPdfViewer } from '@vue-pdf-viewer/viewer';
</script>
<template>
  <div :style="{ width: '1028px', height: '700px'}">
    <VPdfViewer src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf" />
  </div>
</template>

Options API

<script>
  import { VPdfViewer } from '@vue-pdf-viewer/viewer';
  
  export default {
    components: { VPdfViewer },
    data() {
      return {
        src: "https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
      }
    }
  }
</script>
<template>
  <VPdfViewer :src="src" />
</template>

After executing the development command and opening the browser, here is how it will look.

Handling Source of PDF File

The src prop of the VPdfViewer component is designed for flexibility, accepting different types of PDF sources. This allows developers to handle PDFs from various origins, such as URLs, file paths within the Vue project, or Blob objects (e.g., when fetching files from an API). Below is a detailed guide on how to handle each type of source effectively.

URL (HTTP/HTTPS)

If the src prop is a URL, the component can directly fetch and display the PDF. This is useful for displaying PDFs hosted on an external server.

Example

<template>
  <VPdfViewer src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf" />
</template>

Best Practices:

• Ensure the URL is accessible and the server supports CORS (Cross-Origin Resource Sharing) if the PDF is hosted on a different domain.
• Handle errors gracefully (e.g., network issues or invalid URLs) by adding error handling in the component at @loadError event.

Blob (From API or File Upload)

If the src prop is a Blob URL (e.g., blob:https://example.com/pdf-document), it can be used to display generated PDFs or fetch PDFs dynamically such as from a file upload or an API.

Example

<template>
  <VPdfViewer :src="pdfBlobUrl" />
</template>
<script>
  export default {
    data() {
      return {
        pdfBlobUrl: null,
      };
    },
    async created() {
      // Fetch PDF from an API
      const response = await fetch('https://api.example.com/document');
      const blob = await response.blob();
      this.pdfBlobUrl = URL.createObjectURL(blob);
    },
    beforeUnmount() {
      // Clean up the Blob URL to avoid memory leaks
      if (this.pdfBlobUrl) {
        URL.revokeObjectURL(this.pdfBlobUrl);
      }
    },
  };
</script>

Best Practices:

• Always revoke Blob URLs using URL.revokeObjectURL when the component is destroyed or the Blob is no longer needed to prevent memory leaks
• Handle errors during the fetch operation and provide fallback content or error messages

Internal File Path

If the src prop is a file path relative to the Vue project with Vite (e.g., ./assets/document.pdf), Vite will resolve the path during the build process. This is ideal for PDFs bundled with your application.

Example

<template>
  <VPdfViewer src="./assets/document.pdf" />
</template>

Best Practices:

• Place the PDF files in the public directory if they do not need processing by Vite. Files in the public directory are served as-is.
• Use the src/assets directory for PDFs that need to be processed or optimized by Vite
• Use dynamic imports (import.meta.url) to resolve paths programmatically if needed