Skip to content

Latest commit

 

History

History
122 lines (91 loc) · 6.85 KB

README.md

File metadata and controls

122 lines (91 loc) · 6.85 KB
Raw

📄 vue-pdf-embed

PDF embed component for Vue 2 and Vue 3

Awesome npm npm GitHub Repo stars npm

Features

  • Controlled rendering of PDF documents in Vue apps
  • Handles 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 compatible with both Vue 2 and Vue 3, but consists of two separate builds. The default exported build is for Vue 3, for Vue 2 import dist/vue2-pdf-embed.js (see Usage).

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'

// OR THE FOLLOWING IMPORT FOR VUE 2
// import VuePdfEmbed from 'vue-pdf-embed/dist/vue2-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
disableAnnotationLayer boolean true or false whether the annotation layer should be disabled
transparentBackground boolean true or false whether the pdf has a transparent background or not. Can improve performance if set to false
disableTextLayer boolean true or false whether the text layer should be disabled
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
page number 1 to the last page number number of the page to display (displays all pages if not specified)
rotation number
string		 0, 90, 180 or 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
Uint8Array		 document URL or typed array pre-filled with data source of the document to display
width number
string		 natural numbers desired page width in pixels

Events

Name Value Description
internal-link-clicked destination page number internal link was clicked
loading-failed error object failed to load document
loaded PDF document proxy finished loading the document
password-requested callback function, retry flag password is needed to display the document
rendering-failed error object failed to render document
rendered – finished rendering the document
printing-failed error object failed to print document
progress progress params object tracking document loading progress

Public Methods

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

Static Methods

Besides the component itself, the module also includes a getDocument function for manual loading of PDF documents, which can then be used as the source prop of the component. In most cases it is sufficient to specify the source prop with a URL or typed array, while the result of the getDocument function can be used in special cases, such as sharing the source between multiple component instances. This is an advanced topic, so it is recommended to check the source code of the component before using this function.

Examples

Basic Usage Demo (JSFiddle)

Advanced Usage Demo (JSFiddle)

Advanced Usage Demo (StackBlitz)

License

MIT License. Please see LICENSE file for more information.