vue项目中使用vue-pdf遇到的坑

vue.js pdf viewer

安装:

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文件
例如:
在这里插入图片描述

你可能感兴趣的:(vue,js,javascript)