📄 vue-pdf-embed

PDF embed component for Vue 3 and Vue 2 (see Compatibility)

Features

• Controlled rendering of PDF documents in Vue apps
• Handling password-protected documents
• Includes text layer (searchable and selectable documents)
• Includes annotation layer (annotations and links)
• No peer dependencies or additional configuration required
• Can be used directly in the browser (see Examples)

Compatibility

This package is only compatible with Vue 3. For Vue 2 support, install vue-pdf-embed@1 and refer to the v1 docs.

Installation

Depending on the environment, the package can be installed in one of the following ways:

npm install vue-pdf-embed

yarn add vue-pdf-embed

<script src="https://unpkg.com/vue-pdf-embed"></script>

Usage

<template>
  <div>
    <h1>File</h1>
    <vue-pdf-embed :source="source1" />

    <h1>Base64</h1>
    <vue-pdf-embed :source="source2" />
  </div>
</template>

<script>
import VuePdfEmbed from 'vue-pdf-embed'

export default {
  components: {
    VuePdfEmbed,
  },
  data() {
    return {
      source1: '<PDF_URL>',
      source2: 'data:application/pdf;base64,<BASE64_ENCODED_PDF>',
    }
  },
}
</script>

Props

| Name | Type | Accepted values | Description | | ------------------ | ---------------------- | ---------------------------------------------------------- | -------------------------------------------------------------------------- | | annotationLayer | boolean | true or false | whether the annotation layer should be enabled | | height | number string | natural numbers | desired page height in pixels (ignored if the width property is specified) | | imageResourcesPath | string | URL or path with trailing slash | path for icons used in the annotation layer | | workerSrc | string | URL | path for PDF worker script | | page | number string | 1 to the last page number | number of the page to display (displaying all pages if not specified) | | rotation | number string | 0, 90, 180, 270 (multiples of 90) | desired page rotation angle in degrees | | scale | number | rational numbers | desired ratio of canvas size to document size | | source | string object | document URL or Base64 or typed array pre-filled with data | source of the document to display | | textLayer | boolean | true or false | whether the text layer should be enabled | | width | number string | natural numbers | desired page width in pixels |

Events

| Name | Value | Description | | --------------------- | ----------------------------------------------------------------------- | ------------------------------------------ | | internal-link-clicked | destination page number | internal link was clicked | | loaded | PDF document proxy | finished loading the document | | loading-failed | error object | failed to load document | | password-requested | object with callback function and isWrongPassword flag | password is needed to display the document | | progress | object with number of loaded pages along with total number of pages | tracking document loading progress | | rendered | – | finished rendering the document | | rendering-failed | error object | failed to render document |

Slots

| Name | Props | Description | | ----------- | -------------------- | ------------------------------------ | | after-page | page (page number) | content to be added after each page | | before-page | page (page number) | content to be added before each page |

Public Methods

| Name | Arguments | Description | | -------- | ---------------------------------------------------------------------------- | ------------------------------------ | | download | filename (string) | download document | | print | print resolution (number), filename (string), all pages flag (boolean) | print document via browser interface | | render | – | manually (re)render document |

Note: Public methods can be accessed via a template ref.

Common Issues

This is a client-side library, so it is important to keep this in mind when working with SSR (server-side rendering) frameworks such as Nuxt. Depending on the framework used, you may need to properly configure the library import or use a wrapper.

The path to predefined CMaps should be specified to ensure correct rendering of documents containing non-Latin characters, as well as in case of CMap-related errors:

<vue-pdf-embed
  :source="{
    cMapUrl: 'https://unpkg.com/pdfjs-dist/cmaps/',
    url: pdfSource,
  }"
/>

The image resource path must be specified for annotations to display correctly:

<vue-pdf-embed
  image-resources-path="https://unpkg.com/pdfjs-dist/web/images/"
  :source="pdfSource"
/>

Note: The examples above use a CDN to load resources, however these resources can also be included in the build by installing the pdfjs-dist package as a dependency and further configuring the bundler.

Examples

Basic Usage Demo (JSFiddle)

Advanced Usage Demo (JSFiddle)

Advanced Usage Demo (StackBlitz)

License

MIT License. Please see LICENSE file for more information.