Vue使用vue-pdf进行PDF预览

最新推荐文章于 2024-07-29 15:31:57 发布

聆听HJ

最新推荐文章于 2024-07-29 15:31:57 发布

阅读量1.3k

点赞数

分类专栏： vue 文章标签： vue.js 前端

本文链接：https://blog.csdn.net/weixin_41542329/article/details/123872096

版权

vue 专栏收录该内容

39 篇文章 4 订阅

订阅专栏

<template>
  <!--安装依赖：npm install --save vue-pdf-->
  <div class='pdf'>
    <el-tabs @tab-click="handleClick" type="border-card">
      <el-tab-pane label="全部加载" v-loading="loading" element-loading-text="加载中">
        <Pdf
          ref="pdf"
          v-for="i in pdfTotal"
          :key="i"
          :src="pdfSrc"
          :page="i"
          @page-loaded="handlePdfLoaded"
        ></Pdf>
      </el-tab-pane>
      <el-tab-pane label="单页加载">
        <div class="single">
          <div class="bar">
            <el-tooltip class="item" effect="dark" content="上一页" placement="top">
              <i @click="handleLastPage" class="el-icon-back" :class="{disable: pdfNum===1}"></i>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="逆时针" placement="top">
              <i @click="handleReverseRotate" class="el-icon-refresh-left"></i>
            </el-tooltip>
            <span>{{pdfNum}}/{{pdfTotal}}</span>
            <el-tooltip class="item" effect="dark" content="顺时针" placement="top">
              <i @click="handleAlongRotate" class="el-icon-refresh-right"></i>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="下一页" placement="top">
              <i @click="handleNextPage" class="el-icon-right" :class="{disable: pdfNum===pdfTotal}"></i>
            </el-tooltip>
          </div>
          <Pdf
            :src="pdfSrc"
            :page="pdfNum"
            :rotate="pdfRotate"
            @num-pages="pdfTotal=$event"
            @page-loaded="pdfNum=$event"
          ></Pdf>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
 
<script>
import Pdf from 'vue-pdf'
export default {
  name: 'pdf',
  data () {
    return {
      loading: true,
      pdfSrc: '',
      pdfTotal: 1, // pdf总页数
      pdfNum: 1, // 当前页
      pdfRotate: 0 // 旋转角度
    }
  },
  created () {
    this.loading = true
    // 创建PDF加载任务
    let task = Pdf.createLoadingTask('/static/1.pdf')
    this.pdfSrc = task
    this.handlePdfTask(task)
  },
  methods: {
    // 上一页
    handleLastPage () {
      if (this.pdfNum > 1) {
        this.pdfNum--
      }
    },
    // 下一页
    handleNextPage () {
      if (this.pdfNum < this.pdfTotal) {
        this.pdfNum++
      }
    },
    // 顺时针旋转
    handleAlongRotate () {
      this.pdfRotate += 90
    },
    // 逆时针旋转
    handleReverseRotate () {
      this.pdfRotate -= 90
    },
    // 加载
    handlePdfLoaded (e) {
      if (e === this.pdfTotal) {
        this.$nextTick(() => {
          setTimeout(() => {
            this.loading = false
          }, 500)
        })
      }
    },
    handlePdfTask (task) {
      task.promise.then(Pdf => {
        this.pdfTotal = Pdf.numPages
      }).catch(err => {
        console.error('pdf 加载失败', err)
      })
    },
    handleClick (tab) {
      if (tab.label === '单页加载') {
        this.pdfNum = 1
      }
    }
  },
  components: { Pdf }
}
</script>
 
<style lang="less" scoped>
  .pdf {
    .single {
      width: 100%;
      .bar {
        position: fixed;
        left: 0;
        bottom: 3px;
        display: flex;
        align-items: center;
        justify-content: space-around;
        width: 100%;
        font-size: 24px;
        color: cornflowerblue;
        z-index: 1;
        > i {
          cursor: pointer;
        }
        > .disable {
          cursor: not-allowed;
          color: gray;
        }
      }
    }
  }
</style>

效果图：