vue-pdf-component v1.0.3
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 thenumPages
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>