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

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

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

这时候我们可以通过滑动预览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 展示

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

6. 更多内容

npm vue-pdf

本网站是一个以CSS、JavaScript、Vue、HTML为核心的前端开发技术网站。我们致力于为广大前端开发者提供专业、全面、实用的前端开发知识和技术支持。 在本网站中，您可以学习到最新的前端开发技术，了解前端开发的最新趋势和最佳实践。我们提供丰富的教程和案例，让您可以快速掌握前端开发的核心技术和流程。 本网站还提供一系列实用的工具和插件，帮助您更加高效地进行前端开发工作。我们提供的工具和插件都经过精心设计和优化，可以帮助您节省时间和精力，提升开发效率。 除此之外，本网站还拥有一个活跃的社区，您可以在社区中与其他前端开发者交流技术、分享经验、解决问题。我们相信，社区的力量可以帮助您更好地成长和进步。 在本网站中，您可以找到您需要的一切前端开发资源，让您成为一名更加优秀的前端开发者。欢迎您加入我们的大家庭，一起探索前端开发的无限可能!