vue-pdf实现pdf文件在线预览

1. 前言

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

2. 安装

npm install --save vue-pdf

3. pdf 页面显示

3.1 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 文件的第一页

image

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

4.2 展示

image

这时候我们可以通过滑动预览pdf的内容, 但是这种方式是一下子把pdf的内容都加载出来, 页数一多, 浏览器直接卡在加载的状态, 体验感太差,所以我们可以考虑按页加载

5. pdf 按页预览

5.1 code

<template>
  <div>
    <el-button-group>
      <el-button type="primary" icon="el-icon-arrow-left" size="mini" @click="prePage">上一页</el-button>
      <el-button type="primary" size="mini" @click="nextPage">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button>
    </el-button-group>
    <div style="marginTop: 10px; color: #409EFF">{{ pageNum }} / {{ pageTotalNum }}</div>
    <pdf
      :page="pageNum"
      :src="url"
      @progress="loadedRatio = $event"
      @num-pages="pageTotalNum=$event" 
      ></pdf>
  </div>
</template>

<script>
import pdf from 'vue-pdf'

export default {
  name: 'Pdf',
  components: {
    pdf,
  },
  data() {
    return {
      url: 'http://image.cache.timepack.cn/nodejs.pdf',
      pageNum: 1,
      pageTotalNum: 1, # 总页数
      loadedRatio: 0, # 当前页面的加载进度，范围是0-1 ，等于1的时候代表当前页已经完全加载完成了
    }
  },
  methods: {
    // 上一页
    prePage() {
      let page = this.pageNum
      page = page > 1 ? page - 1 : this.pageTotalNum
      this.pageNum = page
    },

    // 下一页
    nextPage() {
      let page = this.pageNum
      page = page < this.pageTotalNum ? page + 1 : 1
      this.pageNum = page
    }
  }
}
</script>

5.2 展示

image

至此, 大概效果就如上所示

6. 更多内容

npm vue-pdf