html2canvas和jspdf导出pdf，每个页面模块占一页，在pdf中垂直居中显示
需求：html页面转换pdf，页面有多个模块，页面中有文本、echarts、表格等模块，一个模块占一页，因为模块高度不够，所以需要垂直居中
通过html2canvas和jspdf实现，html2canvas用于将页面元素生成canvas，jspdf用于将页面元素导出pdf
效果：
以下代码可以直接运行，背景图需要自行加一下
注意点：背景图片不支持跨域图片，非要使用跨域图片。可以通过js转成base64，使用base64设置背景图片
图片需要在服务器端才能正常导出，可以使用vscode的live-server插件
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><metahttp-equiv="X-UA-Compatible"content="IE=edge" /><metaname="viewport"content="width=device-width, initial-scale=1.0" /><script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.4.1/echarts.min.js"></script><title>Document</title></head><style>* {margin: 0;padding: 0;}.module1,.module2 {background-image: url('../bg.jpg');background-repeat: no-repeat;background-size: 100% 100%;height: 100vh;}h1 {text-align: center;padding-top: 30vh;margin-bottom: 10vh;font-size: 100px;letter-spacing: 10px;font-weight: bold;}p {text-align: center;margin-top: 30px;font-size: 50px;font-weight: bold;letter-spacing: 10px;}button {display: block;margin: 0 auto;margin-top: 5vh;width: 20vh;height: 10vh;outline: none;}.module2 h1 {padding-top: 30px;font-size: 80px;margin-bottom: 40px;}.module2 p {margin-top: 10px;font-size: 40px;}.echarts {width: 100%;height: 70vh;}table {table-layout: fixed;word-break: break-all;width: 99%;margin: 0 auto;}table th {padding: 10px 20px;text-align: center;}table td {padding: 10px 20px;text-align: center;}.one {width: 300px;}</style><body><div class="module1 module"><h1>你好世界</h1><p>2月3日</p><button onclick="downloadPDf()">下载pdf</button></div><div class="module2 module"><h1>echarts</h1><div class="echarts"></div></div><div class="module2 module"><h1>文本</h1><p>本网站上的图像不能用于以下目的。如有违反，将承担损害赔偿责任，敬请遵守。 1、不能用图像本身或处理过的图像的二次分发 2、不能用作服务标记或商标 3、不能使用违法、虚假、诽谤、侵权等违反公序良俗的内容。 4、不能用作色情图片 5、不能用于成人媒体、娱乐相关（包括歌舞俱乐部等）和约会服务6、不能用于互联网异性恋介绍业务 7、不能用在消费金融中的应用 8、不能欺骗，例如使用人的照片通过各种软件渠道去骗取任性与钱财 9、不能用照片损坏国家形象和利益</p></div><div class="module2 module"><h1>表格</h1><tableborder="1"cellspacing="0"cellpadding="0"border="1"><tr><th class="one">故障统计</th><th>1月27日</th><th>1月28日</th><th>1月29日</th><th>1月30日</th><th>1月31日</th><th>2月1日</th><th>2月2日</th><th>周累计</th></tr><tr><td class="one">风险</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr><tr><td class="one">服务</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr></table></div></body><script>const myChart = echarts.init(document.querySelector('.echarts'))// 绘制图表myChart.setOption({xAxis: {data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],},yAxis: {},series: [{name: '销量',type: 'bar',data: [5, 20, 36, 10, 10, 20],},],})const jsPDF = jspdf.jsPDFconst downloadPDf = async dom => {// 对于一些不想显示在pdf上的元素，设置display：none，比如隐藏所有buttonconst buttons = document.querySelectorAll('button')buttons.forEach(item => {item.style.display = 'none'})// 获取所有需要生成pdf的模块const modules = document.querySelectorAll('.module')if (!modules.length) return// a4纸固定宽高const a4Width = 595.28const a4Height = 841.89const pdf = new jsPDF('p', 'pt')// 生成所有pdf页async function setPdfPage() {for (let i = 0; i < modules.length; i++) {const item = modules[i]const canvas = await html2canvas(item)const contentWidth = canvas.widthconst contentHeight = canvas.heightconst pageData = canvas.toDataURL('image/jpeg', 1) // 第二个参数为图片质量，1为最高质量let imgHeight = (a4Width / contentWidth) * contentHeight // 根据a4纸比例，计算出图片的高度const marginY = (a4Height - imgHeight) / 2 // 计算出图片的上下边距// 第三个参数图片x轴位置，第四个参数图片y轴位置，第五个参数图片宽度，第六个参数图片高度pdf.addImage(pageData, 'JPEG', 0, marginY > 0 ? marginY : 0, a4Width, imgHeight > a4Height ? a4Height : imgHeight)// 最后一个模块不需要再新增空白页if (i < modules.length - 1) {pdf.addPage()}}}await setPdfPage()pdf.save('TestReport.pdf') // 导出pdf// 还原元素buttons.forEach(item => {item.style.display = 'block'})}</script>
</html>相关文章：
html2canvas和jspdf导出pdf，每个页面模块占一页，在pdf中垂直居中显示
需求：html页面转换pdf，页面有多个模块，页面中有文本、echarts、表格等模块，一个模块占一页，因为模块高度不够，所以需要垂直居中 通过html2canvas和jspdf实现，html2canvas用于将页面元素生成canv…...
数学小课堂：集合论的公理化过程（用构建公理化体系的思路来构建自然数）
文章目录 引言I 数的理论1.1 构建自然数1.2 定义整数/有理数/实数/虚数/复数II 自然数和集合的关系1.3 集合1.2 构建自然数III 线性规划问题(线性代数+最优化)3.1 题目3.2 答案引言 数学是一个公理化的体系，是数学对其它知识体系有启发的地方。 数学的思维方式： 不轻易相信…...
3.10多线程
一.常见锁策略1.悲观锁 vs乐观锁体现在处理锁冲突的态度①悲观锁:预期锁冲突的概率高所以做的工作更多,付出的成本更多,更低效②乐观锁:预期锁冲突的概率低所以做的工作少,付出的成本更低,更搞笑2.读写锁 vs 普通的互斥锁①普通的互斥锁,只有两个操作 加锁和解锁只有两个线程针…...
缓存双写一致性之更新策略探讨
问题由来 数据redis和MySQL都要有一份，如何保证两边的一致性。 如果redis中有数据：需要和数据库中的值相同如果redis中没有数据：数据库中的值是最新值，且准备会写redis 缓存操作分类 自读缓存读写缓存： ࿰…...
scala高级函数快速掌握
scala高级函数一.函数至简原则二.匿名的简化原则三.高阶函数四.柯里化和闭包五.递归六.抽象控制七.惰性加载🔥函数对于scala（函数式编程语言）来说非常重要，大家一定要学明白，加油！！！…...
手写模拟SpringMvc源码
MVC框架MVC是一种设计模式（设计模式就是日常开发中编写代码的一种好的方法和经验的总结）。模型（model）-视图（view）-控制器（controller），三层架构的设计模式。用于实现前端…...
五分钟了解JumpServer V2.* 与 v3 的区别
一、升级注意项 1、梳理数据。JumpServer V3 去除了系统用户功能，将资产与资产直接绑定。当一个资产名下有多个同名账号，例如两个root用户时，升级后会自动合并最后一个root，不会同步其他root用户。升级前需保证每一个资产只拥有一…...
用友开发者中心应用构建实践指引！
基于 iuap 技术底座，用友开发者中心致力于为企业和开发者提供一站式技术服务，让人人都能轻松构建企业级应用。 本文以人力资源领域常用的应聘人员信息登记与分析功能为例，详细介绍如何在用友开发者中心使用 YonBuilder 进行应用构建。 功能…...
snap使用interface:content的基础例子
snap做包还在学习阶段，官网文档可查看：The content interface | Snapcraft documentation该例子由publiser和consumer两部分组成，一个提供一个只读的数据区，一个来进行读取其中的信息，这样就完成了content的交互。publ…...
蓝桥杯刷题第七天
第一题：三角回文数问题描述对于正整数 n, 如果存在正整数 k 使得2n123⋯k2k(k1), 则 n 称为三角数。例如, 66066 是一个三角数, 因为 66066123⋯363。如果一个整数从左到右读出所有数位上的数字, 与从右到左读出所有数位 上的数字是一样的, 则称这个数为回文数。例如…...
FinOps首次超越安全成为企业头等大事｜云计算趋势报告
随着云计算在过去十年中的广泛应用，云计算用户所面临的一个持续不变的趋势是：安全一直是用户面临的首要挑战。然而，这种情况正在发生转变。 知名IT软件企业 Flexera 对云计算决策者进行年度调研已经持续12年，而今年安全问题首次…...
【深度强化学习】(3) Policy Gradients 模型解析，附Pytorch完整代码
大家好，今天和各位分享一下基于策略的深度强化学习方法，策略梯度法是对策略进行建模，然后通过梯度上升更新策略网络的参数。我们使用了 OpenAI 的 gym 库，基于策略梯度法完成了一个小游戏。完整代码可以从我的 GitHub 中获得&…...
Windows基于Nginx搭建RTMP流媒体服务器（附带所有组件下载地址及验证方法）
RTMP服务时常用于直播时提供拉流推流传输数据的一种服务。前段时间由于朋友想搭建一套直播时提供稳定数据传输的服务器，所以就研究了一下如何搭建及使用。 1、下载nginx 首先我们要知道一般nginx不能直接配置rtmp服务，在Windows系统上需要特殊nginx版本…...
交流电机驱动器中的隔离电压感应
汽车和工业终端设备，如电机驱动器、串式逆变器和机载充电器，在高电压下运行，不能安全地与人直接互动。隔离电压测量通过保护人类免受高压电路执行一个功能的影响，有助于优化操作和确保使用的安全性。 设计用于高性能，隔…...
爬取知乎问题答案
参考博客：基于Python知乎回答爬虫 jieba关键字统计可视化_知乎爬虫搜索关键词_菠萝柚王子的博客-CSDN博客 1、安装依赖包 import numpy import requests import certifi from PIL import Image from lxml import etree import jieba from wordcloud import WordClo…...
通用智能理论
将智能定义为解决矛盾的能力，用解决矛盾的概率提升来评估智能程度，以此为基础推导智能原理，建立一种新的通用智能理论。 1 前言 通用人工智能（Artificial General Intelligence）是人类长久以来的梦想。经历了一次次挫败…...
保姆级使用PyTorch训练与评估自己的MixMIM网络教程
文章目录前言0. 环境搭建&快速开始1. 数据集制作1.1 标签文件制作1.2 数据集划分1.3 数据集信息文件制作2. 修改参数文件3. 训练4. 评估5. 其他教程前言 项目地址：https://github.com/Fafa-DL/Awesome-Backbones 操作教程：https://www.bilibili.co…...
《百万在线 大型游戏服务端开发》前两章概念笔记
第1章 从角色走路说起 游戏网络通信的流程则是服务端先开启监听，等待客户端的连接，然后交互操作，最后断开。 套接字 每个Socket都包含网络连接中一端的信息。每个客户端需要一个Socket结构，服务端则需要N1个Socket结构ÿ…...
3BHE029110R0111 ABB
3BHE029110R0111 ABB变频器控制方式低压通用变频输出电压为380～650V，输出功率为0.75～400kW，工作频率为0～400Hz，它的主电路都采用交—直—交电路。其控制方式经历了以下四代。1U/fC的正弦脉宽调制࿰…...
实现防重复操作（JS与CSS）
实现防重复操作（JS与CSS） 一、前言 日常开发中我们经常会对按钮进行一个防重复点击的校验，这个通常使用节流函数来实现。在规定时间内只允许提交一次，可以有效的避免事件过于频繁的执行和重复提交操作，以及为服务器考…...
魔兽世界游戏插件开发从入门到实战：工具详解与效率提升指南
魔兽世界游戏插件开发从入门到实战：工具详解与效率提升指南 【免费下载链接】wow_api Documents of wow API -- 魔兽世界API资料以及宏工具 项目地址: https://gitcode.com/gh_mirrors/wo/wow_api 作为魔兽世界玩家，你是否曾想过通过自定义插件提…...
3步搞定ViGEmBus：Windows虚拟游戏手柄驱动终极指南 [特殊字符]
3步搞定ViGEmBus：Windows虚拟游戏手柄驱动终极指南 🎮 【免费下载链接】ViGEmBus Windows kernel-mode driver emulating well-known USB game controllers. 项目地址: https://gitcode.com/gh_mirrors/vi/ViGEmBus 想要在Windows上体验更丰富的游…...
CCC 数字钥匙 Release 3：BLE/UWB与NFC融合的无钥匙进入系统解析
1. CCC数字钥匙Release 3的技术革新 想象一下这样的场景：你双手提着购物袋走向爱车，距离3米时车灯自动点亮，1.5米时车门悄然解锁，拉开车门的瞬间引擎已经启动——这就是CCC数字钥匙Release 3带来的无感化体验。作为车联网联盟&…...
4步突破AI算法学习瓶颈：用Excel可视化打开深度学习黑箱
4步突破AI算法学习瓶颈：用Excel可视化打开深度学习黑箱 【免费下载链接】ai-by-hand-excel 项目地址: https://gitcode.com/gh_mirrors/ai/ai-by-hand-excel 传统AI算法学习常陷入"公式理解难、数据流向抽象、参数调整盲目"的三重困境，…...
Axure RP 10实战：3分钟搞定Tab切换效果（附交互样式设置技巧）
Axure RP 10高级Tab切换效果：从基础实现到专业级交互设计 在当今快节奏的数字化产品设计领域，Tab切换作为最常见的用户界面元素之一，其交互体验的优劣直接影响用户对产品的第一印象。Axure RP 10作为行业领先的原型设计工具，提供了…...
LingBot-World：1秒生成16帧！开源世界模型新突破
LingBot-World：1秒生成16帧！开源世界模型新突破 【免费下载链接】lingbot-world-base-cam 项目地址: https://ai.gitcode.com/hf_mirrors/robbyant/lingbot-world-base-cam 导语：Robbyant团队发布开源世界模型LingBot-Worldÿ…...
这次终于选对了！高效论文写作全流程一键生成论文工具推荐（2026 最新）
论文写作全流程可拆解为文献调研→选题/开题→大纲/初稿→文献综述→降重/去AI味→润色/格式→查重/投稿七大环节，以下工具按环节精准匹配，兼顾中文适配、降重能力、去AI痕迹、学术合规四大核心需求，覆盖免费/付费、通用/垂直场景。2026年&am…...
超越极限：YOLOv8融合Dynamic Head（统一尺度-空间-任务感知注意力）—— 原理详解、代码实现与性能验证
引言 在目标检测领域，YOLO系列模型凭借其出色的速度与精度平衡，始终占据着举足轻重的地位。YOLOv8作为Ultralytics团队的最新力作，在架构设计、训练策略和部署便捷性上均达到了新的高度。然而，随着应用场景的日益复杂，如何让模型在多尺度变化、空间遮挡、任务干扰等挑战下…...
智能高效的离线OCR解决方案：Umi-OCR从基础到进阶的全方位应用指南
智能高效的离线OCR解决方案：Umi-OCR从基础到进阶的全方位应用指南 【免费下载链接】Umi-OCR Umi-OCR: 这是一个免费、开源、可批量处理的离线OCR软件，适用于Windows系统，支持截图OCR、批量OCR、二维码识别等功能。 项目地址: https://gitco…...
告别8小时UI适配工作：3大核心能力重新定义Figma到Unity流程
告别8小时UI适配工作：3大核心能力重新定义Figma到Unity流程 【免费下载链接】UnityFigmaBridge Easily bring your Figma Documents, Components, Assets and Prototypes to Unity 项目地址: https://gitcode.com/gh_mirrors/un/UnityFigmaBridge 在游戏开发…...