Vue 在线预览PDF pdfh5（移动/PC）

移动端实现在线预览PDF，并且可以自由缩放

pdfh5 的github地址：
https://github.com/gjTool/pdfh5

安装

npm install pdfh5

效果

组件封装：
pdfInfo.vue

<template>
    <div :class="$style.pdf" v-show="visible">
        <div @click="visible = false"></div>
        <div id="preViewPdf"></div>
    </div>
</template>
<script>
    import Pdfh5 from "pdfh5"
    import "pdfh5/css/pdfh5.css"
    export default {
        name: 'pdfH5',
        data() {
            return {
                visible: false,
                pdfh5: null
            }
        },
        methods: {
            openPdf(url) {
                this.visible = true
                this.pdfh5 = new Pdfh5("#preViewPdf", {
                    pdfurl: url
                })
            },
        }
    }
</script>

<style lang="less" module>
    * {
        padding: 0;
        margin: 0;
    }

    html,
    body {
        width: 100%;
        height: 100%;
    }

    .pdf {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: #000;
        overflow: hidden;
        z-index: 200;
    }
</style>

组件使用：

// 引入pdfh5组件
 <PreviewpdfH5 ref="PreviewpdfH5"></PreviewpdfH5>
 
//显示组件：
//item.url：pdf文件地址
 this.$refs.PreviewpdfH5.openPdf(item.url)

完整使用：

<template>
    <div>
        <PreviewpdfH5 ref="PreviewpdfH5"></PreviewpdfH5>
    </div>
</template>
<script>
    import PreviewpdfH5 from "../components/common/pdfInfo.vue"
    export default {
        components: {
            PreviewpdfH5
        },
        data() {
            return {
                visible: false,
                pdfh5: null
            }
        },
        created() {},
        mounted() {
            //引用组件：
            this.$refs.PreviewpdfH5.openPdf(
                'http://celiang.oss-cn-hangzhou.aliyuncs.com/measurement/2022-01/18/75it6phpocqYFV1642488558220118.pdf'
            )
        },
        methods: {

        }
    }
</script>

<style lang="less" scoped>

</style>