VUE实现PDF在线阅读

使用Vue.js显示PDF文件

最新推荐文章于 2025-08-25 14:24:10 发布

原创最新推荐文章于 2025-08-25 14:24:10 发布 · 635 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #vue.js

Element + VUE 专栏收录该内容

29 篇文章

订阅专栏

本文档展示了如何在Vue.js应用中安装和使用`vue-pdf`库来展示PDF文件。首先通过npm安装依赖，然后在HTML部分创建一个条件渲染的div，内含`pdf`组件，并设置其属性以绑定PDF源、当前页数和总页数。接着在JS部分，定义了数据结构和方法，包括获取PDF文件、改变页面和加载PDF时的处理。最后，提供了上一页和下一页的按钮以及页面信息的显示。

1、安装npm

npm install --save vue-pdf

2、HTML部分

<div v-if="dataForm.pdfUrl !== '' & dataForm.pdfUrl !== null & dataForm.pdfUrl !== undefined">
    <div class="pdf">
        <pdf :src="pdfOption.src"
        :page="pdfOption.currentPage"
        @num-pages="pdfOption.pageCount=$event"
        @page-loaded="pdfOption.currentPage=$event"
        @loaded="loadPdfHandler">
        </pdf>
    </div>
    <div class="text-center">
        <el-button @click="changePdfPage(0)" size="small" :disabled="pdfOption.currentPage == 1">上一页</el-button>
        <el-button @click="dialogVisible = false" size="small" disabled>单前第{{pdfOption.currentPage}}页，共{{pdfOption.pageCount}}页</el-button>
        <el-button @click="changePdfPage(1)" size="small" :disabled="pdfOption.currentPage==pdfOption.pageCount">下一页</el-button>
    </div>
</div>

3、JS部分

<script>
import pdf from 'vue-pdf'
export default {
    data () {
        return {
          // pdf 数据
          pdfOption: {
            currentPage: 0,
            pageCount: 0,
            fileType: 'pdf',
            src: ''
          }
        }
    },
    methods: {
        // 获取文章详细
        getInfo () {
          this.$http.get(`/zs/zscms/getArticleDetailByArticleId?id=${this.dataForm.id}`).then(({ data: res }) => {
            this.dataForm = {
              ...this.dataForm,
              ...res
            }
            this.pdfOption.src = res.pdfUrl
          }).catch(() => {})
        },
        // 改变PDF页码,val传过来区分上一页下一页的值,0上一页,1下一页
        changePdfPage (val) {
          if (val === 0 && this.pdfOption.currentPage > 1) {
            this.pdfOption.currentPage--
          }
          if (val === 1 && this.pdfOption.currentPage < this.pdfOption.pageCount) {
            this.pdfOption.currentPage++
          }
        },
        // pdf加载时
        loadPdfHandler (e) {
          this.pdfOption.currentPage = 1
        }
    },
    created () {
      if (this.$route.query.id === undefined) {
        this.$router.push({ path: '/index' })
      } else {
        this.dataForm.id = this.$route.query.id
        this.getInfo()
      }
      document.title = '文章详细'
  },
  components: {
     pdf
  }
}
</script>