uniapp app端 pdfjs使用webview预览 显示导航栏和下载按钮 webview覆盖导致无法显示其他组件

1.问题原因 app端webview预览 撑满整个页面导致导航栏无法显示下载按钮无法显示

2.解决思路 先想用Canvas调用pdfjs绘制 自由度高可以自由控制页面 h5没问题 app端打包运行 报传入Canvas节点有问题  无法绘制报错加载 PDF 失败:, Error: Setting up fake worker failed: "undefined is not an object (evaluating 'document.createElement')". at apps/clouddisk/pdfwebview.vue:80 __ERROR

初步分析是打包后无法以这种方式传入Canvas节点 app端没有运行环境 document.createElement 基于浏览器(存疑) 时间原因后采用下面的方法实现 

参考文章

Uniapp WebView 全屏导致遮挡状态栏的解决方案

页面结构

<template>
  <tm-navbar class="navbar" ref="navbar" :title="titlename" :show-nav-back="true" :static-transparent="false" bg-color="#f2f2f2"></tm-navbar>
  <web-view ref="webview" :src="url" v-if="filetype?.includes('application/pdf')" class="custom-webview" />
  
</template>

    控制webview留出顶部空间 创建原生按钮组件

onReady(() => {
  const sysinfo = uni.getSystemInfoSync()
  const navbar_h = sysinfo.platform === 'android' ? 44 : 44 //这里是你导航栏高度
  const statusbar = sysinfo.statusBarHeight
  const _height = sysinfo.windowHeight
  // #ifdef APP-PLUS
  const instance = getCurrentInstance()
  const currentWebview = instance?.proxy?.$scope?.$getAppWebview?.()
  const children = currentWebview?.children?.()
  const wv = children?.[0]
  //安卓延迟获取wv获取 此处如不用安卓可以不写延时获取wv
   setTimeout(() => {
    const children = currentWebview.children()
    const wv = children?.[0]
    if (wv) {
      wv.setStyle({
        top: `${statusbar + navbar_h}px`,
        height: `${_height - statusbar - navbar_h}px`
      })
    }
  }, 200) // 延时 200ms 保证子 WebView 已创建
  
 
 if (downloadurl.value) {
    createDownloadButton(downloadurl.value)
  }
 // #endif
  
})

在onready内获取页面中的webview 预留出顶部导航栏位置

2.页面内按钮会被webview覆盖 导致无法显示 (app端) 可以使用原生方式创建按钮

//  创建原生下载按钮
function createDownloadButton(url: string) {
  const sysinfo = uni.getSystemInfoSync()
  const btnWidth = sysinfo.windowWidth - 64
  const btnTop = sysinfo.windowHeight - 80
  const currentWebview = getCurrentInstance()?.proxy?.$scope

  if (!currentWebview) return

  const btn = new plus.nativeObj.View('download-btn', {
    top: `${btnTop}px`,
    left: '32px',
    width: `${btnWidth}px`,
    height: '44px',
    backgroundColor: '#FCAA38',
  }, currentWebview) 

  btn.drawRect({
    color: '#FCAA38',
    radius: '20px' //目前没有找到设置按钮圆角的方式 这个设置不起作用
  }, {
    top: '0px',
    left: '0px',
    width: '100%',
    height: '100%'
  })

  btn.drawText('下载', {}, {
    size: '16px',
    color: '#FFFFFF',
    verticalAlign: 'middle',
    align: 'center'
  })
    //挂载下载事件
  btn.addEventListener('click', () => {
    downloadPdf(url)
  })

  btn.show()
  downloadBtn = btn //接收按钮在页面离开时主动销毁按钮否则会显示到其他页面看下方
}

// 销毁所有原生控件
function destroyAllNativeViews() {
  if (downloadBtn) {
    downloadBtn.close()
    downloadBtn = null
  }
}

// 页面关闭、返回时都销毁控件
onBackPress(() => {
  destroyAllNativeViews()
  return false
})
onUnload(() => {
  destroyAllNativeViews()
})

目前实现后可以实现预览 显示导航栏 下载按钮悬浮  按钮圆角无法设置暂时没有好的方法