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

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

news 2025/9/17 14:44:13

需求：微信小程序在线预览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文件

需求&#xff1a;微信小程序在线预览PDF合同文件&#xff0c;加载完成后强制阅读10秒才可点击同意按钮 H5代码&#xff1a; <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" cont…...

编程日记 2023/10/28 16:26:42

Android 工厂模式增加Type-A功能测试

Android 工厂模式增加Type-A功能测试 收到客户需求想要增加Type-A测试项来验证Type-A功能&#xff0c;具体功能实现参照如下&#xff1a; /vendor/freeme/packages/apps/FreemeFactoryTest/src/com/freeme/factory/usb/TypeAUSB.java package com.freeme.factory.usb;i…...

编程日记 2023/10/28 16:25:42

Web攻防06_sqlmap的使用

文章目录 参考链接&#xff1a; SQLMAP简介支持五种不同的注入模式 数据猜解-库表列数据权限操作引出权限&#xff1a;引出文件&#xff1a;引出命令&#xff08;执行命令&#xff09;&#xff1a; 提交方法-POST&HEAD&JSONPost注入cookie注入注入请求头中&#xff08;…...

编程日记 2023/10/28 16:24:40

C++模拟实现-----日期计算器（超详细解析，小白一看就会！）

目录 一、前言 二、日期类计算器 三、日期计算器的实现 &#x1f34e;日期计算器各个接口的实现 &#x1f350;日期计算器的需求 &#x1f349;打印当前日期&#xff08;并检查日期是否合理&#xff09; &#x1f4a6;检查日期是否合理 &#x1f4a6;日期类构造函数&#x…...

编程日记 2023/10/28 16:23:39

Oracle实现把B表某一字段更新到A表

1.使用SQL命令UPDATE语句。 2.使用MERGE语句。 3.使用TRIGGER触发器。 4.使用游标CURSOR和循环 使用游标和循环来将B表中的数据更新到A表中&#xff0c;从而实现了两个表数据的同步。例如下面的代码实现&#xff1a;...

编程日记 2023/10/28 16:22:38

CUMCM历年赛题汇总

题目来源&#xff1a; 全国大学生数学建模竞赛官网 注&#xff1a;题目和数据均可在官网下载 2021–2023年 年份题号题目2023A定日镜场的优化设计2023B多波束测线问题2023C蔬菜类商品的自动定价与补货决策2023D圈养湖羊的空间利用率2023E黄河水沙监测数据分析2022A波浪能最大…...

编程日记 2023/10/28 16:21:36

人间道－您到底做错了什么：正心径之您要逐渐去除外邪行为

过去的您或许在您自个身上付出&#xff0c;投入了巨大&#xff0c;重大的人力&#xff0c;物力&#xff0c;财力等各方面的重重的成本&#xff0c;但是呢&#xff0c;收获却微小的稀罕&#xff0c;微少的可怜啊。甚至于一个错误&#xff0c;就把您完全陷入到万丈深渊里面去了&a…...

编程日记 2023/10/28 16:20:33

Spring Boot拓展XML格式的请求和响应

在我们开发过程中&#xff0c;我们经常使用的参数绝大多少事HTML和JSON格式的请求和响应处理&#xff0c;但是我们在实际开发过程中&#xff0c;我们可能经历一些&#xff0c;比如对于XML格式的请求&#xff0c;我们在后端应该如何接收&#xff0c;并且如何将XML格式的参数变成…...

编程日记 2023/10/28 16:19:32

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…...

编程日记 2023/10/28 16:18:31

数据库MySQL（六）：事务

事务 事务是一组操作的集合&#xff0c;它是一个不可分割的工作单位&#xff0c;事务会把所有的操作作为一个整体一起向系统提交或撤销操作请求&#xff0c;即这些操作要么同时成功&#xff0c;要么同时失败。 MySQL中默认事务是自动提交的&#xff0c;当执行完一条DML语句时…...

编程日记 2023/10/28 16:17:30

比较浮点数时，我被绊倒了

&#x1f4e2;欢迎点赞 &#xff1a;&#x1f44d; 收藏 ⭐留言 &#x1f4dd; 如有错误敬请指正&#xff0c;赐人玫瑰&#xff0c;手留余香&#xff01;&#x1f4e2;本文作者&#xff1a;由webmote 原创&#x1f4e2;作者格言&#xff1a;新的征程&#xff0c;我们面对的不是…...

编程日记 2023/10/28 16:16:30

JVM进阶(1)

一)JVM是如何运行的&#xff1f; 1)在程序运行前先将JAVA代码转化成字节码文件也就是class文件&#xff0c;JVM需要通过类加载器将字节码以一定的方式加载到JVM的内存运行时数据区&#xff0c;将类的信息打包分块填充在运行时数据区&#xff1b; 2)但是字节码文件是JVM的一套指…...

编程日记 2023/10/28 16:15:28

【AICFD案例操作】汽车外气动分析

AICFD是由天洑软件自主研发的通用智能热流体仿真软件&#xff0c;用于高效解决能源动力、船舶海洋、电子设备和车辆运载等领域复杂的流动和传热问题。软件涵盖了从建模、仿真到结果处理完整仿真分析流程&#xff0c;帮助工业企业建立设计、仿真和优化相结合的一体化流程&#x…...

编程日记 2023/10/28 16:14:25

Hadoop 请求数据长度 Requested Data length 超过配置的最大值

一、问题 现象 Spark 任务速度变慢&#xff0c;也不失败。 DataNode 内存足够 CPU 负载不高 GC 时间也不长。 查看 DataNode 日志&#xff0c;发现有些日志出现很多 Netty RPC 超时。超时的 destination 是一个 NameNode 节点&#xff0c;然后查看 NameNode 节点的日志&…...

编程日记 2023/10/28 16:13:24

搜索与图论：染色法判定二分图

将所有点分成两个集合&#xff0c;使得所有边只出现在集合之间&#xff0c;就是二分图 二分图&#xff1a;一定不含有奇数个点数的环&#xff1b;可能包含长度为偶数的环&#xff0c; 不一定是连通图 染色可以使用1和2区分不同颜色&#xff0c;用0表示未染色 遍历所有点&…...

编程日记 2023/10/28 16:12:23

磁场设备主要有哪些

磁学是物理学最古老的研究领域之一&#xff0c;目前仍然充满了生机活力。对于磁性物理的科学研究、磁性材料相关的探索来说&#xff0c;磁场设备必不可少&#xff0c;因为在外加磁场的作用下&#xff0c;样品会表现出特殊的物理性质&#xff0c;并带来了巨大的应用前景&#xf…...

编程日记 2023/10/28 16:11:21

【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…...

编程日记 2023/10/28 16:10:21

GPT技术的广泛使用

GPT技术的广泛使用确实引发了一些关于其潜在影响的讨论&#xff0c;包括可能导致某些职业失业以及对一些互联网公司构成竞争压力的问题。然而&#xff0c;这个问题涉及到多个方面&#xff0c;而且不容易一概而论。 潜在影响&#xff1a; 自动化任务&#xff1a; GPT等自然语言…...

编程日记 2023/10/28 16:09:20

银河麒麟V10安装MySQL8.0.28并实现远程访问

参考资料&#xff1a; 银河麒麟V10安装MySQL8.0.28并实现远程访问-数据库运维技术服务 银河麒麟高级服务器操作系统V10安装mysql数据库_麒麟v10安装mysql-CSDN博客...

编程日记 2023/10/28 16:08:19

[AUTOSAR][诊断管理][ECU][$27] 安全访问

文章目录 一、简介$27服务有何作用，为什么要有27服务呢？功能描述应用场景安全解锁基本原理服务请求服务响应Verify Key负响应NRC支持二、常见Bug大揭秘三、示例代码uds27_security_access.c一、简介 $27服务有何作用，为什么要有27服务呢？ 功能描述 根据ISO14119-1标准中…...

编程日记 2023/10/28 16:06:16

未来机器人的大脑：如何用神经网络模拟器实现更智能的决策？

编辑&#xff1a;陈萍萍的公主一点人工一点智能 未来机器人的大脑&#xff1a;如何用神经网络模拟器实现更智能的决策&#xff1f;RWM通过双自回归机制有效解决了复合误差、部分可观测性和随机动力学等关键挑战&#xff0c;在不依赖领域特定归纳偏见的条件下实现了卓越的预测准…...

编程新知 2025/9/17 11:41:11

变量 varablie 声明- Rust 变量 let mut 声明与 C/C++ 变量声明对比分析

一、变量声明设计&#xff1a;let 与 mut 的哲学解析 Rust 采用 let 声明变量并通过 mut 显式标记可变性&#xff0c;这种设计体现了语言的核心哲学。以下是深度解析&#xff1a; 1.1 设计理念剖析 安全优先原则&#xff1a;默认不可变强制开发者明确声明意图 let x 5; …...

编程新知 2025/7/23 4:47:55

【人工智能】神经网络的优化器optimizer（二）：Adagrad自适应学习率优化器

一.自适应梯度算法Adagrad概述 Adagrad&#xff08;Adaptive Gradient Algorithm&#xff09;是一种自适应学习率的优化算法&#xff0c;由Duchi等人在2011年提出。其核心思想是针对不同参数自动调整学习率&#xff0c;适合处理稀疏数据和不同参数梯度差异较大的场景。Adagrad通…...

编程新知 2025/9/17 9:42:59

oracle与MySQL数据库之间数据同步的技术要点

Oracle与MySQL数据库之间的数据同步是一个涉及多个技术要点的复杂任务。由于Oracle和MySQL的架构差异&#xff0c;它们的数据同步要求既要保持数据的准确性和一致性&#xff0c;又要处理好性能问题。以下是一些主要的技术要点&#xff1a; 数据结构差异 数据类型差异&#xff…...

编程新知 2025/8/12 3:03:43

C++中string流知识详解和示例

一、概览与类体系 C 提供三种基于内存字符串的流&#xff0c;定义在 <sstream> 中&#xff1a; std::istringstream&#xff1a;输入流&#xff0c;从已有字符串中读取并解析。std::ostringstream&#xff1a;输出流&#xff0c;向内部缓冲区写入内容&#xff0c;最终取…...

编程新知 2025/8/15 2:04:44

汇编常见指令

汇编常见指令 一、数据传送指令 指令功能示例说明MOV数据传送MOV EAX, 10将立即数 10 送入 EAXMOV [EBX], EAX将 EAX 值存入 EBX 指向的内存LEA加载有效地址LEA EAX, [EBX4]将 EBX4 的地址存入 EAX&#xff08;不访问内存&#xff09;XCHG交换数据XCHG EAX, EBX交换 EAX 和 EB…...

编程新知 2025/7/20 13:23:05

SpringTask-03.入门案例

一.入门案例 启动类&#xff1a; package com.sky;import lombok.extern.slf4j.Slf4j; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; import org.springframework.cache.annotation.EnableCach…...

编程新知 2025/9/17 12:04:36

css3笔记 （1） 自用

outline: none 用于移除元素获得焦点时默认的轮廓线 broder:0 用于移除边框 font-size&#xff1a;0 用于设置字体不显示 list-style: none 消除<li> 标签默认样式 margin: xx auto 版心居中 width:100% 通栏 vertical-align 作用于行内元素 / 表格单元格&#xff…...

编程新知 2025/9/6 3:33:57

优选算法第十二讲：队列 + 宽搜 优先级队列

优选算法第十二讲&#xff1a;队列 宽搜 && 优先级队列 1.N叉树的层序遍历2.二叉树的锯齿型层序遍历3.二叉树最大宽度4.在每个树行中找最大值5.优先级队列 -- 最后一块石头的重量6.数据流中的第K大元素7.前K个高频单词8.数据流的中位数 1.N叉树的层序遍历 2.二叉树的锯…...

编程新知 2025/9/7 8:51:06

html-＜abbr＞ 缩写或首字母缩略词

定义与作用 <abbr> 标签用于表示缩写或首字母缩略词&#xff0c;它可以帮助用户更好地理解缩写的含义&#xff0c;尤其是对于那些不熟悉该缩写的用户。 title 属性的内容提供了缩写的详细说明。当用户将鼠标悬停在缩写上时&#xff0c;会显示一个提示框。 示例&#x…...

编程新知 2025/9/9 10:10:28