微信小程序在线预览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>微信小程序在线预览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') returnthis.timer = setInterval(() => {if (this.num === 0) {this.show = falseclearInterval(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 处理同意后的逻辑}},
})
相关文章：
微信小程序在线预览PDF文件
需求：微信小程序在线预览PDF合同文件，加载完成后强制阅读10秒才可点击同意按钮 H5代码： <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" cont…...
Android 工厂模式增加Type-A功能测试
Android 工厂模式增加Type-A功能测试 收到客户需求想要增加Type-A测试项来验证Type-A功能，具体功能实现参照如下： /vendor/freeme/packages/apps/FreemeFactoryTest/src/com/freeme/factory/usb/TypeAUSB.java package com.freeme.factory.usb;i…...
Web攻防06_sqlmap的使用
文章目录 参考链接： SQLMAP简介支持五种不同的注入模式 数据猜解-库表列数据权限操作引出权限：引出文件：引出命令（执行命令）： 提交方法-POST&HEAD&JSONPost注入cookie注入注入请求头中（…...
C++模拟实现-----日期计算器（超详细解析，小白一看就会！）
目录 一、前言 二、日期类计算器 三、日期计算器的实现 🍎日期计算器各个接口的实现 🍐日期计算器的需求 🍉打印当前日期（并检查日期是否合理） 💦检查日期是否合理 💦日期类构造函数&#x…...
Oracle实现把B表某一字段更新到A表
1.使用SQL命令UPDATE语句。 2.使用MERGE语句。 3.使用TRIGGER触发器。 4.使用游标CURSOR和循环 使用游标和循环来将B表中的数据更新到A表中，从而实现了两个表数据的同步。例如下面的代码实现：...
CUMCM历年赛题汇总
题目来源： 全国大学生数学建模竞赛官网 注：题目和数据均可在官网下载 2021–2023年 年份题号题目2023A定日镜场的优化设计2023B多波束测线问题2023C蔬菜类商品的自动定价与补货决策2023D圈养湖羊的空间利用率2023E黄河水沙监测数据分析2022A波浪能最大…...
人间道－您到底做错了什么：正心径之您要逐渐去除外邪行为
过去的您或许在您自个身上付出，投入了巨大，重大的人力，物力，财力等各方面的重重的成本，但是呢，收获却微小的稀罕，微少的可怜啊。甚至于一个错误，就把您完全陷入到万丈深渊里面去了&a…...
Spring Boot拓展XML格式的请求和响应
在我们开发过程中，我们经常使用的参数绝大多少事HTML和JSON格式的请求和响应处理，但是我们在实际开发过程中，我们可能经历一些，比如对于XML格式的请求，我们在后端应该如何接收，并且如何将XML格式的参数变成…...
0045【Edabit ★☆☆☆☆☆】【字符数转整型】Return a String as an Integer
0045【Edabit ★☆☆☆☆☆】【字符数转整型】Return a String as an Integer language_fundamentals numbers strings Instructions Create a function that takes a string and returns it as an integer. Examples stringInt("6") // 6 stringInt("1000&q…...
数据库MySQL（六）：事务
事务 事务是一组操作的集合，它是一个不可分割的工作单位，事务会把所有的操作作为一个整体一起向系统提交或撤销操作请求，即这些操作要么同时成功，要么同时失败。 MySQL中默认事务是自动提交的，当执行完一条DML语句时…...
比较浮点数时，我被绊倒了
📢欢迎点赞 ：👍 收藏 ⭐留言 📝 如有错误敬请指正，赐人玫瑰，手留余香！📢本文作者：由webmote 原创📢作者格言：新的征程，我们面对的不是…...
JVM进阶(1)
一)JVM是如何运行的？ 1)在程序运行前先将JAVA代码转化成字节码文件也就是class文件，JVM需要通过类加载器将字节码以一定的方式加载到JVM的内存运行时数据区，将类的信息打包分块填充在运行时数据区； 2)但是字节码文件是JVM的一套指…...
【AICFD案例操作】汽车外气动分析
AICFD是由天洑软件自主研发的通用智能热流体仿真软件，用于高效解决能源动力、船舶海洋、电子设备和车辆运载等领域复杂的流动和传热问题。软件涵盖了从建模、仿真到结果处理完整仿真分析流程，帮助工业企业建立设计、仿真和优化相结合的一体化流程&#x…...
Hadoop 请求数据长度 Requested Data length 超过配置的最大值
一、问题 现象 Spark 任务速度变慢，也不失败。 DataNode 内存足够 CPU 负载不高 GC 时间也不长。 查看 DataNode 日志，发现有些日志出现很多 Netty RPC 超时。超时的 destination 是一个 NameNode 节点，然后查看 NameNode 节点的日志&…...
搜索与图论：染色法判定二分图
将所有点分成两个集合，使得所有边只出现在集合之间，就是二分图 二分图：一定不含有奇数个点数的环；可能包含长度为偶数的环， 不一定是连通图 染色可以使用1和2区分不同颜色，用0表示未染色 遍历所有点&…...
磁场设备主要有哪些
磁学是物理学最古老的研究领域之一，目前仍然充满了生机活力。对于磁性物理的科学研究、磁性材料相关的探索来说，磁场设备必不可少，因为在外加磁场的作用下，样品会表现出特殊的物理性质，并带来了巨大的应用前景…...
【wespeaker】模型ECAPA_TDNN介绍
本次主要介绍开源项目wespeaker模型介绍 1. 模型超参数 model_args: feat_dim: 80 embed_dim: 192 pooling_func: “ASTP” projection_args: project_type: “softmax” # add_margin, arc_margin, sphere, softmax scale: 32.0 easy_margin: False 2. 模型结构 2.1 Layer…...
GPT技术的广泛使用
GPT技术的广泛使用确实引发了一些关于其潜在影响的讨论，包括可能导致某些职业失业以及对一些互联网公司构成竞争压力的问题。然而，这个问题涉及到多个方面，而且不容易一概而论。 潜在影响： 自动化任务： GPT等自然语言…...
银河麒麟V10安装MySQL8.0.28并实现远程访问
参考资料： 银河麒麟V10安装MySQL8.0.28并实现远程访问-数据库运维技术服务 银河麒麟高级服务器操作系统V10安装mysql数据库_麒麟v10安装mysql-CSDN博客...
[AUTOSAR][诊断管理][ECU][$27] 安全访问
文章目录 一、简介$27服务有何作用，为什么要有27服务呢？功能描述应用场景安全解锁基本原理服务请求服务响应Verify Key负响应NRC支持二、常见Bug大揭秘三、示例代码uds27_security_access.c一、简介 $27服务有何作用，为什么要有27服务呢？ 功能描述 根据ISO14119-1标准中…...
网络编程（Modbus进阶）
思维导图 Modbus RTU（先学一点理论） 概念 Modbus RTU 是工业自动化领域 最广泛应用的串行通信协议，由 Modicon 公司（现施耐德电气）于 1979 年推出。它以 高效率、强健性、易实现的特点成为工业控制系统的通信标准。 包…...
19c补丁后oracle属主变化，导致不能识别磁盘组
补丁后服务器重启，数据库再次无法启动 ORA01017: invalid username/password; logon denied Oracle 19c 在打上 19.23 或以上补丁版本后，存在与用户组权限相关的问题。具体表现为，Oracle 实例的运行用户（oracle）和集…...
[2025CVPR]DeepVideo-R1：基于难度感知回归GRPO的视频强化微调框架详解
突破视频大语言模型推理瓶颈，在多个视频基准上实现SOTA性能 一、核心问题与创新亮点 1.1 GRPO在视频任务中的两大挑战 安全措施依赖问题 GRPO使用min和clip函数限制策略更新幅度，导致： 梯度抑制：当新旧策略差异过大时梯度消失收敛困难：策略无法充分优化# 传统GRPO的梯…...
C++初阶-list的底层
目录 1.std::list实现的所有代码 2.list的简单介绍 2.1实现list的类 2.2_list_iterator的实现 2.2.1_list_iterator实现的原因和好处 2.2.2_list_iterator实现 2.3_list_node的实现 2.3.1. 避免递归的模板依赖 2.3.2. 内存布局一致性 2.3.3. 类型安全的替代方案 2.3.…...
将对透视变换后的图像使用Otsu进行阈值化，来分离黑色和白色像素。这句话中的Otsu是什么意思？
Otsu 是一种自动阈值化方法，用于将图像分割为前景和背景。它通过最小化图像的类内方差或等价地最大化类间方差来选择最佳阈值。这种方法特别适用于图像的二值化处理，能够自动确定一个阈值，将图像中的像素分为黑色和白色两类。 Otsu 方法的原…...
【2025年】解决Burpsuite抓不到https包的问题
环境：windows11 burpsuite:2025.5 在抓取https网站时，burpsuite抓取不到https数据包，只显示： 解决该问题只需如下三个步骤： 1、浏览器中访问 http://burp 2、下载 CA certificate 证书 3、在设置--隐私与安全--…...
Spring Boot面试题精选汇总
🤟致敬读者 🟩感谢阅读🟦笑口常开🟪生日快乐⬛早点睡觉 📘博主相关 🟧博主信息🟨博客首页🟫专栏推荐🟥活动信息 文章目录 Spring Boot面试题精选汇总⚙️ **一、核心概…...
pikachu靶场通关笔记22-1 SQL注入05-1-insert注入(报错法)
目录 一、SQL注入 二、insert注入 三、报错型注入 四、updatexml函数 五、源码审计 六、insert渗透实战 1、渗透准备 2、获取数据库名database 3、获取表名table 4、获取列名column 5、获取字段 本系列为通过《pikachu靶场通关笔记》的SQL注入关卡(共10关࿰…...
推荐 github 项目:GeminiImageApp(图片生成方向，可以做一定的素材)
推荐 github 项目:GeminiImageApp(图片生成方向，可以做一定的素材) 这个项目能干嘛? 使用 gemini 2.0 的 api 和 google 其他的 api 来做衍生处理 简化和优化了文生图和图生图的行为(我的最主要) 并且有一些目标检测和切割(我用不到) 视频和 imagefx 因为没 a…...
七、数据库的完整性
七、数据库的完整性 主要内容 7.1 数据库的完整性概述 7.2 实体完整性 7.3 参照完整性 7.4 用户定义的完整性 7.5 触发器 7.6 SQL Server中数据库完整性的实现 7.7 小结 7.1 数据库的完整性概述 数据库完整性的含义 正确性 指数据的合法性 有效性 指数据是否属于所定…...