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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值