uniapp 如何显示pdf文件

在uniapp中如何实现PDF文件的显示？目前需要在APP内预览PDF文档，尝试过使用web-view加载在线PDF链接，但在iOS端无法正常显示。有没有其他可靠的解决方案或插件推荐？最好能支持本地PDF文件和网络PDF的加载，并保持较好的兼容性。

uniapp中显示PDF文件，可以使用web-view组件加载在线PDF链接，或使用pdf.js库在H5端渲染。小程序端需先下载PDF文件，再调用系统打开。

在 UniApp 中显示 PDF 文件，可以通过以下方法实现：

1. 使用 `web-view` 组件在线预览

将 PDF 文件上传到服务器，获取在线链接。
使用 web-view 组件加载 PDF 链接（需确保链接可直接在浏览器中打开）。
示例代码：

<web-view src="https://example.com/yourfile.pdf"></web-view>

注意：部分平台（如微信小程序）可能对域名有校验，需在后台配置业务域名。

2. 调用系统应用打开

使用 uni.downloadFile 下载文件到本地。
通过 uni.openDocument 调用系统默认应用打开 PDF。
示例代码：

uni.downloadFile({
  url: 'https://example.com/yourfile.pdf',
  success: (res) => {
    if (res.statusCode === 200) {
      uni.openDocument({
        filePath: res.tempFilePath,
        fileType: 'pdf'
      });
    }
  }
});

适用场景：适用于需要调用本地 PDF 阅读器的场景。

3. 使用 PDF 渲染插件（如 `pdf.js`）

在 H5 端可通过集成 pdf.js 实现自定义渲染。
步骤：
1. 将 pdf.js 库放入项目静态目录。
2. 通过 iframe 或 web-view 加载本地 HTML 文件渲染 PDF。
局限性：仅支持 H5 平台，小程序端无法直接使用。

平台兼容性说明：

H5：支持所有方法。
小程序：仅支持 web-view（需配置域名）和 uni.openDocument。
App：支持 web-view 和 uni.openDocument。

推荐方案：

优先使用 uni.openDocument，兼容性最好且体验接近原生。
若需内嵌展示，可在 H5 端使用 pdf.js，其他平台用 web-view。

根据实际需求选择合适方案即可。

回到顶部