vue页面怎么显示本地的pdf文件
一 ,npm install --save vue-pdf 下载插件包二 , 新建一个.vue页面 , 把下面代码全部复制过去 , 打开vue页面就是pdf了<template><div class="pdf"><pdf v-for="currentPage in pageCount" :key="currentPage" :src="src" :page="curr
·
一 , npm install --save vue-pdf 下载插件包
二 , 新建一个.vue页面 , 把下面代码全部复制过去 , 打开vue页面就是pdf了
<template>
<div class="pdf">
<pdf v-for="currentPage in pageCount" :key="currentPage" :src="src" :page="currentPage" @loaded="loadPdfHandler">
</pdf>
</div>
</template>
<script>
import pdf from 'vue-pdf';
export default {
components: {
pdf
},
data() {
return {
currentPage: 1, // pdf文件页码
pageCount: 15, // pdf文件总页数
src: 'static/project.pdf' // pdf文件地址
};
},
created() {
this.src = pdf.createLoadingTask(this.src);
},
method: {
loadPdfHandler(e) {
this.currentPage = 1; // 加载的时候先加载第一页
}
}
};
</script>
<style lang="scss" scoped>
.pdf {
width: 100%;
height: 100%;
}
</style>
更多推荐
已为社区贡献13条内容
所有评论(0)