更新记录

1.0.0（2025-12-13）

平台兼容性

uni-app(4.87)

uni-app x(4.87)

其他

uni-pdf-viewer - PDF预览插件

📖 简介

Android 原生 PDF 预览插件,提供流畅的应用内 PDF 预览体验。

✨ 功能特性

• ✅ 手势缩放
• ✅ 页面旋转
• ✅ 垂直翻页
• ✅ 页码显示
• ✅ 快速滑动
• ✅ 页面对齐
• ✅ TypeScript 支持

📱 平台支持

🚀 安装

1. 在 DCloud 插件市场 搜索 uni-pdf-viewer
2. 点击「使用 HBuilderX 导入插件」
3. 选择云端一体方式导入到项目

💡 使用方法

基础用法

<template>
  <button @click="handlePreview">预览 PDF</button>
</template>

<script setup lang="ts">
function handlePreview() {
  uni.previewPdf({
    filePath: '/storage/emulated/0/document.pdf',
    success: (res) => {
      console.log('预览成功')
    },
    fail: (err) => {
      uni.showToast({
        title: '预览失败: ' + err.errMsg,
        icon: 'none'
      })
    }
  })
}
</script>

预览网络 PDF

<template>
  <button @click="previewNetworkPdf">预览 PDF</button>
</template>

<script setup lang="ts">
async function previewNetworkPdf() {
  uni.showLoading({ title: '加载中...' })

  try {
    // 下载 PDF 文件
    const res = await new Promise<UniApp.DownloadSuccessData>((resolve, reject) => {
      uni.downloadFile({
        url: 'https://example.com/document.pdf',
        success: resolve,
        fail: reject
      })
    })

    // 转换为本地路径
    const filePath = plus.io.convertLocalFileSystemURL(res.tempFilePath)

    uni.hideLoading()

    // 预览 PDF
    uni.previewPdf({
      filePath: filePath,
      fail: (err) => {
        uni.showToast({
          title: '预览失败: ' + err.errMsg,
          icon: 'none'
        })
      }
    })
  } catch (error) {
    uni.hideLoading()
    uni.showToast({ title: '下载失败', icon: 'none' })
  }
}
</script>

封装为工具函数

// utils/previewPdf.ts

export async function previewPdf(filePathOrUrl: string) {
  let filePath = filePathOrUrl

  // 判断是否为网络 URL
  if (filePathOrUrl.startsWith('http://') || filePathOrUrl.startsWith('https://')) {
    uni.showLoading({ title: '加载中...' })

    try {
      const res = await new Promise<UniApp.DownloadSuccessData>((resolve, reject) => {
        uni.downloadFile({
          url: filePathOrUrl,
          success: resolve,
          fail: reject
        })
      })

      filePath = plus.io.convertLocalFileSystemURL(res.tempFilePath)
      uni.hideLoading()
    } catch (error) {
      uni.hideLoading()
      uni.showToast({ title: '下载失败', icon: 'none' })
      return
    }
  }

  uni.previewPdf({
    filePath: filePath,
    fail: (err) => {
      uni.showToast({
        title: `预览失败: ${err.errMsg}`,
        icon: 'none'
      })
    }
  })
}

使用:

import { previewPdf } from '@/utils/previewPdf'

// 预览网络 PDF
previewPdf('https://example.com/document.pdf')

// 预览本地 PDF
previewPdf('/storage/emulated/0/document.pdf')

📚 API

uni.previewPdf(options)

PreviewPdfOptions

错误码

🎨 界面说明

• 工具栏: 返回按钮、标题、旋转按钮
• 页码显示: 底部显示当前页码和总页数
• 手势支持: 滑动翻页、双指缩放、双击放大

⚠️ 注意事项

1. 仅支持 Android 平台
2. 需要读取存储权限
3. 预览网络 PDF 需先下载到本地
4. 使用 plus.io.convertLocalFileSystemURL() 转换下载文件路径

❓ 常见问题

Q: 为什么提示找不到文件? A: 请确保使用本地绝对路径,并用 plus.io.convertLocalFileSystemURL() 转换路径。

Q: 如何预览网络 PDF? A: 使用 uni.downloadFile 先下载到本地,再预览。参考上面的示例代码。

Q: PDF 加载慢怎么办? A: 添加加载提示,或压缩 PDF 文件大小。

📝 更新日志

查看 changelog.md

📄 许可证

本插件为付费插件,购买后可用于商业项目。

🤝 技术支持

• DCloud 插件市场评论
• 提交 Issue
• 联系作者

开发者: Sanyi 最后更新: 2024-12-13