我想了解导致从提供的 HTML 源代码生成的 PDF 跨越 2 页的条件以及如何防止这种情况发生。
从正确的 A4 比例的 n 个 div ,我能够生成 n 页 的 PDF,而不会在任何其他页面上溢出。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Red Div</title>
<style>
.red-div {
width: 1240px;
height: 1753px;
background-color: red;
}
</style>
</head>
<body>
<div class="red-div"></div>
</body>
</html>
根据标准页面比例规范,此 HTML 页面的宽度/高度比例为 1/sqrt(2)。 CSS 定义的主 div 的宽度为 1240px,高度为 1753px。 2. 使用 Chrome 或 Firefox 打开它。 3. 按 CTRL+P 打开 PDF 打印预览,设置 A4、比例 100%(或默认)、无边距、打印背景 = true。 4. 预览跨越2页。
打印到 PDF 有其自己的控件,因此如果您预先设置页面,您的页面应该可以正常工作。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Red Div</title>
<style>
@media print { @page { margin: 0; size: 1240px 1753px ; } body { margin: 0; } }
.red-div {
width: 1240px;
height: 1753px;
background-color: red;
}
</style>
</head>
<body>
<div class="red-div"></div>
</body>
</html>