📄 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 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
Advanced Usage Demo (JSFiddle)
Advanced Usage Demo (StackBlitz)
License
MIT License. Please see LICENSE file for more information.