.png)
Vue-pdf-embed: Vue.js component to embed pdf
Embed PDFs into your Vue.js application with vue-pdf-embed. Provides controlled rendering, search documents and can be used directly in your browser.
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-embedyarn 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
disableAnnotationLayer
Type: boolean
Accepted Values: true or false
Description: whether the annotation layer should be disabled
disableTextLayer
Type: boolean
Accepted Values: true or false
Description: whether the text layer should be disabled
height
Type: Number String
Accepted Values: natural numbers
Description: desired page height in pixels (ignored if the width property is specified)
imageResourcesPath
Type: string
Accepted Values: URL or path with trailing slash
Description: path for icons used in the annotation layer
page
Type: number
Accepted Values: 1 to the last page number
Description: number of the page to display (displays all pages if not specified)
rotation
Type: Number String
Accepted Values: 0, 90, 180 or 270 (multiples of 90)
Description: desired page rotation angle in degrees
scale
Type: number
Accepted Values: rational numbers
Description: desired ratio of canvas size to document size
source
Type: string object unit8array
Accepted Values: document URL or typed array pre-filled with data
Description: source of the document to display
width
Type: Number String
Accepted Values: natural numbers
Description: desired page width in pixels
Events
internal-link-clicked
Value: destination page number
Description: internal link was clicked
loading-failed
Value: error object
Description: failed to load document
loaded
Value: PDF document proxy
Description: finished loading the document
password-requested
Value: callback function, retry flag
Description: password is needed to display the document
rendering-failed
Value: error object
Description: failed to render document
rendered
Value: -
Description: finished rendering the document
printing-failed
Value: error object
Description: failed to print document
progress
Value: progress params object
Description: tracking document loading progress
Public Methods
render
Arguments: -
Description: manually (re)render document
print
Arguments: print resolution (number), filename (string), all pages flag (boolean)
Description: print document via browser interface
Note: Public methods can be accessed via a template ref.
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.
