PDF embed component for Vue 3 (see Compatibility for Vue 2 support)
- 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)
This package is only compatible with Vue 3. For Vue 2 support, install vue-pdf-embed@1 and refer to the v1 docs.
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><script setup>
import VuePdfEmbed from 'vue-pdf-embed'
// Optional styles
import 'vue-pdf-embed/dist/styles/annotationLayer.css'
import 'vue-pdf-embed/dist/styles/textLayer.css'
// Either URL, Base64, binary, or document proxy
const pdfSource = '<PDF_URL>'
</script>
<template>
<VuePdfEmbed annotation-layer text-layer :source="pdfSource" />
</template>| Name | Type | Accepted values | Description |
|---|---|---|---|
| annotationLayer | boolean |
whether the annotation layer should be enabled | |
| height | number |
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 |
| linkService | PDFLinkService |
document navigation service (replaces the default one that emits internal-link-clicked) |
|
| page | number number[] |
1 to the last page number |
page number(s) to display (displaying all pages if not specified) |
| rotation | number |
0, 90, 180, 270 (multiples of 90) |
desired page rotation angle in degrees |
| scale | number |
rational numbers | desired page viewport scale |
| source | string object PDFDocumentProxy |
document URL or Base64 or typed array or document proxy | source of the document to display |
| textLayer | boolean |
whether the text layer should be enabled | |
| width | number |
natural numbers | desired page width in pixels |
| Name | Value | Description |
|---|---|---|
| internal-link-clicked | destination page number | an internal link was clicked |
| loaded | PDF document proxy | finished loading the document |
| loading-failed | error object | failed to load the document |
| password-requested | object with callback function and isWrongPassword flag |
a password is required to display the document |
| progress | object with number of loaded pages along with total number of pages |
tracks the document's loading progress |
| rendered | – | finished rendering the document |
| rendering-failed | error object | failed to render the document |
| 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 |
| Name | Arguments | Description |
|---|---|---|
| download | filename (string) |
download the document |
print resolution (number), filename (string), all pages flag (boolean) |
print the document via the browser interface |
Note: Public methods can be accessed through a template ref.
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.
By default, the PDF.js web worker is bundled as a blob URL. This works out of the box, but it may be blocked by certain CSP (content security policy) configurations. In such cases, use the essential build and configure the worker manually:
import VuePdfEmbed, {
GlobalWorkerOptions,
} from 'vue-pdf-embed/dist/index.essential.mjs'
// Option 1: use a bundler URL import
import PdfWorker from 'pdfjs-dist/build/pdf.worker.min.mjs?url'
GlobalWorkerOptions.workerSrc = PdfWorker
// Option 2: serve the worker from your public directory,
// copied from pdfjs-dist/build/pdf.worker.min.mjs
GlobalWorkerOptions.workerSrc = '/pdf.worker.min.mjs'Typically, document loading is internally handled within the component. However, for optimization purposes, the document can be loaded with the useVuePdfEmbed composable and then passed to the component via the source prop (e.g., when sharing the source between multiple instances of the component).
<script setup>
import VuePdfEmbed, { useVuePdfEmbed } from 'vue-pdf-embed'
const { doc } = useVuePdfEmbed({ source: '<PDF_URL>' })
</script>
<template>
<VuePdfEmbed :source="doc" />
</template>The path to predefined CMaps should be provided to ensure correct rendering of documents with non-Latin characters and to avoid CMap-related errors:
<VuePdfEmbed
:source="{
cMapUrl: 'https://unpkg.com/pdfjs-dist/cmaps/',
url: '<PDF_URL>',
}"
/>The image resource path must be specified for annotations to display correctly:
<VuePdfEmbed
image-resources-path="https://unpkg.com/pdfjs-dist/web/images/"
source="<PDF_URL>"
/>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.
Advanced Usage Demo (JSFiddle)
MIT License. Please see LICENSE file for more information.