需求：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" />
<meta
http-equiv="X-UA-Compatible"
content="IE=edge" />
<meta
name="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>
<table
border="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.jsPDF
const downloadPDf = async dom => {
// 对于一些不想显示在pdf上的元素，设置display：none，比如隐藏所有button
const 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.28
const a4Height = 841.89
const 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.width
const contentHeight = canvas.height
const pageData = canvas.toDataURL('image/jpeg', 1) // 第二个参数为图片质量，1为最高质量
let imgHeight = (a4Width / contentWidth) * contentHeight // 根据a4纸比例，计算出图片的高度
// 分页剩余高度
let leftHeight = imgHeight
// 分页偏移位置
let position = 0
// 如果图片高度大于a4纸高度，则需要分页
if (imgHeight > a4Height) {
while (leftHeight > 0) {
// 第三个参数图片x轴位置，第四个参数图片y轴位置，第五个参数图片宽度，第六个参数图片高度
pdf.addImage(pageData, 'JPEG', 0, position, a4Width, imgHeight)
leftHeight = leftHeight - a4Height
position -= a4Height
if (leftHeight > 0) {
pdf.addPage()
}
}
} else {
const marginY = (a4Height - imgHeight) / 2 // 计算出图片的上下边距
// 第三个参数图片x轴位置，第四个参数图片y轴位置，第五个参数图片宽度，第六个参数图片高度
pdf.addImage(pageData, 'JPEG', 0, marginY > 0 ? marginY : 0, a4Width, imgHeight)
}
// 最后一个模块不需要再新增空白页
if (i < modules.length - 1) {
pdf.addPage()
}
}
}
await setPdfPage()
pdf.save('TestReport.pdf') // 导出pdf
// 还原元素
buttons.forEach(item => {
item.style.display = 'block'
})
}
</script>
</html>
