微信小程序在线预览PDF文件

需求:微信小程序在线预览PDF合同文件,加载完成后强制阅读10秒才可点击同意按钮

H5代码:

html 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>微信小程序在线预览PDF</title>
  <link rel="stylesheet" href="./css/pdfh5.css">
  <link rel="stylesheet" href="./css/style.css">
  <style>
    #pdf {
      width: 100%;
      height: 100vh;
    }

    .btn {
      display: flex;
      justify-content: center;
      align-items: center;
      position: absolute;
      left: 32px;
      right: 32px;
      bottom: 10px;
      height: 50px;
      background-image: linear-gradient(270deg, #FF5D31 0%, #FFA853 100%);
      border-radius: 44px;
      font-weight: 500;
      font-size: 16px;
      color: #fff;
    }
  </style>
</head>

<body>
  <div id="app">
    <div id="pdf"></div>
    <div class="btn" style="opacity: .8;" v-if="show">{{message}}</div>
    <div class="btn" v-else @click="submit">同意签署</div>
  </div>
  <script src="./js/pdf.js"></script>
  <script src="./js/pdf.worker.js"></script>
  <script src="./js/jquery-3.6.0.min.js"></script>
  <script src="./js/pdfh5.js"></script>
  <script src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
  <script>
    var app = new Vue({
      el: '#app',
      data: {
        show: true,
        num: 10,
        timer: null
      },
      computed: {
        message() {
          if (this.num === 10) {
            return '合同加载中...'
          } else {
            return '阅读倒计时' + this.num + '秒'
          }
        }
      },
      methods: {
        submit() {
          wx.miniProgram.postMessage({ data: 'done' })
        },
      },

      mounted() {
        let searchURL = window.location.search;
        searchURL = searchURL.substring(1, searchURL.length);
        const pdfurl = searchURL.split("&")[0].split("=")[1];
        const pdfh5 = new Pdfh5('#pdf', {
          pdfurl,
        }, {
          lazy: true
        });

        pdfh5.on("complete", (status) => {
          if (status === 'error') return

          this.timer = setInterval(() => {
            if (this.num === 0) {
              this.show = false
              clearInterval(this.timer)
            } else {
              this.num -= 1
            }
          }, 1000)
        })
      },
      
	  unmounted() {
        this.timer && clearInterval(this.timer)
      },
    })
  </script>
</body>

</html>

微信小程序

javascript 复制代码
wxml
<web-view src="{{src}}" bindmessage="bindmessage" />

js
Page({
  data: {
    src: '',
  },

  onLoad() {
    this.setData({
      src: `${将H5页面部署到服务器的地址}?file=${pdf文件路径}`
    })
  },

  bindmessage(e) {
    if (e.detail.data[0] === 'done') {
    // todo 处理同意后的逻辑
    }
  },
})
相关推荐
速易达网络1 小时前
RuoYi、Vue CLI 和 uni-app 结合构建跨端全家桶方案
javascript·vue.js·低代码
耶啵奶膘1 小时前
uniapp+firstUI——上传视频组件fui-upload-video
前端·javascript·uni-app
JoJo_Way1 小时前
LeetCode三数之和-js题解
javascript·算法·leetcode
视频砖家2 小时前
移动端Html5播放器按钮变小的问题解决方法
前端·javascript·viewport功能
lyj1689972 小时前
vue-i18n+vscode+vue 多语言使用
前端·vue.js·vscode
mg6683 小时前
微信小程序入门实例_____快速搭建一个快递查询小程序
微信小程序·小程序
小白变怪兽4 小时前
一、react18+项目初始化(vite)
前端·react.js
ai小鬼头4 小时前
AIStarter如何快速部署Stable Diffusion?**新手也能轻松上手的AI绘图
前端·后端·github
程序员柳4 小时前
基于微信小程序的校园二手交易平台、微信小程序校园二手商城源代码+数据库+使用说明,layui+微信小程序+Spring Boot
数据库·微信小程序·layui