vue-pdf
vue.js pdf viewer
Install
npm install --save vue-pdf
Example - basic
<template>
<pdf src="./static/relativity.pdf"></pdf>
</template>
<script>
import pdf from 'vue-pdf'
export default {
components: {
pdf
}
}
Demo
Browser support
Same browser support as Vue.js 2
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.
@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(dpi, pageList) * experimental *
dpi
: the print rezolution of the document (try 100).pageList
: the list (array) of pages to print.
example
<template>
<button @click="$refs.myPdfComponent.print()">print</button>
<pdf ref="myPdfComponent" src="https://cdn.mozilla.net/pdfjs/tracemonkey.pdf"></pdf>
</template>
example with 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>
Example - complete
<template>
<div>
<input type="checkbox" v-model="show">
<select v-model="src" style="width: 30em">
<option v-for="item in pdfList" :value="item" v-text="item"></option>
</select>
<input v-model.number="page" type="number" style="width: 5em"> /{{numPages}}
<button @click="rotate += 90">⟳</button>
<button @click="rotate -= 90">⟲</button>
<button @click="$refs.pdf.print()">print</button>
<div style="width: 50%">
<div v-if="loadedRatio > 0 && loadedRatio < 1" style="background-color: green; color: white; text-align: center" :style="{ width: loadedRatio * 100 + '%' }">{{ Math.floor(loadedRatio * 100) }}%</div>
<pdf v-if="show" ref="pdf" style="border: 1px solid red" :src="src" :page="page" :rotate="rotate" @password="password" @progress="loadedRatio = $event" @error="error" @numPages="numPages = $event"></pdf>
</div>
</div>
</template>
<script>
import pdf from 'vue-pdf'
export default {
components: {
pdf: pdf
},
data () {
return {
show: true,
pdfList: [
'',
'https://cdn.mozilla.net/pdfjs/tracemonkey.pdf',
'https://cdn.rawgit.com/mozilla/pdf.js/c6e8ca86/test/pdfs/freeculture.pdf',
'https://cdn.rawgit.com/mozilla/pdf.js/c6e8ca86/test/pdfs/annotation-link-text-popup.pdf',
'https://cdn.rawgit.com/mozilla/pdf.js/c6e8ca86/test/pdfs/calrgb.pdf',
'https://cdn.rawgit.com/sayanee/angularjs-pdf/68066e85/example/pdf/relativity.protected.pdf',
'data:application/pdf;base64,JVBERi0xLjUKJbXtrvsKMyAwIG9iago8PCAvTGVuZ3RoIDQgMCBSCiAgIC9GaWx0ZXIgL0ZsYXRlRGVjb2RlCj4+CnN0cmVhbQp4nE2NuwoCQQxF+/mK+wMbk5lkHl+wIFislmIhPhYEi10Lf9/MVgZCAufmZAkMppJ6+ZLUuFWsM3ZXxvzpFNaMYjEriqpCtbZSBOsDzw0zjqPHZYtTrEmz4eto7/0K54t7GfegOGCBbBdDH3+y2zsMsVERc9SoRkXORqKGJupS6/9OmMIUfgypJL4KZW5kc3RyZWFtCmVuZG9iago0IDAgb2JqCiAgIDEzOAplbmRvYmoKMiAwIG9iago8PAogICAvRXh0R1N0YXRlIDw8CiAgICAgIC9hMCA8PCAvQ0EgMC42MTE5ODcgL2NhIDAuNjExOTg3ID4+CiAgICAgIC9hMSA8PCAvQ0EgMSAvY2EgMSA+PgogICA+Pgo+PgplbmRvYmoKNSAwIG9iago8PCAvVHlwZSAvUGFnZQogICAvUGFyZW50IDEgMCBSCiAgIC9NZWRpYUJveCBbIDAgMCA1OTUuMjc1NTc0IDg0MS44ODk3NzEgXQogICAvQ29udGVudHMgMyAwIFIKICAgL0dyb3VwIDw8CiAgICAgIC9UeXBlIC9Hcm91cAogICAgICAvUyAvVHJhbnNwYXJlbmN5CiAgICAgIC9DUyAvRGV2aWNlUkdCCiAgID4+CiAgIC9SZXNvdXJjZXMgMiAwIFIKPj4KZW5kb2JqCjEgMCBvYmoKPDwgL1R5cGUgL1BhZ2VzCiAgIC9LaWRzIFsgNSAwIFIgXQogICAvQ291bnQgMQo+PgplbmRvYmoKNiAwIG9iago8PCAvQ3JlYXRvciAoY2Fpcm8gMS4xMS4yIChodHRwOi8vY2Fpcm9ncmFwaGljcy5vcmcpKQogICAvUHJvZHVjZXIgKGNhaXJvIDEuMTEuMiAoaHR0cDovL2NhaXJvZ3JhcGhpY3Mub3JnKSkKPj4KZW5kb2JqCjcgMCBvYmoKPDwgL1R5cGUgL0NhdGFsb2cKICAgL1BhZ2VzIDEgMCBSCj4+CmVuZG9iagp4cmVmCjAgOAowMDAwMDAwMDAwIDY1NTM1IGYgCjAwMDAwMDA1ODAgMDAwMDAgbiAKMDAwMDAwMDI1MiAwMDAwMCBuIAowMDAwMDAwMDE1IDAwMDAwIG4gCjAwMDAwMDAyMzAgMDAwMDAgbiAKMDAwMDAwMDM2NiAwMDAwMCBuIAowMDAwMDAwNjQ1IDAwMDAwIG4gCjAwMDAwMDA3NzIgMDAwMDAgbiAKdHJhaWxlcgo8PCAvU2l6ZSA4CiAgIC9Sb290IDcgMCBSCiAgIC9JbmZvIDYgMCBSCj4+CnN0YXJ0eHJlZgo4MjQKJSVFT0YK',
],
src:'',
loadedRatio: 0,
page: 1,
numPages: 0,
rotate: 0,
}
},
methods: {
password: function(updatePassword, reason) {
updatePassword(prompt('password is "test"'));
},
error: function(err) {
console.log(err);
}
}
}
</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 whole document
- Buy more coffee