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

html2canvas和jspdf导出pdf，每个页面模块占一页，在pdf中垂直居中显示

news 2026/3/26 21:44:15

需求：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中垂直居中显示

相关文章：

html2canvas和jspdf导出pdf，每个页面模块占一页，在pdf中垂直居中显示

数学小课堂：集合论的公理化过程（用构建公理化体系的思路来构建自然数）

3.10多线程

缓存双写一致性之更新策略探讨

scala高级函数快速掌握

手写模拟SpringMvc源码

五分钟了解JumpServer V2.* 与 v3 的区别

用友开发者中心应用构建实践指引！

snap使用interface:content的基础例子

蓝桥杯刷题第七天

FinOps首次超越安全成为企业头等大事｜云计算趋势报告

【深度强化学习】(3) Policy Gradients 模型解析，附Pytorch完整代码

Windows基于Nginx搭建RTMP流媒体服务器（附带所有组件下载地址及验证方法）

交流电机驱动器中的隔离电压感应

爬取知乎问题答案

通用智能理论

保姆级使用PyTorch训练与评估自己的MixMIM网络教程

《百万在线大型游戏服务端开发》前两章概念笔记

3BHE029110R0111 ABB

实现防重复操作（JS与CSS）

Rock3A开发板实战：OpenBMC移植全记录（附避坑指南）

BFR算法实战：如何高效处理大规模数据聚类

ICML 2023亚马逊论文速览：自适应计算与差分隐私

Unity JSON处理革新性方案：Newtonsoft.Json-for-Unity全解析

告别风扇噪音与过热：FanControl智能控温完全指南

一种路径优化和速度优化算法实现（仿照百度Apollo方案），只提供代码，有相关的readme文...

最近帮实验室刚入门的师弟复现了西储大学轴承故障的迁移学习代码，本来以为是手到擒来的活，结果还是踩了好几个坑，刚好整理出来给同样摸鱼入门的小伙伴参考

数据开发平台如何落地实操？数据开发平台核心价值是什么？

W-TRS-5.5D7红外测温：电炖锅智能测温的革新力量

【BoClaw教程03】BoClaw实战：打工人常用技能