这个是实现多页pdf查看的,
<template>
<div class="page-news" v-wechat-title="w_title">
<div class="pdf-tab">
<pdf
v-for="i in numPages"
:key="i"
:src="pdfUrl"
:page="i">
</pdf>
</div>
</div>
</template>
<script>
import pdf from 'vue-pdf';
export default {
name: '',
components: {
pdf
},
data () {
return {
w_title: '规程',
pdfUrl: '',
numPages: 1
};
},
methods: {
pdfTask (pdfUrl) {
var self = this;
var loadingTask = pdf.createLoadingTask(pdfUrl);
loadingTask.promise.then(pdf => {
self.pdfUrl = loadingTask;
self.numPages = pdf.numPages;
});
}
},
mounted () {
this.pdfTask('pdf的路径');
}
};
</script>