uniapp 预览pdf app端使用自定义导航时铺满全屏，需要留出导航栏

1、安装pdf预览插件：hybrid 插件（网上资料很多）

 

2、封装预览vue页面（重点在加粗部分，使用原生导航没有问题，但是使用自定义导航就把状态栏全部盖住了）

<template>
    <view class="page">
        <web-view :webview-styles="webviewStyles" :src="src" ></web-view>
    </view>
</template>

<script>
    export default {
        name: 'ss-preview',
        props: {
            fileUrl: {
                type: String,
                default: ''
            },
            webType:{
                type: String,
                default: ''
            }
        },
        data() {
            return {
                webviewStyles: {
                    progress: {
                        color: '#FF3333'
                    }
                },
                src: '',
            };
        },
        mounted() {
            this.previewPdf(this.fileUrl)
        },
        created() {
        // #ifdef APP-PLUS
            // 争对需要预留顶部导航栏高度的操作
            if(this.webType == 'navbar_height'){
                let navbar_h = 0;// 导航栏高度
                let _height = 0; //定义动态的高度变量
                let statusbar = 0; // 动态状态栏高度
                uni.getSystemInfo({ // 获取当前设备的具体信息
                    success: (sysinfo) => {
                        navbar_h = sysinfo.platform === 'android' ? 48 : 44;
                        statusbar = sysinfo.statusBarHeight;
                        _height = sysinfo.windowHeight;
                    }
                });
                let currentWebview = this.$parent.$scope.$getAppWebview(); //获取当前web-view
                setTimeout(function() {
                    let wv = currentWebview.children()[0];
                    wv.setStyle({ //设置web-view距离顶部的距离以及自己的高度，单位为px
                        top: statusbar + navbar_h, //此处是距离顶部的高度，应该是你页面的头部
                        height: _height - statusbar
                    })
                }, 200);
            }
        // #endif    
        },
        methods: {
            //微信小程序预览文档,可预览.doc,.docx,.xls,.xlsx,.pdf等文件
            previewWechat(urlPdf) {
                uni.showLoading({
                    title: '正在加载中..'
                })
                uni.downloadFile({
                    url: urlPdf,
                    success: function(res) {
                        var filePath = res.tempFilePath;
                        uni.openDocument({
                            filePath: filePath,
                            showMenu: true,
                            success: function(res) {
                                console.log('打开文档成功');
                                uni.hideLoading()
                            },
                        });
                    },
                    complete: function(r) {
                        uni.hideLoading()
                    }
                });
            },
            //APP，H5预览文档图片和视频，微信小程序预览图片和视频
            previewPdf(value) {
                this.src = `/uni_modules/ss-preview/hybrid/html/pdf-reader/index.html?file=${encodeURIComponent(value)}`;        
            },
        },
    };
</script>

<style lang="scss" scoped>
    .page {
        height: 100%;

        .video-detail-page {
            width: 100%;

            uni-video {
                width: 100%;
            }

            video {
                width: 100%;
            }
        }
    }
</style>

3、页面使用

<!-- #ifdef APP-PLUS -->
      <ss-preview :webType="'navbar_height'" v-if="resource_type !== 'mp4'" :fileUrl="courseInfo.course.url"></ss-preview>
<!-- #endif -->

总结：使用封装后的webview组件app打开pdf可在当前页面预览，不会在三方平台打开，并且没有下载的弹框提示，完美符合需求！！！！！！