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

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

news 2026/2/10 2:03:51

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

树莓派超全系列教程文档--(62)使用rpicam-app通过网络流式传输视频

使用rpicam-app通过网络流式传输视频 使用 rpicam-app 通过网络流式传输视频UDPTCPRTSPlibavGStreamerRTPlibcamerasrc GStreamer 元素 文章来源&#xff1a; http://raspberry.dns8844.cn/documentation 原文网址 使用 rpicam-app 通过网络流式传输视频 本节介绍来自 rpica…...

编程新知 2025/11/5 13:03:58

2024年赣州旅游投资集团社会招聘笔试真

2024年赣州旅游投资集团社会招聘笔试真 题 ( 满 分 1 0 0 分 时 间 1 2 0 分 钟 ) 一、单选题(每题只有一个正确答案，答错、不答或多答均不得分) 1.纪要的特点不包括()。 A.概括重点 B.指导传达 C. 客观纪实 D.有言必录 【答案】: D 2.1864年，()预言了电磁波的存在，并指出…...

编程新知 2025/12/10 4:08:53

Opencv中的addweighted函数

一.addweighted函数作用 addweighted&#xff08;&#xff09;是OpenCV库中用于图像处理的函数&#xff0c;主要功能是将两个输入图像&#xff08;尺寸和类型相同&#xff09;按照指定的权重进行加权叠加&#xff08;图像融合&#xff09;&#xff0c;并添加一个标量值&#x…...

编程新知 2026/2/1 1:50:03

学校招生小程序源码介绍

基于ThinkPHPFastAdminUniApp开发的学校招生小程序源码&#xff0c;专为学校招生场景量身打造&#xff0c;功能实用且操作便捷。 从技术架构来看&#xff0c;ThinkPHP提供稳定可靠的后台服务&#xff0c;FastAdmin加速开发流程&#xff0c;UniApp则保障小程序在多端有良好的兼…...

编程新知 2026/1/26 14:19:52

华为OD机试-食堂供餐-二分法

import java.util.Arrays; import java.util.Scanner;public class DemoTest3 {public static void main(String[] args) {Scanner in new Scanner(System.in);// 注意 hasNext 和 hasNextLine 的区别while (in.hasNextLine()) { // 注意 while 处理多个 caseint a in.nextIn…...

编程新知 2026/1/28 11:11:03

python爬虫：Newspaper3k 的详细使用（好用的新闻网站文章抓取和解析的Python库）

更多内容请见： 爬虫和逆向教程-专栏介绍和目录 文章目录 一、Newspaper3k 概述1.1 Newspaper3k 介绍1.2 主要功能1.3 典型应用场景1.4 安装二、基本用法2.2 提取单篇文章的内容2.2 处理多篇文档三、高级选项3.1 自定义配置3.2 分析文章情感四、实战案例4.1 构建新闻摘要聚合器…...

编程新知 2025/10/25 7:51:48

【JavaSE】绘图与事件入门学习笔记

-Java绘图坐标体系 坐标体系-介绍 坐标原点位于左上角&#xff0c;以像素为单位。 在Java坐标系中,第一个是x坐标,表示当前位置为水平方向&#xff0c;距离坐标原点x个像素;第二个是y坐标&#xff0c;表示当前位置为垂直方向&#xff0c;距离坐标原点y个像素。 坐标体系-像素 …...

编程新知 2025/12/19 20:46:15

大语言模型（LLM）中的KV缓存压缩与动态稀疏注意力机制设计

随着大语言模型&#xff08;LLM&#xff09;参数规模的增长&#xff0c;推理阶段的内存占用和计算复杂度成为核心挑战。传统注意力机制的计算复杂度随序列长度呈二次方增长&#xff0c;而KV缓存的内存消耗可能高达数十GB&#xff08;例如Llama2-7B处理100K token时需50GB内存&a…...

编程新知 2026/1/28 1:40:03

A2A JS SDK 完整教程：快速入门指南

目录 什么是 A2A JS SDK?A2A JS 安装与设置A2A JS 核心概念创建你的第一个 A2A JS 代理A2A JS 服务端开发A2A JS 客户端使用A2A JS 高级特性A2A JS 最佳实践A2A JS 故障排除 什么是 A2A JS SDK? A2A JS SDK 是一个专为 JavaScript/TypeScript 开发者设计的强大库&#xff…...

编程新知 2025/12/12 8:42:24

GitHub 趋势日报 (2025年06月06日)

&#x1f4ca; 由 TrendForge 系统生成 | &#x1f310; https://trendforge.devlive.org/ &#x1f310; 本日报中的项目描述已自动翻译为中文 &#x1f4c8; 今日获星趋势图 今日获星趋势图 590 cognee 551 onlook 399 project-based-learning 348 build-your-own-x 320 ne…...

编程新知 2026/1/29 5:21:31