vue在线浏览pdf,计算pdf页码总数,vue-pdf

最新推荐文章于 2026-01-27 13:22:46 发布

原创最新推荐文章于 2026-01-27 13:22:46 发布 · 1.3k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #html

vue 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了如何在Vue项目中使用vue-pdf组件实现PDF文件的在线浏览，并详细展示了如何计算PDF的总页码数。通过npm安装vue-pdf库，然后在组件中引入并设置src属性以加载PDF文件。在methods中定义了一个方法获取PDF的总页数，通过pdf.createLoadingTask加载PDF并获取其numPages属性。这是一个关于前端开发，特别是Vue.js和PDF处理的实践教程。

vue在线浏览pdf,计算pdf页码总数,vue-pdf

安装
使用

安装

npm install --save vue-pdf

使用

组件中加入

	<div>
      <pdf 
        ref="pdf"
        :src="url"
        :page="1"
      ><!--page当前显示页数-->
      </pdf>
    </div>

script

import pdf from 'vue-pdf'
export default {
  components: {
    pdf,
  },
  data() {
    return {
      url: 'https://intelligent.aliyuncs.com/图解HTTP+彩色版.pdf',
      numPages: 1
    }
  },
  methods: {
    # 计算pdf页码总数
    getNumPages() {
      let loadingTask = pdf.createLoadingTask(this.url)
      loadingTask.promise.then(pdf => {
        this.numPages= pdf.numPages
      }).catch(err => {
        console.error('pdf 加载失败', err);
      })
    },
  }
}