vue-pdf展示pdf文件（不翻页）

大家好！今天给大家分享的知识是vue中使用vue-pdf展示pdf文件

一、前言

最近在开发过程当中遇到一个问题，就是需要将pdf文件在新窗口打开并且不分页，在一个页面上下滚动显示pdf文件的所有内容。于是我查了很多资料以及官网，最终实现了效果，效果图如下：

二、实现代码

代码如下：

<template>
  <div>
        <pdf
          v-for="i in numPages"
          :key="i"
          :page="i"
          :src="pdfUrl"
          style="width: 100%;"
          @num-pages="pageCount=$event">
        </pdf>
  </div>
</template>

<script>

import pdf from 'vue-pdf'

export default {
  name:'PDF',
  components:{ pdf },
  data() {
    return {
      pageCount:0, //当前页
      pdfUrl:'',
      src: '', // pdf文件地址
      numPages:0, //总页数
      }
  },
  mounted () {
    this.loadPdfHandler();
  },
  methods: {
    async loadPdfHandler () {
      this.pdfUrl = pdf.createLoadingTask(this.src);
      this.pdfUrl.promise.then(pdf => {
        this.numPages = pdf.numPages
      })
    },
  }
}
</script>

---

总结

以上就是我用vue-pdf展示pdf文件并且不分页的思路，使用vue-pdf展示还是很方便的，觉得有用的记得点个赞，谢谢观看！