更新记录

1.2（2026-07-19）

• 支持多平台 PDF 预览 APP (Android,iOS,Harmony OS)，小程序，H5
• APP端支持线上 PDF 文件
• 优化阅读完成检测（滚动到最后一页）
• 实现倒计时阅读功能
• 兼容 Vue2 和 Vue3

平台兼容性

uni-app(4.55)

uni-app x(4.55)

PDF合同阅读预览组件

简介

PDF合同阅读预览组件，基于pdfh5实现，兼容APP、小程序和H5平台。主要用于隐私协议、合同类PDF文件的预览，支持阅读到最后一页回调和倒计时阅读完成回调。

功能特性

• ✅ 跨平台兼容：支持H5、APP、微信小程序
• ✅ 阅读完成回调：阅读到PDF最后一页时触发回调事件
• ✅ 倒计时阅读：支持设置阅读时间，计时完成触发回调事件
• ✅ 按钮状态联动：可配置需同时满足阅读到最后一页和计时完成才能启用按钮
• ✅ 支持自定义样式：可自定义底部按钮样式

平台兼容性

安装方式

组件已集成在uni_modules中，无需额外安装。

使用方式

基础用法

<template>
  <view class="content">
    <u-pdf 
      :url="pdfUrl" 
      :show-timer="true" 
      :read-timer="20"
      @on-reach-last-page="handleReachLastPage"
      @on-timer-complete="handleTimerComplete"
      @on-click-reader="handleClickReader"
    ></u-pdf>
  </view>
</template>

<script>
export default {
  data() {
    return {
      pdfUrl: "/static/test.pdf"
    }
  },
  methods: {
    handleReachLastPage(data) {
      console.log('已阅读到最后一页', data);
    },
    handleTimerComplete(data) {
      console.log('阅读计时完成', data);
    },
    handleClickReader() {
      console.log('用户点击了"我已阅读"按钮');
    }
  }
}
</script>

自动引入

uni_modules组件支持自动引入，无需import，直接在template中使用即可：

<template>
  <u-pdf :url="pdfUrl" :show-timer="true"></u-pdf>
</template>

属性说明

options配置项

{
  cMapUrl: "https://unpkg.com/pdfjs-dist@3.8.162/cmaps/",
  lazy: false,
  withCredentials: true,
  renderType: "svg",
  maxZoom: 3,
  scrollEnable: true,
  zoomEnable: true
}

事件说明

核心逻辑

1. 阅读完成检测：通过监听PDF的scroll和pagechange事件，当当前页码达到总页数时触发onReachLastPage回调

2. 倒计时完成检测：组件挂载时启动倒计时，计时结束时触发onTimerComplete回调

3. 按钮状态联动：根据needReadAllPage配置，按钮需满足以下条件才可用：

   • needReadAllPage=true：必须同时满足阅读到最后一页 AND 倒计时完成
   • needReadAllPage=false：只需满足倒计时完成

注意事项

1. 组件已内置pdfh5依赖，无需额外安装node_modules
2. 小程序端需要配置downloadFile域名白名单
3. PDF文件较大时建议使用网络地址或优化加载方式

更新日志

v1.0.0

• 初始版本
• 支持阅读到最后一页回调
• 支持倒计时阅读完成回调
• 支持按钮状态联动