如何在H5移动端预览PDF并且获取到PDF的总页数以及当前阅读所在的页数

问题描述

       如何在H5移动端预览PDF，并且获取到PDF的总页数，获取到当前的页数。

第一步 安装pdfh5

npm install pdfh5

第二步 开始写预览界面

<template>
    <div class="login" id="app" style="width: 100%;height: 100%">
        <div @click="getCurren">当前页</div>
        <div id="demo"></div>
    </div>
</template>
<script>
    import Pdfh5 from "pdfh5";
    export default {
        name: 'pdf',
        data() {
            return {
                pdfh5: null,
                pdfUrl:'https://www.gjtool.cn/pdfh5/git.pdf' //地址最好用http: 的访问
            };
        },
        mounted() {
            //实例化
            this.pdfh5 = new Pdfh5("#demo", {
                URIenable:false,
                pdfurl: this.pdfUrl
            });
            //监听完成事件
            this.pdfh5.on("complete", function (status, msg, time) {
                console.log("状态：" + status + "，信息：" + msg + "，耗时：" + time + "毫秒，总页数：" + this.totalNum)
            });
            this.pdfh5.on("error", function (msg,time) {
                console.log( "，信息：" + msg + "，耗时：" + time + "毫秒，总页数：" + this.totalNum)
            });

        },
        methods: {
            getCurren(){
                //获取当前阅读页
                console.log(this.pdfh5.currentNum);
            }
        }
    }
</script>
<style scoped>
    *{
        padding: 0;
        margin: 0;
    }
    html,body,#app {
        width: 100%;
        height: 100%;
    }
</style>

第三步 问题解决，发起请求。