微信小程序在线预览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标准中…...
Cursor实现用excel数据填充word模版的方法
cursor主页：https://www.cursor.com/ 任务目标：把excel格式的数据里的单元格，按照某一个固定模版填充到word中 文章目录 注意事项逐步生成程序1. 确定格式2. 调试程序 注意事项 直接给一个excel文件和最终呈现的word文件的示例，…...
日语学习-日语知识点小记-构建基础-JLPT-N4阶段（33）：にする
日语学习-日语知识点小记-构建基础-JLPT-N4阶段（33）：にする 1、前言（1）情况说明（2）工程师的信仰2、知识点（1） にする1，接续：名词＋にする2，接续：疑问词＋にする3，（A）は（B）にする。（2）復習：（1）复习句子（2）ために ＆ ように（３）そう（４）にする3、…...
【力扣数据库知识手册笔记】索引
索引 索引的优缺点 优点1. 通过创建唯一性索引，可以保证数据库表中每一行数据的唯一性。2. 可以加快数据的检索速度（创建索引的主要原因）。3. 可以加速表和表之间的连接，实现数据的参考完整性。4. 可以在查询过程中，…...
uni-app学习笔记二十二---使用vite.config.js全局导入常用依赖
在前面的练习中，每个页面需要使用ref，onShow等生命周期钩子函数时都需要像下面这样导入 import {onMounted, ref} from "vue" 如果不想每个页面都导入，需要使用node.js命令npm安装unplugin-auto-import npm install unplugin-au…...
[ICLR 2022]How Much Can CLIP Benefit Vision-and-Language Tasks?
论文网址：pdf 英文是纯手打的！论文原文的summarizing and paraphrasing。可能会出现难以避免的拼写错误和语法错误，若有发现欢迎评论指正！文章偏向于笔记，谨慎食用 目录 1. 心得 2. 论文逐段精读 2.1. Abstract 2…...
深度学习习题2
1.如果增加神经网络的宽度，精确度会增加到一个特定阈值后，便开始降低。造成这一现象的可能原因是什么？ A、即使增加卷积核的数量，只有少部分的核会被用作预测 B、当卷积核数量增加时，神经网络的预测能力会降低 C、当卷…...
在QWebEngineView上实现鼠标、触摸等事件捕获的解决方案
这个问题我看其他博主也写了，要么要会员、要么写的乱七八糟。这里我整理一下，把问题说清楚并且给出代码，拿去用就行，照着葫芦画瓢。 问题 在继承QWebEngineView后，重写mousePressEvent或event函数无法捕获鼠标按下事…...
代码随想录刷题day30
1、零钱兑换II 给你一个整数数组 coins 表示不同面额的硬币，另给一个整数 amount 表示总金额。 请你计算并返回可以凑成总金额的硬币组合数。如果任何硬币组合都无法凑出总金额，返回 0 。 假设每一种面额的硬币有无限个。 题目数据保证结果符合 32 位带…...
【Go语言基础【12】】指针：声明、取地址、解引用
文章目录 零、概述：指针 vs. 引用（类比其他语言）一、指针基础概念二、指针声明与初始化三、指针操作符1. &：取地址（拿到内存地址）2. *：解引用（拿到值） 四、空指针&am…...
MySQL 8.0 事务全面讲解
以下是一个结合两次回答的 MySQL 8.0 事务全面讲解，涵盖了事务的核心概念、操作示例、失败回滚、隔离级别、事务性 DDL 和 XA 事务等内容，并修正了查看隔离级别的命令。 MySQL 8.0 事务全面讲解 一、事务的核心概念（ACID） 事务是…...