uni-app nvue页面使用web-view查看pdf无滑动条

<web-view v-if='url != "" && isShowPdf' :src="url" style="width: 100%;height: 1500px;margin: 20px 0px;"></web-view>

viewerUrl: ‘/hybrid/html/web/viewer.html’,

// 判断是手机系统：安卓，使用pdf.js
// #ifdef APP-PLUS
var pdfUrl = “@/…/…/…/…/static/pdf/test.pdf”;
if (plus.os.name === ‘Android’) {
this.url = ${this.viewerUrl}?file=${encodeURIComponent(pdfUrl)};
}
// ios，直接访问pdf所在路径
else {
this.url = encodeURIComponent(pdfUrl);
}
console.log(this.url)
this.$nextTick(() => {
this.countDownStart = true;

this.isShowPdf = true;

});
// #endif

关键代码如上，在nvue页面查看pdf无法向下滑动。。。高度被定的高度卡死了，，，，overflow也没用。。。就是没有滑动条

结果如附件

感觉是bug啊，来个uni的工作人员啊!!!

eggper 1楼•18 天前

组件出现双滑动条就会出现查看pdf的组件无法滑动的bug,
暂定解决方案：position:fixed，然后宽高铺满整个屏幕可用区域。。。。
但是又出现了新的问题，nvue页面无法用z-index层级，，，，吐了

bupafengyu 2楼•18 天前

在 uni-app 的 nvue 页面中使用 web-view 组件查看 PDF 文件时，可能会遇到没有滑动条的问题。这是因为 nvue 页面的渲染机制与普通 vue 页面不同，web-view 组件在 nvue 中的表现可能会受到限制。

解决方案

使用 iframe 替代 web-view：如果 web-view 无法满足需求，可以尝试使用 iframe 标签来嵌入 PDF 文件。iframe 在 nvue 中通常会有更好的兼容性。
```
<iframe 
    src="https://example.com/path/to/your.pdf" 
    width="100%" 
    height="100%" 
    style="border: none;">
</iframe>
```

使用第三方 PDF 查看插件：你可以使用第三方插件或服务来查看 PDF 文件。例如，使用 pdf.js 或 PDFObject 等库来渲染 PDF 文件。

<div id="pdf-container"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.6.347/pdf.min.js"></script>
<script>
    const container = document.getElementById('pdf-container');
    const pdfUrl = 'https://example.com/path/to/your.pdf';

    pdfjsLib.getDocument(pdfUrl).promise.then(pdf => {
        for (let i = 1; i <= pdf.numPages; i++) {
            pdf.getPage(i).then(page => {
                const scale = 1.5;
                const viewport = page.getViewport({ scale });

                const canvas = document.createElement('canvas');
                const context = canvas.getContext('2d');
                canvas.height = viewport.height;
                canvas.width = viewport.width;

                const renderContext = {
                    canvasContext: context,
                    viewport: viewport
                };

                page.render(renderContext).promise.then(() => {
                    container.appendChild(canvas);
                });
            });
        }
    });
</script>

使用原生插件：如果需要更好的性能和体验，可以考虑使用原生插件来查看 PDF 文件。uni-app 支持使用原生插件，你可以开发或使用现有的插件来实现 PDF 查看功能。

调整样式：如果你仍然想使用 web-view，可以尝试调整样式，确保 web-view 的父容器有足够的空间，并且 web-view 的样式设置正确。

<template>
    <view style="flex: 1;">
        <web-view :src="pdfUrl" style="width: 100%; height: 100%;"></web-view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                pdfUrl: 'https://example.com/path/to/your.pdf'
            };
        }
    };
</script>