vue-pdf
1.前言PDF文件在线预览的功能相信大家都是有遇到过的, 但在我平时的项目中, 公司提供了相应的插件, 但是在h5等其他项目中, 我们还是只能靠自己呀! 今天就大概说一下 vue-pdf 这个组件, 大部分的需求还是可以满足的2.安装npm install --save vue-pdf3. pdf 页面显示3.1code<template><div><pdfref="
·
1.前言
PDF文件在线预览的功能相信大家都是有遇到过的, 但在我平时的项目中, 公司提供了相应的插件, 但是在h5等其他项目中, 我们还是只能靠自己呀! 今天就大概说一下 vue-pdf 这个组件, 大部分的需求还是可以满足的
2.安装
npm install --save vue-pdf
3. pdf 页面显示
3.1code
<template>
<div>
<pdf
ref="pdf"
:src="url"
>
</pdf>
</div>
</template>
<script>
import pdf from 'vue-pdf'
export default {
components:{
pdf
},
data(){
return {
url:"http://image.cache.timepack.cn/nodejs.pdf",
}
}
</script>
3.2 展示
这个时候, pdf文件已经显示在页面上了, 但是我们可以发现, 这仅仅显示了pdf 文件的第一页
pdf 显示多页
4.1 code
<template>
<div>
<pdf
ref="pdf"
v-for="i in numPages"
:key="i"
:src="url"
:page="i"
></pdf>
</div>
</template>
<script>
import pdf from 'vue-pdf'
export default {
components:{
pdf
},
data(){
return {
url:"http://image.cache.timepack.cn/nodejs.pdf",
numPages: null, // pdf 总页数
}
},
mounted() {
this.getNumPages()
},
methods: {
# 计算pdf页码总数
getNumPages() {
let loadingTask = pdf.createLoadingTask(this.url)
loadingTask.promise.then(pdf => {
this.numPages = pdf.numPages
}).catch(err => {
console.error('pdf 加载失败', err);
})
},
}
</script>
更多推荐
已为社区贡献3条内容
所有评论(0)