关于前端:PDF查看器之pdfvuer

背景

公司须要实现一个 PDF 电子签章我的项目，应用到 pdfvuer 插件，

应用步骤

1. 加载包：pdfvuer
   npm i pdfvuer

2. 引入

   import pdfvuer from 'pdfvuer' // pdfvuer 版本为 @1.6.1
   import 'pdfjs-dist/build/pdf.worker.entry'

3. pdf 预览（简化版）

<template>
  <pdf src="./static/test.pdf" :page="1">
    <template slot="loading">
      loading content here...
    </template>
  </pdf>
</template>

<script>
import pdf from 'pdfvuer'

export default {
  components: {pdf}
}

4. pdf 预览（带分页）
   基于 element+pdfvuer 实现的分页预览 pdf，能够跳转分页和滑动解决页码

<template>
    <!-- 应用 pdfvuer 实现 滑动浏览 单印章 -->
    <div id="boxContent">
        <div id="contentArea" class="centerArea">
            <pdf ref="wrapper" :src="pdfData" v-for="i in numPages" :key="i" :id="i" :page="i" style="width:100%;"
                 :scale="1">
                <template slot="loading">
                    loading content here...
                </template>
            </pdf>
        </div>
        <div class="rightArea">
            <div class="toolGroup">
                <div class="page"> 第 {{page}} / {{numPages}} 页 </div>
                <el-button type="primary" @click.stop="prePage"> 上一页 </el-button>
                <el-button type="primary" @click.stop="nextPage"> 下一页 </el-button>
                <div class="toolArea">
                    <span> 跳到 </span>
                    <el-input v-model="inputPage" @keyup.enter.native="pageChange"/>
                    <span> 页 </span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import pdfvuer from 'pdfvuer' // pdfvuer 版本为 @1.6.1
import 'pdfjs-dist/build/pdf.worker.entry'

export default {
    name: 'Pdfvuer',
    components: {pdf: pdfvuer},
    data() {
        return {
            page: 1, // 当前页
            numPages: 0,  // 总页数
            pdfData: undefined,
            inputPage: 1, // 输出的页码
        }
    },
    mounted() {this.getPdf()
        window.addEventListener('scroll', this.handleScroll, true);
    },
    beforeDestroy() {window.removeEventListener('scroll', this.handleScroll, true);
    },
    watch: {show: function (s) {if (s) {this.getPdf()
            }
        }
    },
    methods: {
        // 获取 pdf 信息
        getPdf() {this.pdfData = pdfvuer.createLoadingTask('/test.pdf')
            this.pdfData.then(pdf => {this.numPages = pdf.numPages}).catch(err => {console.log(err)
            })
        },
        // 滚动事件 滚动时更新页码
        handleScroll() {let scrollTop = this.getScrollTop() // 滚动高度
            let onePageHeight = this.getAttributeValue('page', 'height') // 单页面高度
            this.page = Math.round(scrollTop / onePageHeight) + 1
            // this.inputPage = this.page
        },
        // 获取滚动高度
        getScrollTop() {
            let scroll_top = 0;
            if (document.documentElement && document.documentElement.scrollTop) {scroll_top = document.documentElement.scrollTop;} else if (document.body) {scroll_top = document.body.scrollTop;}
            return scroll_top;
        },
        // 滚动到固定地位
        goTo(target) {
            let scrollT = document.body.scrollTop || document.documentElement.scrollTop
            if (scrollT > target) {let timer = setInterval(function () {
                    let scrollT = document.body.scrollTop || document.documentElement.scrollTop
                    let step = Math.floor(-scrollT / 6);
                    document.documentElement.scrollTop = document.body.scrollTop = step + scrollT;
                    if (scrollT <= target) {
                        document.body.scrollTop = document.documentElement.scrollTop = target;
                        clearTimeout(timer);
                    }
                }, 20)
            } else if (scrollT === 0) {let timer = setInterval(function () {
                    let scrollT = document.body.scrollTop || document.documentElement.scrollTop
                    let step = Math.floor(300 / 3 * 0.7);
                    document.documentElement.scrollTop = document.body.scrollTop = step + scrollT;
                    if (scrollT >= target) {
                        document.body.scrollTop = document.documentElement.scrollTop = target;
                        clearTimeout(timer);
                    }
                }, 20)
            } else if (scrollT < target) {let timer = setInterval(function () {
                    let scrollT = document.body.scrollTop || document.documentElement.scrollTop
                    let step = Math.floor(scrollT / 6);
                    document.documentElement.scrollTop = document.body.scrollTop = step + scrollT;
                    if (scrollT >= target) {
                        document.body.scrollTop = document.documentElement.scrollTop = target;
                        clearTimeout(timer);
                    }
                }, 20)
            } else if (target === scrollT) {return false;}
        },
        // 上一页
        prePage() {
            let page = this.page;
            page = page > 1 ? page - 1 : 1;
            this.page = page;
            this.changeScrollTop()},
        // 下一页
        nextPage() {
            let page = this.page;
            page = page < this.numPages ? page + 1 : this.numPages;
            this.page = page;
            this.changeScrollTop()},
        // 依据输出的页码跳转页面
        pageChange() {let reg = /^[1-9]\d*$/
            if (!reg.test(this.inputPage)) {this.$message.error('请输出正确的页码')
                return
            }
            this.inputPage > this.numPages ? this.page = this.numPages : this.page = ~~this.inputPage
            this.inputPage < 1 ? this.page = 1 : this.page = ~~this.inputPage
            this.changeScrollTop()},
        // 依据页码变动批改页面滚动间隔
        changeScrollTop() {let onePageHeight = document.getElementById('contentArea').offsetHeight / this.numPages
            let scrollTo = onePageHeight * (this.page - 1)
            this.goTo(scrollTo)
        },

        // 获取节点的某个属性值 只实用于获取 px 相干数据
        getAttributeValue(className, attr) {let pageDiv = document.querySelector('.' + className);
            let attrsValue = getComputedStyle(pageDiv);
            let attrVal = attrsValue[attr]
            return Number(attrVal.substr(0, attrVal.length - 2)) // 截取掉 px
        },

    }
}
</script>

练习代码指路
练习平台还有 pdf 盖章拖拽代码和一些其余小插件的应用办法，有须要的小可爱们自行拉取。路过能够棘手点个赞哦 ~~