uniapp 预览pdf

### 实现 UniApp 中的 PDF 文件预览

为了实现在 UniApp 应用程序中显示 PDF 文档的功能，可以采用 `web-view` 组件来加载 HTML5 的 PDF 查看器。下面展示了具体的方法。

#### 创建静态资源文件夹并放置必要的HTML查看器文件

确保在项目的 `static` 目录下有用于展示PDF文档所需的HTML文件以及任何其他依赖项，比如 pdf.js 或者其他的第三方库[^1]。

#### 编写 PDF 预览页面组件 viewPdf.vue

此 Vue 单文件组件负责接收来自上一界面传递过来的参数，并通过 URL 参数构建完整的 PDF 文件访问链接：

<template>
  <view>
    <!-- 使用 web-view 来嵌入外部网页 -->
    <web-view :src="fileUrl"></web-view>
  </view>
</template>

<script>
import request from '@/utils/request/index'

export default {
  data() {
    return {
      fileUrl: '', // 存储最终要打开的PDF文件URL
      viewerUrl: '/static/html/web/viewer.html?file=' // 基础路径加上查询字符串形式拼接目标PDF文件名
    }
  },
  
  onLoad(option) {
    if (option.url) {
      this.fileUrl = this.viewerUrl + option.url;
    }
  }
}
</script>

<style scoped></style>

这段代码定义了一个简单的Vue单页应用(SPA)，它接受一个名为 `url` 的参数作为输入，该参数指向待预览的具体PDF文件的位置。

对于动态获取PDF文件流的情况，则可以通过API请求获得文件的实际存储位置或直接返回二进制数据，在前端处理后再转成可被浏览器识别的形式供WebView加载[^2]。

当需要解决真机环境下 WebView 可能会遮挡住设备顶部状态栏的问题时，可以在样式表里调整相应属性或者利用平台特定配置选项来进行适配。