@mispencer/vue-pdf-embed NPM

📄 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.

vue vuejs pdf

pdfjs-dist

@everything-registry/sub-chunk-608

2.0.0

2 years ago