vue-pdf只显示一页问题解决demo效果示例（整理）

使用vue-pdf展示静态PDF文件的时候（在线PDF可使用embed标签查看），常规操作之后发现只能加载第一页PDF，以下是解决方案：

vue-pdf使用过程如下：

$ yarn add vue-pdf
or
$ npm install vue-pdf


在组件中使用：
<template>
  <pdf src=""></pdf>
</template>
<script>
  import pdf from 'vue-pdf'
  exprot default {
    component: {
      pdf
    }
  }
</script>

这个时候，多页的PDF只会显示第一页，这时各位可以去查看一下vue-pdf的源码，我们可以发现，它的实现过程是将PDF按页绘制在canvas上的，其页码数oage默认值是1，展示第一页的canvas。所以我们主要使用两种方式处理。

第一种是使用v-for循环加载所有页面：
<template>
  <pdf src=""></pdf>
</template>
<script>
  import pdf from 'vue-pdf'
  exprot default {
    component: {
      pdf
    }
  }
</script>
这个时候，多页的PDF只会显示第一页，这时各位可以去查看一下vue-pdf的源码，我们可以发现，它的实现过程是将PDF按页绘制在canvas上的，其页码数oage默认值是1，展示第一页的canvas。所以我们主要使用两种方式处理。

第一种是使用v-for循环加载所有页面：

<template>
    <div>
        <pdf
            v-for="i in numPages"
            :key="i"
            :src="src"
            :page="i"
            style="display: inline-block; width: 25%"
        ></pdf>
    </div>
</template>
 
<script>
 
import pdf from 'vue-pdf'
 
var loadingTask = pdf.createLoadingTask('https://cdn.mozilla.net/pdfjs/tracemonkey.pdf');
 
export default {
    components: {
        pdf
    },
    data() {
        return {
            src: loadingTask,
            numPages: undefined,
        }
    },
    mounted() {
 
        this.src.promise.then(pdf => {
 
            this.numPages = pdf.numPages;
        });
    }
}
 
</script>
这样有一个问题就是如果页数非常多，加载会很慢。

第二张是采用分页的形式：
<template>
  <div class="onlineHelp cg-box">
    <div class="tools">
        <div class="page">第 {{pageNum}} /{{pageTotalNum}}页 </div>
        <el-input v-model.number="goPageNum" style="width: 70px;margin-right: 8px"></el-input>
        <el-button type="success" @click.stop="goPage"> 前往</el-button>
        <el-button type="primary" @click.stop="prePage"> 上一页</el-button>
        <el-button type="primary" @click.stop="nextPage"> 下一页</el-button>
      </div>
      <div class="pdf-box">
        <pdf ref="pdf"
          :src="url"
          :page="pageNum"
          @progress="loadedRatio = $event"
          @page-loaded="pageLoaded($event)"
          @num-pages="pageTotalNum=$event"
          @error="pdfError($event)"
          @link-clicked="page = $event">
        </pdf>
      </div>
  </div>
</template>
<script>
import pdf from 'vue-pdf'
export default {
  name: 'onlineHelp',
  components: {
    pdf
  },
  data() {
    return {
      url: `${process.env.VUE_APP_BASEURL}/help.pdf`,
      pageNum: 1,
      pageTotalNum: 1,
      // 加载进度
      loadedRatio: 0,
      curPageNum: 0,
      goPageNum: 1
    };
  },
  methods: {
    // 上一页函数，
    prePage() {
      var page = this.pageNum
      page = page > 1 ? page - 1 : this.pageTotalNum
      this.pageNum = page
    },
    // 下一页函数
    nextPage() {
      var page = this.pageNum
      page = page < this.pageTotalNum ? page + 1 : 1
      this.pageNum = page
    },
    // 前往页数
    goPage() {
      if(!this.goPageNum || /\D/.test(this.goPageNum) || this.goPageNum < 1 || this.goPageNum > this.pageTotalNum) {
        this.$message.warning('输入页码有误')
        return
      }
      this.pageNum = this.goPageNum
    },
    // 页面加载回调函数，其中e为当前页数
    pageLoaded(e) {
      this.curPageNum = e
    },
    // 其他的一些回调函数。
    pdfError(error) {
      console.error(error)
    }
  }
};
</script>

<style lang="scss">
.onlineHelp {
  height: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  .tools {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 999;
    .page {
      display: inline-block;
      margin-right: 10px;
    }
  }
  .pdf-box {
    height: 100%;
    overflow: auto;
    width: 90%;
  }
}
</style>


二、
<template>
    <div class="wrap">
        <pdf v-for="item in numPages" :key="item" :src="pdfSrc" :page="item"/>
    </div>
</template>
<script>
import pdf from 'vue-pdf'
import CMapReaderFactory from 'vue-pdf/src/CMapReaderFactory.js'
export default {
    components:{
        pdf
    },
    data(){
        return{
            pdfUrl: "http://192.168.0.223:8080/pdf/预报.pdf",
            pdfSrc: "",
            numPages: "",
        }
    },
    mounted(){
        this.getTitlePdfurl();
    },
    methods:{
        getTitlePdfurl(){
            this.pdfSrc = pdf.createLoadingTask({ url: this.pdfUrl, CMapReaderFactory });//解决中文乱码问题
            this.pdfSrc.promise.then((pdf) => {
                this.numPages = pdf.numPages;
            })
        },
    }
}
</script>
<style lang="less" scoped>
.wrap{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}
</style>
转载：https://blog.csdn.net/yyxy_gis/article/details/121200971
感谢分享

转载：https://zhuanlan.zhihu.com/p/369104083
感谢分享

感谢您的支持