vue-pdf

vue.js pdf viewer is a package for Vue that enables you to display and view PDF's easily via vue components. Based on PDFJS.dist.

Install via NPM

npm install @kinfo-dev/vue-pdf

Example - basic

<template>
  <vue-pdf src="./path/to/static/relativity.pdf"></vue-pdf>
</template>

<script>
import {VuePdf} from "@kinfo-dev/vue-pdf";

export default {
  components: {
    VuePdf
  }
}

Browser support

Same browser support as Vue.js 2

API

Props

:src String / Object - default: ''

The url of the given pdf. src may also be a string|TypedArray|DocumentInitParameters|PDFDataRangeTransport for more details, see PDFJS.getDocument().

:page Number - default: 1

The page number to display.

:rotate Number - default: 0

The page rotation in degrees, only multiple of 90 are valid. EG: 90, 180, 270, 360, ...

Events

@password (updatePassword, reason)

• updatePassword: The function to call with the pdf password.
• reason: the reason why this function is called 'NEED_PASSWORD' or 'INCORRECT_PASSWORD'

@progress Number

Document loading progress. Range [0, 1].

@loaded

Triggers when the document is loaded.

@page-loaded Number

Triggers when a page is loaded.

@num-pages Number

The sum of all pages from the given pdf.

@error Object

Triggers when an error occurs.

@link-clicked Number

Triggers when an internal link is clicked

Public methods

print(dpi, pageList) * experimental *

• dpi: the print resolution of the document (try 100).
• pageList: the list (array) of pages to print.

Public static methods

createLoadingTask(src[, options])

• src: see :src prop
• options: an object of options. This function creates a PDFJS loading task that can be used and reused as :src property.
  The loading task is a promise that resolves with the PDFJS pdf document that exposes the numPages property (see example below).

beware: when the component is destroyed, the object returned by createLoadingTask() become invalid.

Supported options:

• onPassword: Callback that's called when a password protected PDF is being opened.
• onProgress: Callback return loading progress.
• withCredentials: Wheter or not to send cookies in the fetch request.

Examples

Example - current page / page count

<template>
	<div>
		{{currentPage}} / {{pageCount}}
		<vue-pdf
			src="https://cdn.mozilla.net/pdfjs/tracemonkey.pdf"
			@num-pages="pageCount = $event"
			@page-loaded="currentPage = $event"
		></vue-pdf>
	</div>
</template>

<script>

import {VuePdf} from "@kinfo-dev/vue-pdf";

export default {
	components: {
      VuePdf
	},
	data() {
		return {
			currentPage: 0,
			pageCount: 0,
		}
	}
}

</script>