微信小程序在线预览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 处理同意后的逻辑
    }
  },
})
相关推荐
Sapphire~17 分钟前
重学前端003 --- CSS 颜色
前端·css
慧一居士17 分钟前
CSS和CSS3区别对比
前端·css3
我血条子呢17 分钟前
动态组件和插槽
前端·javascript·vue.js
中微子26 分钟前
RESTful架构与前后端路由演进:构建现代化Web应用的核心规范
前端
前端付豪26 分钟前
13、表格系统架构:列配置、嵌套数据、复杂交互
前端·javascript·架构
南屿im32 分钟前
发布订阅模式和观察者模式傻傻分不清?一文搞懂两大设计模式
前端·javascript
I_have_a_lemon33 分钟前
前端、产品、设计师神器推荐——Onlook
前端·cursor
前端小巷子33 分钟前
深入解析CSRF攻击
前端·安全·面试
JustHappy34 分钟前
SPA?MPA?有啥关系?有啥区别?聊一聊页面形态 or 路由模式
前端·javascript·架构
每天开心34 分钟前
🧙‍♂️闭包应用场景之--防抖和节流
前端·javascript·面试