第三篇: 使用 vue-pdf 实现前端预览 PDF文件
第三篇: 使用 vue-pdf 实现前端预览 PDF文件主要知识点:npm 安装 vue-pdf;本地pdf文件路径地址;vue-pdf的createLoadingTask()方法大致效果如下:1.npm 安装 vue-pdfnpm install vue-pdf --save2.本地pdf文件路径地址。在工程中加入自己测试需要的 pdf 文件,路径最好放在 public目录下,如下:3.vue-
·
第三篇: 使用 vue-pdf 实现前端预览 PDF文件
主要知识点:npm 安装 vue-pdf; 本地pdf文件路径地址;vue-pdf的createLoadingTask()方法
大致效果如下:
1.npm 安装 vue-pdf
npm install vue-pdf --save
2.本地pdf文件路径地址。在工程中加入自己测试需要的 pdf 文件,路径最好放在 public目录下,如下:
3.vue-pdf的createLoadingTask()方法。为了防止在开发中出现跨越而读取不到文件,采用createLoadingTask()方法,可获得 文件页码 等信息。
<template>
<div class="panel-content">
<el-dialog
title="预览"
:visible.sync="viewVisible"
width="50%"
height="100%"
center
>
<div class="pdf">
<pdf
v-for="currentPage in numPages"
:key="currentPage"
:src="pdfsrc"
:page="currentPage"
@loaded="loadPdfHandler"
></pdf>
</div>
</el-dialog>
</div>
</template>
<script>
import pdf from 'vue-pdf'
export default {
name: 'TEMPLATE',
data() {
return {
viewVisible: true,
pdfsrc: '/pdf/element实战.pdf',
numPages: 1,
currentPage: 1, // pdf文件页码
pageCount: 1 // pdf文件总页数
}
},
components: {
pdf
},
mounted() {
},
created() {
// createLoadingTask() 处理文件等跨越问题
this.pdfsrc = pdf.createLoadingTask({ url: this.pdfsrc })
this.loadPdfHandler()
},
methods: {
loadPdfHandler() {
this.pdfsrc.promise.then(pdf => {
// 获取pdf文件相关信息,页码等
this.numPages = pdf.numPages
})
this.currentPage = 1 // 加载的时候先加载第一页
// 强制刷新
this.$forceUpdate()
}
}
}
</script>
<style scoped></style>
4.这就是简短的 pdf 预览的 Demo,谢谢大家的支持。
更多推荐
已为社区贡献1条内容
所有评论(0)