封装vue-pdf组件，实现批量预览pdf

效果图

 

 

 

 单pdf显示代码和多个pdf上下个文件切换代码

<template>
  <div class="pdf-wrapper">
    <!-- PDF展示部分 -->
    <div class="pdf-content">
      <div class="pdf-contain">
        <pdf
          :key="pdfUrl"
          :page="pageNum"
          :src="pdfUrl"
          class="pdf-show"
          @error="pdfError($event)"
          @loaded="loaded"
          @progress="loadedRatio = Number((($event||0)*100).toFixed(0))"
          @page-loaded="pageLoaded($event)"
          @num-pages="pageTotalNum = $event"
          @link-clicked="clickPage = $event"
        />
      </div>
      <span v-if="loadedRatio<100" class="loadingi"
            style="color: #fff;display: flex;flex-direction: column;align-items: center"
      >
            <el-progress v-if="processShow" :percentage="loadedRatio" :width="40" status="success" style="margin: 4px 0"
                         type="circle"
            ></el-progress>

        <!--        <i class="el-icon-loading"></i>-->
        文件正在加载中...
      </span>

      <div v-if="curPageNum&&pageTotalNum" class="numBox">
        <span style="color:#000;">{{ curPageNum }}</span>
        /
        <span style="color: #7B7B7B">{{ pageTotalNum }}</span>

      </div>
    </div>
    <!-- 按钮部分 -->
    <div class="tools">
      <el-button
        size="mini"
        @click="prePage"
      >
        上一页
      </el-button>
      <!-- 页码 -->
      <el-input v-model.number="jumpPage" placeholder="输入页码" size="mini" style="width: 150px;">
        <el-button slot="append" @click="jumpPageHandler">跳转</el-button>

      </el-input>
      <el-button
        size="mini"
        @click="nextPage"
      >
        下一页
      </el-button>
    </div>
  </div>
</template>

<script>
import pdf from 'vue-pdf'

export default {
  name: 'PDF',
  components: { pdf },
  props: {
    url: {
      type: String,
      required: true
    }
  },
  watch: {
    url: {
      handler(val) {
        if (val) {
          console.log(val, 89898)
          this.pdfUrl = val

        }
      },
      immediate: true
    }
  },
  created() {
    console.log(this.pdfUrl, 8989)
  },
  data() {
    return {
      //总页数
      pageTotalNum: 1,
      //当前pdf文件
      pdfUrl: '',
      //当前展示pdf的第几页
      pageNum: 1,
      // 加载进度
      loadedRatio: 0,
      processShow: true,
      //当前展示页数
      curPageNum: 0,
      numPages: 0,
      //当前点击的页码
      clickPage: '',
      //想要跳转的页码
      jumpPage: ''
    }
  },
  mounted() {
    // this.getNumPages()
  },
  methods: {
    getpdf() {
      this.$http
        .get('/pdfs/文件名.pdf', { baseURL: '' })
        .then((res) => {
          console.log(res, 'reeeeee')
          this.pdfUrl = res.data
        })
    },
    // 计算pdf页码总数
    getNumPages(url) {
      const loadingTask = pdf.createLoadingTask(url)
      loadingTask
        .then((pdf) => {
          this.pdfUrl = loadingTask
          this.pageTotalNum = pdf.numPages
          console.log(this.pageTotalNum, 'pageTotalNum')
        })
    },
    loaded() {
      console.log('加载完成')
      // this.$message({
      //   message: '文件加载完成！',
      //   type: 'success'
      // });
      setTimeout(() => {
        this.processShow = false

      }, 1000)
    },
    jumpPageHandler() {
      console.log('topage' + this.jumpPage)
      if (this.jumpPage > 0 && this.jumpPage < this.pageTotalNum) {
        this.pageNum = this.jumpPage
      } else {
        this.$message({
          message: '请输入正确范围的页数！',
          type: 'warning'
        })
      }
      this.jumpPage = ''
    },
    // 上一页函数，
    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
    },
    // 页面加载回调函数，其中e为当前页数
    pageLoaded(e) {
      this.curPageNum = e
    },
    // 其他的一些回调函数。
    pdfError(error) {
      console.error(error)
    }
  }
}
</script>

<style lang="scss" scoped>
.pdf-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  position: relative;
}

.pdf-wrapper span {
  width: 100%;
}

.tools {
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  z-index: 999;
}

.pdf-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 98%;
  overflow-x: hidden;

  .numBox {
    margin: 10px 0;
    font-size: 16px;
  }

  .pdf-contain {
    width: 100%;
    overflow-x: hidden;
    border: 1px solid #eee;

    .pdf-show {
      width: 100%;
    }
  }
}

.pdf-button {
  width: 240px;
  height: 60px;
  font-size: 30px;
  border-radius: 20px;
}

.pdf-button:hover {
  cursor: pointer;
  transform: scale(1.2);
}

.page {
  font-size: 48px;
  color: #fff;
}

.loadingi {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>

<template>
  <div class="indexBox">
    <div class="toolBox">
      <el-button plain @click="prePage">上一文件</el-button>
      <div v-if="urlList.length>0" style="text-align: center">
        <div>
          <span style="color: #fff">{{ currentFile + 1 }}</span>/
          <span>{{ urlList.length }}</span>
        </div>
      </div>
      <el-button plain @click="nextPage">下一文件</el-button>
    </div>
    <div class="pdfViewBox">
      <pdfView v-if="urlList.length>0" :key="urlList[currentFile].pdfUrl" :url="urlList[currentFile].pdfUrl"/>
    </div>
  </div>
</template>

<script>
import pdfView from '@/components/pdfView'

export default {
  name: 'index',
  props: {
    urlList: {
      type: Array,
      required: true
    }
  },
  components: { pdfView },
  data() {
    return {
      currentFile: 0
    }
  },
  methods: {
    // 上一页函数，
    prePage() {
      let page = this.currentFile
      page = page > 0 ? page - 1 : this.urlList.length - 1
      this.currentFile = page
    },
    // 下一页函数
    nextPage() {
      let page = this.currentFile
      page = page > this.urlList.length - 2 ? 0 : page + 1
      this.currentFile = page
    }
  }
}
</script>

<style lang="scss" scoped>
.indexBox {
  background-color: #525659;

  .toolBox {
    padding: 10px 0;
    background-color: #323639;
    display: flex;
    justify-content: space-around;
    align-items: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
  }

  .pdfViewBox {
    margin: 0 auto;
    padding-top: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80%;
  }
}

</style>