Powered by md-Blog  文 - 篇  访客 -

Vue使用vue-pdf.js进行PDF分页、滚动预览放大缩小缩放及文件提取码下载加密下载的方法


  分类:Vue  / 
更新:2021-07-13 19:16:16  /  创建:2021-07-13 19:13:35
不要删除

1、安装:vue-pdf

yarn add vue-pdf

2、修改 node_modules/vue-pdf/src/componentFactory.js

由于在缩放中,会产生闪烁(重新渲染),故需要去掉75、76行内容
// if ( resolutionScale < 0.85 || resolutionScale > 1.15 )
//     this.pdf.renderPage(this.rotate);

3、源码:viewPDF.vue

<template>
<div @contextmenu.prevent="">
  <!-- 上一页 -->
  <div class="pre_page page_bar pointer" v-show="viewType == 'page'">
    <div class="page_btn fa fa-chevron-left" @click="prePage"></div>
  </div>
  <!-- 下一页 -->
  <div class="next_page page_bar pointer" v-show="viewType == 'page'">
    <div class="page_btn fa fa-chevron-right" @click="nextPage"></div>
  </div>
  <!-- 页码 -->
  <div class="num_bar" v-show="viewType == 'page'">
    <el-select v-model="pageNum" placeholder="请选择">
      <el-option v-for="index in pageTotalNum" :key="index" :label="'第' + index + '页,' + '共' + pageTotalNum + '页'" :value="index">
      </el-option>
    </el-select>
  </div>
  <div class="num_bar" style="right: 40px;" v-show="viewType == 'scroll'">
    <el-tag>第 {{ nowScrollPage }} 页</el-tag>
  </div>
  <!-- 工具按钮 -->
  <div class="tools_bar">
    <div v-show="viewType == 'scroll'">
      <el-button plain icon="el-icon-document-copy" circle @click="pageView()"></el-button>
    </div>
    <div v-show="viewType == 'page'">
      <el-button plain icon="el-icon-tickets" circle @click="scrollView()"></el-button>
    </div>
    <div class="mt30">
      <el-button plain icon="el-icon-plus" circle @click="zoomPDF('plus')"></el-button>
    </div>
    <div class="mt10">
      <el-button plain icon="el-icon-minus" circle @click="zoomPDF('minus')"></el-button>
    </div>
    <div class="mt10">
      <el-button type="primary" plain icon="el-icon-download" circle @click="canDownPDF = false,downPDFCode = '',pdfDialog = true"></el-button>
    </div>
    <div class="mt10">
      <el-button type="warning" plain icon="el-icon-monitor" circle @click="$router.push('Home')"></el-button>
    </div>
  </div>

  <!-- 下载模态框 -->
  <el-dialog title="下载 PDF 文件" :visible.sync="pdfDialog" width="30%">
    <el-row :gutter="20" v-show="canDownPDF == false">
      <el-col :span="12" class="tagr mt10" :offset="6">
        <el-input placeholder="请输入提取码" v-model="downPDFCode">
          <el-button slot="append" @click="downPDF()">提取文件</el-button>
        </el-input>
      </el-col>
    </el-row>
    <div class="tagc" v-if="canDownPDF == true">
      <a :href="url" download="文件">
        <el-button type="primary" plain>点击下载</el-button>
      </a>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button size="small" @click="pdfDialog = false">取 消</el-button>
    </span>
  </el-dialog>

  <div :style="{width: pdfWidth + '%',marginLeft: pdfLeft + '%',marginTop: pdfTop + '%',marginBottom: pdfBottom + '%'}" style="transition: all .3s">
    <pdf v-if="viewType == 'page'" :page="pageNum" :src="url" @progress="loadedRatio = $event" @num-pages="pageTotalNum=$event"></pdf>
    <div v-if="viewType == 'scroll'">
      <pdf ref="pdf" v-for="i in pageNum" :key="i" :src="url" :page="i"></pdf>
    </div>
  </div>
</div>
</template>

<script>
import pdf from 'vue-pdf'

export default {
  name: 'viewPDF',
  components: {
    pdf,
  },
  data() {
    return {
      url: '/pdf_site/group1/M00/00/07/CiKZD2BAUqqARNxnAARyPxPWupI402.pdf',
      pageNum: 1,
      pageTotalNum: 1,
      pdfWidth: 50,
      pdfLeft: 25,
      pdfTop: 2,
      pdfBottom: 2,
      loadedRatio: 0,
      pdfDialog: false,
      canDownPDF: false,
      downPDFCode: '',
      viewType: 'page',
      clientHeight: 1,
      nowScrollPage: 1
    }
  },
  mounted() {
    window.addEventListener('scroll',this.setScrollPage,true)
  },
  methods: {
    // 设置滚动页码
    setScrollPage() {
      let scrollTop = document.documentElement.scrollTop;
      let scrollHeight = document.documentElement.scrollHeight;
      this.nowScrollPage = Math.ceil(this.pageTotalNum * (scrollTop  / scrollHeight));
    },
    // 滚动浏览
    scrollView() {
      this.viewType = 'scroll'
      this.pageNum = this.pageTotalNum
    },
    // 分页浏览
    pageView() {
      this.viewType = 'page'
      this.pageNum = 1;
    },
    // PDF 下载
    downPDF() {
      if (this.downPDFCode == '1234') {
        this.canDownPDF = true
        this.$notify({
          title: '提取码正确',
          message: '请点击按钮下载文件!',
          type: 'success'
        });
      } else {
        this.$notify({
          title: '请重试',
          message: '提取码校验错误!',
          type: 'error'
        });
      }
    },
    // PDF 缩放
    zoomPDF(method) {
      const _this = this;
      if (method === 'plus') {
        if (_this.pdfWidth === 100) {
          _this.$message({
            showClose: true,
            message: '已放大至:100%',
            type: 'info',
          });
        } else {
          _this.pdfWidth = _this.pdfWidth + 10
          _this.pdfLeft = (100 - _this.pdfWidth) / 2
        }
      }
      if (method === 'minus') {
        if (_this.pdfWidth === 10) {
          _this.$message({
            showClose: true,
            message: '已缩小至:10%,不可再缩小。',
            type: 'info',
          });
        } else {
          _this.pdfWidth = _this.pdfWidth - 10
          _this.pdfLeft = (100 - _this.pdfWidth) / 2
        }
      }
    },
    // 上一页
    prePage() {
      let page = this.pageNum
      page = page > 1 ? page - 1 : this.pageTotalNum
      this.pageNum = page
      window.scrollTo(0, 0);
    },

    // 下一页
    nextPage() {
      let page = this.pageNum
      page = page < this.pageTotalNum ? page + 1 : 1
      this.pageNum = page
      window.scrollTo(0, 0);
    }
  }
}
</script>

<style lang="stylus" scoped>
.tools_bar {
  position fixed;
  bottom: 10px;
  right: 110px;
  z-index 1000;
}

.num_bar {
  width 160px;
  position fixed;
  top: 10px;
  right: 110px;
  z-index 1000;
}

.page_bar {
  display: table;
  width: 100px;
  height 100%;
  background #ddd;
  opacity 0.7;
  z-index 100;
}

.page_btn {
  display: table-cell;
  vertical-align: middle;
  text-align center;
  font-size: 50px;
  color #999;
  z-index 1000;
}

.page_bar:hover {
  opacity 1;
}

.pre_page {
  top: 0;
  left: 0;
  position fixed;
}

.next_page {
  top: 0;
  right: 0;
  position fixed;
}
</style>

4、效果图

分页浏览

img

滚动浏览

img

利用提取码下载文件

img


不要删除

小站不易,感谢支持!