1.0.3 • Published 4 years ago

vue-pdf-component v1.0.3

Weekly downloads
1
License
MIT
Repository
github
Last release
4 years ago

vue-pdf-component

vue pdf viewer

Install

npm install --save vue-pdf-component

Example - basic

<template>
  <pdf src="test.pdf"></pdf>
</template>

<script>
import pdf from 'vue-pdf-componnent'

export default {
  components: {
    pdf
  }
}

Demo

vue-pdf-component demo on jsfiddle

TBD: fix the demo

Browser support

Same browser support as Vue.js 2

Note

since v2.x, the script is exported as esm.

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.

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

Triggered when the document is loaded.

@page-loaded Number

Triggered when a page is loaded.

@num-pages Number

The total number of pages of the pdf.

@error Object

Triggered when an error occurred.

@link-clicked Number

Triggered when an internal link is clicked

Public methods

print(dpi, pageList) experimental

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

Public static methods

createLoadingTask(src)

  • src: see :src prop
    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.

Examples

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

<script>

import pdf from 'vue-pdf-component'

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

</script>
Example - display multiple pages of the same pdf document
<template>
	<div>
		<pdf
			v-for="i in numPages"
			:key="i"
			:src="src"
			:page="i"
			style="display: inline-block; width: 25%"
		></pdf>
	</div>
</template>

<script>

import pdf from 'vue-pdf-component'

var loadingTask = pdf.createLoadingTask('https://cdn.mozilla.net/pdfjs/tracemonkey.pdf');

export default {
	components: {
		pdf
	},
	data() {
		return {
			src: loadingTask,
			numPages: undefined,
		}
	},
	mounted() {

		this.src.then(pdf => {

			this.numPages = pdf.numPages;
		});
	}
}

</script>
Example - print all pages
<template>
	<button @click="$refs.myPdfComponent.print()">print</button>
	<pdf ref="myPdfComponent" src="https://cdn.mozilla.net/pdfjs/tracemonkey.pdf"></pdf>
</template>
Example - print multiple pages
<template>
	<button @click="$refs.myPdfComponent.print(100, [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14])">print</button>
	<pdf ref="myPdfComponent" src="https://cdn.mozilla.net/pdfjs/tracemonkey.pdf"></pdf>
</template>