uniapp中使用pdfjs实现在线预览pdf，支持h5，小程序，app真机_uniapp pdf.js

摘要：本文介绍PDF.js库的部署与使用指南。首先下载PDF.js压缩包并解压到static目录，详细描述了核心目录结构，包括构建文件、查看器UI资源和WebAssembly模块等。在模板中使用iframe标签加载PDF查看器，通过URL参数控制显示效果（如隐藏工具栏、设置视图模式等）。关键代码示例展示了如何动态设置PDF文件路径（需encodeURIComponent编码）。文章还提供了iframe的常用参数说明和PDF显示控制参数，如页码定位、缩放比例、搜索高亮等实用功能。

目录

        1、pdfjs压缩包下载

        2、下载完成后解压，放到static目录下

        3、template模板中代码

        4、js中代码

        5、完整兼容示例代码

        6、iframe标签的基础参数

        7、PDF 显示控制参数（通过 URL 附加，多个参数使用&进行拼接）

1、pdfjs压缩包下载
下载地址：PDF.js - Getting Started

2、下载完成后解压，放到static目录下

最终目录结构，static与pages同级目录

static/
└── pdfjs/                       # PDF.js 核心库根目录
    ├── build/                   # 核心构建文件目录（ES模块版本）
    │   ├── pdf.mjs              # PDF.js 主库文件（ES模块）
    │   ├── pdf.mjs.map          # 主库源映射文件（用于调试）
    │   ├── pdf.sandbox.mjs      # 沙盒环境库（安全隔离执行）
    │   ├── pdf.sandbox.mjs.map  # 沙盒源映射文件
    │   ├── pdf.worker.mjs       # Web Worker 处理线程（ES模块）
    │   └── pdf.worker.mjs.map   # Worker 源映射文件
    │
    ├── web/                     # 查看器UI和资源目录
    │   ├── cmaps/               # 字符映射表（支持CJK等复杂字符）
    │   ├── iccs/                # ICC颜色配置文件（色彩管理）
    │   ├── images/              # 查看器界面图标资源
    │   ├── locale/              # 多语言本地化文件
    │   ├── standard_fonts/      # PDF标准字体文件
    │   ├── wasm/                # WebAssembly模块（高性能解析）
    │   │
    │   ├── compressed.tracemonkey-pldi-09.pdf # 示例PDF文件（测试用）
    │   ├── debugger.css         # PDF脚本调试器样式
    │   ├── debugger.mjs         # PDF脚本调试器逻辑
    │   ├── viewer.css           # 主查看器样式表
    │   ├── viewer.html          # 查看器主入口HTML文件
    │   ├── viewer.mjs           # 查看器主逻辑（ES模块）
    │   └── viewer.mjs.map       # 查看器源映射文件
    │
    └── LICENSE                  # PDF.js 许可证文件（Apache 2.0）

3、template模板中代码

4、js中代码

pdfUrl.value = `static/pdfjs/web/viewer.html?file=${encodeURIComponent( 接口返回的pdf地址)}`;

5、完整兼容示例代码

        import { onLoad } from \"@dcloudio/uni-app\";import { ref } from \"vue\";const pdfUrl = ref(\"\");onLoad(async (options) => { // #ifdef MP-WEIXIN || H5 pdfUrl.value = \"https://education.github.com/git-cheat-sheet-education.pdf\"; // #endif // #ifdef APP-PLUS pdfUrl.value = `static/pdfjs/web/viewer.html?file=${encodeURIComponent( \"https://education.github.com/git-cheat-sheet-education.pdf\" )}`; // #endif});.pdf-viewer { width: 100%; height: 100vh;}

附带：

6、iframe标签的基础参数

参数 作用 示例 src 必需 - 指定 PDF 文件的 URL src=\"/docs/report.pdf\" width 设置 iframe 宽度（像素/%） width=\"100%\" height 设置 iframe 高度（像素/%） height=\"600px\" title 无障碍支持 - 描述 iframe 内容 title=\"年度报告 PDF\" frameborder 是否显示边框（0/1，建议用 CSS 替代） frameborder=\"0\" allow 权限控制（如全屏） allow=\"fullscreen\" loading 懒加载（lazy/eager） loading=\"lazy\"

---

7、PDF 显示控制参数（通过 URL 附加，多个参数使用&进行拼接）

需在 PDF 文件 URL 后添加哈希参数（#key=value），常用于 PDF.js（浏览器内置或自托管）：

参数 功能 示例 URL #page=3 打开指定页码 file.pdf#page=3 #zoom=150 设置缩放比例（百分比） file.pdf#zoom=150 #view=fitH 显示模式：
fit（适应容器）
fitH（水平适应）
fitV（垂直适应） file.pdf#view=fitH #toolbar=0 隐藏工具栏（0=隐藏, 1=显示） file.pdf#toolbar=0 #navpanes=0 隐藏侧边导航栏（0=隐藏, 1=显示） file.pdf#navpanes=0 #scrollbar=0 隐藏滚动条（0/1） file.pdf#scrollbar=0 #search=关键词 高亮搜索关键词 file.pdf#search=2024