vue-pdf

vue-pdf

vue.js pdf viewer

Install

npm install --save vue-pdf

Example

<template>
  <pdf src="./static/relativity.pdf" style="width:50%"></pdf>
</template>

<script>
import pdf from 'vue-pdf'

export default {
  components: {
    pdf
  }
}

Demo

vue-pdf demo on jsfiddle

API

props

:src ^{String / Object - default: ''}

The url of the pdf file. 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.

:password ^{Function(updatePassword, reason) - default: null}

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

events

@progress ^Number

Document loading progress. Range [0, 1].

@loaded

Triggered when the document is loaded.

@pageLoaded ^Number

Triggered when a page is loaded.

@numPages ^Number

The total number of pages of the pdf.

@error ^Object

Triggered when an error occurred.

Public methods

print() EXPERIMENTAL

Prints the current page.

example

<template>
	<button @click="print">print</button>
	<pdf ref="myPdfComponent" src="https://cdn.mozilla.net/pdfjs/tracemonkey.pdf"></pdf>
</template>

<script>
	...
	methods: {
		print() {
			
			this.$refs.myPdfComponent.print();
		}
	}
	...
</script>

To do

• Simplified non-webpack integration
• Added more advanced examples
• Add @progress event
• Add :rotate prop
• Handle PDF.js errors
• Give access to the text content of the page
• Make <resize-sensor> optional (implies adding a :scale prop)
• Handle resize-sensor event throttle
• Print the current page
• Print the whold document
• Buy more coffee

Credits

Franck Freiburger