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

需求：微信小程序在线预览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>微信小程序在线预览PDFtitle>
  <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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100

微信小程序：

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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

相关阅读:
2023CANN训练营第二季——Ascend C算子开发（入门）——基础概念
NodeJS开发环境搭建
Java学习笔记——接口
怎样做一个好的汇报
涂鸦智能携手亚马逊云科技共建“联合安全实验室” 为IoT发展护航
一文拿捏线程和线程池的创建方式
15. 三数之和
KubeSphere v3.4.0 部署K8S Docker + Prometheus + grafana
Video generation models as world simulators-视频生成模型作为世界模拟器
数据可视化图表之面积折线图

原文地址：https://blog.csdn.net/weixin_46719229/article/details/134033362