安装:
npm i vue-pdf --save
在使用该vue-pdf插件的文件中导入
import PDF from 'vue-pdf'
// 注册组件
export default {
components:{
PDF
},
data(){
return {
numPages:undefined
}
},
mounted(){
// 获取pdf文件的页数
PDF.createLoadingTask("http://file.gp58.com/file/2018-11-14/111405.pdf").promise.then((pdf) =>{
this.numPages= pdf.numPages;
})
}
}
在template模板中使用组件
// 只能显示一页
<PDF src="http://file.gp58.com/file/2018-11-14/111405.pdf"></PDF>
// 显示所有页数
<div v-for="index in numPages" :key="index">
<PDF @page="index" src="http://file.gp58.com/file/2018-11-14/111405.pdf"></PDF>
</div>
在使用该组件遇到了一个坑,报了一个错
无法解析vuePdfNoSss.vue的文件
原因:自己项目的配置文件里面设置了只解析src文件夹里的vue文件
解决办法:
在配置文件里配置vue后缀名文件中添加包括解析node_modules文件夹的vue文件
例如: