记录：H5+App开发app的pdf文件预览

基础

众多方法里，目前最好实现的只有结合uniap的【web-view】使用【hybrid】

<template>
    <view class="File">
        <!-- <My-Header title="文件预览" :show-back="true" /> -->
        <view v-if="fileUrl" class="fileBody">
            <web-view :src="fileUrl" :fullscreen="false"> </web-view>
        </view>
    </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'

const fileUrl = ref('')

onLoad((options) => {
    if (options) {
        fileUrl.value = options.fileUrl
    }
})
</script>

page配置如下

{
            "path": "pages/Common/File/index",
            "name": "File",
            "meta": {
                "islogin": true,
                "memo": "文件预览"
            },
            "style": {
                "navigationBarBackgroundColor": "#1a73e8",
                "navigationBarTextStyle": "white"
            }
}

存在问题1：一旦page设置为

"style": {
       "navigationStyle": "custom"
}

那么自定义的【My-Header】无法使用，不管样式怎么设置，出来的web-view都是全屏，特别诡异，为了文件预览页面好看能返回，无奈使用系统自带的navigation

存在问题2：hybrid自带的文件预览工具栏很多，没找到自定义配置传参，只能很傻地去css样式文件隐藏

.toolbarButton.print,
.toolbarButton.openFile,
.toolbarButton.download,
.toolbarButton.bookmark {
    display: none;
}

存在问题3：router.push在跳转路由的时候，params里的传参如果是这样的格式

【file=./ScanUseBook.pdf&watermark=123123】

&后面的参数会丢失…迷一样的问题，解决办法就是分开传参后面再拼接

以上问题……请教大佬是否有更好的办法

水印

在合适的位置加入一个div（可全局搜索一下【params】，然后把这个函数插在这个后面，然后调用）

 <div id="watermark" class="watermark"></div>

.watermark {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: minmax(30px, auto);
    gap: 0 10px;
    pointer-events: none;
    z-index: 9999;
    opacity: 0.2;
}

然后在view.js的合适位置加上

  function createWatermark() {
       const watermarkText = params.watermark || '机密文件'
       const watermark = document.getElementById('watermark')
       const containerWidth = watermark.offsetWidth
       const containerHeight = watermark.offsetHeight
       const line = Math.floor(containerHeight / 150)
       const itemWidth = (containerWidth - 30) / 6 // 30=3个间隔*10px
       const fontSize = Math.min(itemWidth * 0.2, 16) // 字体自适应
       for (let i = 0; i < (line + 1) * 6; i++) {
          const div = document.createElement('div')
          div.style.cssText = `
                               width: ${itemWidth}px;
                               height: 30px;
                               margin-bottom: 10px;
                               display: flex;
                               align-items: center;
                               font-size: 0.9rem;
                               color: #666;
                               transform: rotate(30deg);
                              `
          div.textContent = watermarkText
          watermark.appendChild(div)
       }
}

最后勉勉强强实现需求