vue.js pdf viewer
npm install @teckel/vue-pdfbash
npm install @teckel/vue-pdf
``bash
yarn add @teckel/vue-pdf
`Example - basic
`vue
`
##### Example - display multiple pages of the same pdf document
`vue
v-for="i in numPages"
:key="i"
:src="src"
:page="i"
style="display: inline-block; width: 25%"
>
import pdf from '@teckel/vue-pdf'
var loadingTask = pdf.createLoadingTask('https://cdn.mozilla.net/pdfjs/tracemonkey.pdf');
export default {
components: {
pdf
},
data() {
return {
src: loadingTask,
numPages: undefined,
}
},
mounted() {
this.src.promise.then(pdf => {
this.numPages = pdf.numPages;
});
}
}
`
##### Example - print all pages
`vue
`
##### Example - print multiple pages
`vue
`
##### Example - get text content
`vue
@click="logContent"
>
log content
ref="myPdfComponent"
src="https://cdn.mozilla.net/pdfjs/tracemonkey.pdf"
>
import pdf from '@teckel/vue-pdf'
export default {
components: {
pdf
},
methods: {
logContent() {
this.$refs.myPdfComponent.pdf.forEachPage(function(page) {
return page.getTextContent()
.then(function(content) {
var text = content.items.map(item => item.str);
console.log(text);
})
});
}
}
}
`
##### Example - complete
`vue
/{{numPages}}
{{ Math.floor(loadedRatio 100) }}%
``