vue + pdfh5实现手机端查看pdf报告

1.安装

npm install pdfh5

2.使用

<template>

<div id="pdf">

    <div id="demo"></div>

</div>

</template>

<script>

import Pdfh5 from 'pdfh5'

import 'pdfh5/css/pdfh5.css'

export default {

    data(){

        return {

            pdfh5: null,

            newPdfUrl: ''

        }

    },

    mounted() {

        this.newPdfUrl = 'demo.pdf';

        this.pdfh5 = new Pdfh5('#demo',{

            pdfurl: this.newPdfUrl,

            lazy:true

        })

    },

}

</script>

这样看到的pdf效果默认是显示第一页，剩下的页面部分显示空白，翻页能正常显示，不喜欢这样的效果，看了下代码，是控制了一页的高度，开始修改源码，找到pdfh5/js/pdfh5.js，注释updateAspectRatio方法里的代码：

updateAspectRatio: function() { 

    // this.setContainerY(this.getContainerX() / this.getAspectRatio());

},

完成。