当前位置：首页 > article >正文

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

article 2025/3/5 0:11:41

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

H5代码：

<!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>

微信小程序：

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 处理同意后的逻辑
    }
  },
})