vue-pdf

最新推荐文章于 2025-06-20 09:18:40 发布

翻译最新推荐文章于 2025-06-20 09:18:40 发布 · 6k 阅读

17 ·

CC 4.0 BY-SA版权

原文链接：https://www.jianshu.com/p/a640ce9d4882

文章标签：

#vue.js #前端

vue 专栏收录该内容

9 篇文章

订阅专栏

１．前言

PDF文件在线预览的功能相信大家都是有遇到过的, 但在我平时的项目中, 公司提供了相应的插件, 但是在h5等其他项目中, 我们还是只能靠自己呀! 今天就大概说一下 vue-pdf 这个组件, 大部分的需求还是可以满足的

２．安装

   npm install --save vue-pdf

3. pdf 页面显示

3.１code

<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>