css pdf：对溢出内容强制分页
[英]css pdf: force page break on overflow content
问题描述
我正在使用车把和 puppeteer 来生成 pdf。 pdf 设计非常繁重，包含大量动态数据，因此我使用 css 来模拟 A4 格式的页面，但由于用户输入，我已经达到了数据大小不再可预测的地步。 我的意思是，如果数据溢出超出页面底部约束，它会继续进入空白，而不是自动进入下一页。 我的问题是，有没有办法查看页面内容是否超出了父级的约束，如果是的话.. 用 css 或 JavaScript 将其分解为另一个 div/页面？
这是我的代码的一个小模型。 https://codepen.io/LTFoReal/pen/wvKboNJ
body { background: rgb(204,204,204); } page { background: white; display: block; margin: 0 auto; margin-bottom: 0.5cm; box-shadow: 0 0 0.5cm rgba(0,0,0,0.5); } page[size="A4"] { width: 21cm; height: 29.7cm; padding: 5em 30px 0 30px; position: relative; } @media print { body, page { margin: 0; box-shadow: 0; } }.essay-data-container { min-height: 300px; }.essay-data-container.essay-data-header { text-transform: uppercase; }
<page size="A4"> <h1>A RANDOM HEADER</h1> <div class="essay-data-container"> <h4 class="essay-data-header">This is the sub-title</h4> <ul> <li><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In euismod luctus neque, eu pulvinar ante elementum vel. Pellentesque rutrum sapien vitae neque ornare, id vehicula nibh fermentum. Aliquam accumsan dictum gravida. Integer nec molestie mauris, sit amet placerat risus. Nam dolor dui, fringilla ac fermentum ac, mattis non enim. Vestibulum porttitor justo sed arcu porta dapibus. Suspendisse varius eros et ante ultricies congue. Nam magna ante, ornare sed tincidunt eget, euismod et nunc. Suspendisse venenatis aliquet ex et lacinia. Curabitur vitae ornare nibh. Suspendisse hendrerit fermentum egestas. Duis in nibh eros. </p></li> <li><p>Phasellus eu imperdiet mauris. Nam iaculis metus eget nisi volutpat mollis. Praesent luctus nulla non lacus porta, nec cursus lorem eleifend. Quisque libero justo, fringilla vitae vestibulum in, bibendum vehicula justo. Fusce non leo porttitor, consequat enim vitae, luctus lacus. Nulla in sollicitudin quam, in vestibulum nisl. Etiam congue metus nunc, a tincidunt diam lobortis quis. Ut sodales mi magna, sit amet suscipit tellus semper id. Sed mattis efficitur justo eget tincidunt. Mauris vel commodo velit. Fusce augue magna, faucibus id venenatis sit amet, luctus id neque. Maecenas sed justo pellentesque, porttitor eros at, lobortis est. Nunc fringilla nisi eget erat aliquet, non tristique nulla imperdiet. Proin posuere elementum elit. Praesent massa massa, condimentum et consectetur non, ullamcorper et odio. </p></li> <li><p>Nunc malesuada eu leo eget bibendum. Sed vitae justo euismod, vestibulum tortor sit amet, cursus augue. Nunc aliquet ullamcorper mollis. Nulla blandit porttitor tempor. Curabitur egestas dolor a enim lobortis iaculis sit amet non enim. Vestibulum sagittis est sollicitudin eros elementum, a pulvinar ante euismod. Phasellus pulvinar rhoncus tortor eget congue. Integer mattis vestibulum ex sit amet pulvinar. Praesent luctus felis urna, at bibendum justo eleifend ut. Nullam facilisis faucibus arcu, nec ultrices turpis consequat nec. Aliquam in lacus libero. Praesent tempor malesuada rutrum. Suspendisse potenti. Aenean nec ligula nisi. </p></li> <li><p>Quisque a faucibus nibh. Vestibulum faucibus elit a elementum semper. Phasellus ac felis porta, finibus nibh gravida, fermentum metus. Donec a mauris dui. Morbi a turpis ac augue commodo ornare quis auctor purus. Cras consectetur turpis at nisi hendrerit gravida. Duis auctor faucibus mi, at hendrerit justo scelerisque in. Morbi bibendum leo sed arcu ultricies, a varius ante maximus. Donec molestie orci id rhoncus aliquam. Morbi id sodales elit. </p></li> <li><p>Aenean viverra iaculis ante, nec sodales ipsum tempor a. Fusce risus nisl, aliquet quis arcu quis, consequat faucibus nibh. Aliquam eu pellentesque nulla, sed cursus leo. Vestibulum vel nibh orci. Phasellus vitae lacinia nulla. Ut at magna mollis, venenatis metus quis, ultricies enim. Integer ullamcorper sit amet magna at interdum. Pellentesque a mauris nec sem condimentum tincidunt. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In ac lectus vitae eros aliquam condimentum. Donec luctus ullamcorper neque, ut lobortis odio aliquet ut. </p></li> <li><p> Nulla ornare eros vel mattis feugiat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed vitae dolor velit. Aliquam egestas pharetra accumsan. Integer lobortis massa nec felis egestas, quis finibus neque aliquam. Integer consectetur nibh augue, at ultrices sem sagittis vel. Aliquam eu venenatis neque. Fusce aliquet sem ac lorem fringilla, malesuada luctus risus sodales. Mauris sed lectus ut tellus rhoncus lacinia. Pellentesque ultrices condimentum leo eu pharetra. Maecenas sit amet tortor at nisl mollis accumsan. Etiam volutpat tortor et libero mollis, ut facilisis massa feugiat. </p></li> <li><p> Integer sodales lorem ac fringilla ornare. Fusce ac ultrices odio. Maecenas aliquam orci ac urna egestas placerat. Maecenas lacus massa, dictum vitae felis vel, semper elementum urna. Curabitur eu ex sed ex varius aliquam eget ut sapien. Sed ac tellus quis arcu hendrerit hendrerit a ac dui. Nunc tortor libero, consequat ut ligula at, suscipit mollis ante. Ut ultrices id libero in congue. Nunc a justo scelerisque, finibus lacus at, pellentesque dolor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse eget dignissim magna. Integer efficitur risus vitae leo blandit semper. </p></li> </ul> </div> </page> <page size="A4"></page>
1 个解决方案
解决方案1
1 已采纳 2020-05-27 02:23:36
这就是我设法做到的。 它并不完美，但对这两个页面都可以正常工作，并且通过一些额外的 javascript，您可以使其适用于整个 pdf。
基本上我根据客户端/滚动宽度和高度检查它是否溢出。 这里是我得到灵感的地方和检查溢出的大部分代码
然后，我得到溢出的 li 标签并推入一个名为 removedLis 的新数组。 之后，我只是 append 这个去掉了下一页的Lis
--编辑
现在它正在处理无数页面
你可以在这里测试https://codepen.io/paulodelia/pen/ZEbNKBX
<!DOCTYPE HTML>
<html>
<head>
<title>
How to determine the content of
HTML elements overflow or not
</title>
<style>
body {
background: rgb(204, 204, 204);
}
page {
background: white;
display: block;
margin: 0 auto;
margin-bottom: 0.5cm;
box-shadow: 0 0 0.5cm rgba(0, 0, 0, 0.5);
page-break-before: always;
}
page[size="A4"] {
width: 21cm;
height: 29.7cm;
max-height: 29.7cm;
padding: 5em 30px 0 30px;
position: relative;
}
@media print {
body,
page {
margin: 0;
box-shadow: 0;
}
}
.essay-data-container {
min-height: 300px;
max-height: 400px;
}
.essay-data-container .essay-data-header {
text-transform: uppercase;
}
ul {
height: 25cm;
}
@media all {
.page-break {
display: block;
page-break-before: always;
}
}
</style>
</head>
<body onload="gfg_Run()">
<page size="A4">
<h1>A RANDOM HEADER</h1>
<div class="essay-data-container">
<h4 class="essay-data-header">This is the sub-title</h4>
<ul class="GFG_UP">
<li>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In euismod luctus neque, eu pulvinar
ante elementum vel. Pellentesque rutrum sapien vitae neque ornare, id vehicula nibh fermentum.
Aliquam accumsan dictum gravida. Integer nec molestie mauris, sit amet placerat risus. Nam dolor
dui, fringilla ac fermentum ac, mattis non enim. Vestibulum porttitor justo sed arcu porta
dapibus. Suspendisse varius eros et ante ultricies congue. Nam magna ante, ornare sed tincidunt
eget, euismod et nunc. Suspendisse venenatis aliquet ex et lacinia. Curabitur vitae ornare nibh.
Suspendisse hendrerit fermentum egestas. Duis in nibh eros. 1
</p>
</li>
<li>
<p>Phasellus eu imperdiet mauris. Nam iaculis metus eget nisi volutpat mollis. Praesent luctus nulla
non lacus porta, nec cursus lorem eleifend. Quisque libero justo, fringilla vitae vestibulum in,
bibendum vehicula justo. Fusce non leo porttitor, consequat enim vitae, luctus lacus. Nulla in
sollicitudin quam, in vestibulum nisl. Etiam congue metus nunc, a tincidunt diam lobortis quis.
Ut sodales mi magna, sit amet suscipit tellus semper id. Sed mattis efficitur justo eget
tincidunt. Mauris vel commodo velit. Fusce augue magna, faucibus id venenatis sit amet, luctus
id neque. Maecenas sed justo pellentesque, porttitor eros at, lobortis est. Nunc fringilla nisi
eget erat aliquet, non tristique nulla imperdiet. Proin posuere elementum elit. Praesent massa
massa, condimentum et consectetur non, ullamcorper et odio. 2
</p>
</li>
<li>
<p>Nunc malesuada eu leo eget bibendum. Sed vitae justo euismod, vestibulum tortor sit amet, cursus
augue. Nunc aliquet ullamcorper mollis. Nulla blandit porttitor tempor. Curabitur egestas dolor
a enim lobortis iaculis sit amet non enim. Vestibulum sagittis est sollicitudin eros elementum,
a pulvinar ante euismod. Phasellus pulvinar rhoncus tortor eget congue. Integer mattis
vestibulum ex sit amet pulvinar. Praesent luctus felis urna, at bibendum justo eleifend ut.
Nullam facilisis faucibus arcu, nec ultrices turpis consequat nec. Aliquam in lacus libero.
Praesent tempor malesuada rutrum. Suspendisse potenti. Aenean nec ligula nisi. 3
</p>
</li>
<li>
<p>Quisque a faucibus nibh. Vestibulum faucibus elit a elementum semper. Phasellus ac felis porta,
finibus nibh gravida, fermentum metus. Donec a mauris dui. Morbi a turpis ac augue commodo
ornare quis auctor purus. Cras consectetur turpis at nisi hendrerit gravida. Duis auctor
faucibus mi, at hendrerit justo scelerisque in. Morbi bibendum leo sed arcu ultricies, a varius
ante maximus. Donec molestie orci id rhoncus aliquam. Morbi id sodales elit. 4
</p>
</li>
<li>
<p>Aenean viverra iaculis ante, nec sodales ipsum tempor a. Fusce risus nisl, aliquet quis arcu
quis, consequat faucibus nibh. Aliquam eu pellentesque nulla, sed cursus leo. Vestibulum vel
nibh orci. Phasellus vitae lacinia nulla. Ut at magna mollis, venenatis metus quis, ultricies
enim. Integer ullamcorper sit amet magna at interdum. Pellentesque a mauris nec sem condimentum
tincidunt. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus
mus. In ac lectus vitae eros aliquam condimentum. Donec luctus ullamcorper neque, ut lobortis
odio aliquet ut. 5
</p>
</li>
<li>
<p>
Nulla ornare eros vel mattis feugiat. Pellentesque habitant morbi tristique senectus et netus et
malesuada fames ac turpis egestas. Sed vitae dolor velit. Aliquam egestas pharetra accumsan.
Integer lobortis massa nec felis egestas, quis finibus neque aliquam. Integer consectetur nibh
augue, at ultrices sem sagittis vel. Aliquam eu venenatis neque. Fusce aliquet sem ac lorem
fringilla, malesuada luctus risus sodales. Mauris sed lectus ut tellus rhoncus lacinia.
Pellentesque ultrices condimentum leo eu pharetra. Maecenas sit amet tortor at nisl mollis
accumsan. Etiam volutpat tortor et libero mollis, ut facilisis massa feugiat. 6
</p>
</li>
<li>
<p>
Integer sodales lorem ac fringilla ornare. Fusce ac ultrices odio. Maecenas aliquam orci ac urna
egestas placerat. Maecenas lacus massa, dictum vitae felis vel, semper elementum urna. Curabitur
eu ex sed ex varius aliquam eget ut sapien. Sed ac tellus quis arcu hendrerit hendrerit a ac
dui. Nunc tortor libero, consequat ut ligula at, suscipit mollis ante. Ut ultrices id libero in
congue. Nunc a justo scelerisque, finibus lacus at, pellentesque dolor. Pellentesque habitant
morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse eget
dignissim magna. Integer efficitur risus vitae leo blandit semper. 7
</p>
</li>
<li>
<p>
Integer sodales lorem ac fringilla ornare. Fusce ac ultrices odio. Maecenas aliquam orci ac urna
egestas placerat. Maecenas lacus massa, dictum vitae felis vel, semper elementum urna. Curabitur
eu ex sed ex varius aliquam eget ut sapien. Sed ac tellus quis arcu hendrerit hendrerit a ac
dui. Nunc tortor libero, consequat ut ligula at, suscipit mollis ante. Ut ultrices id libero in
congue. Nunc a justo scelerisque, finibus lacus at, pellentesque dolor. Pellentesque habitant
morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse eget
dignissim magna. Integer efficitur risus vitae leo blandit semper. 8
</p>
</li>
<li>
<p>
Integer sodales lorem ac fringilla ornare. Fusce ac ultrices odio. Maecenas aliquam orci ac urna
egestas placerat. Maecenas lacus massa, dictum vitae felis vel, semper elementum urna. Curabitur
eu ex sed ex varius aliquam eget ut sapien. Sed ac tellus quis arcu hendrerit hendrerit a ac
dui. Nunc tortor libero, consequat ut ligula at, suscipit mollis ante. Ut ultrices id libero in
congue. Nunc a justo scelerisque, finibus lacus at, pellentesque dolor. Pellentesque habitant
morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse eget
dignissim magna. Integer efficitur risus vitae leo blandit semper. 9
</p>
</li>
<li>
<p>
Integer sodales lorem ac fringilla ornare. Fusce ac ultrices odio. Maecenas aliquam orci ac urna
egestas placerat. Maecenas lacus massa, dictum vitae felis vel, semper elementum urna. Curabitur
eu ex sed ex varius aliquam eget ut sapien. Sed ac tellus quis arcu hendrerit hendrerit a ac
dui. Nunc tortor libero, consequat ut ligula at, suscipit mollis ante. Ut ultrices id libero in
congue. Nunc a justo scelerisque, finibus lacus at, pellentesque dolor. Pellentesque habitant
morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse eget
dignissim magna. Integer efficitur risus vitae leo blandit semper.10
</p>
</li>
<li>
<p>
Integer sodales lorem ac fringilla ornare. Fusce ac ultrices odio. Maecenas aliquam orci ac urna
egestas placerat. Maecenas lacus massa, dictum vitae felis vel, semper elementum urna. Curabitur
eu ex sed ex varius aliquam eget ut sapien. Sed ac tellus quis arcu hendrerit hendrerit a ac
dui. Nunc tortor libero, consequat ut ligula at, suscipit mollis ante. Ut ultrices id libero in
congue. Nunc a justo scelerisque, finibus lacus at, pellentesque dolor. Pellentesque habitant
morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse eget
dignissim magna. Integer efficitur risus vitae leo blandit semper.11
</p>
</li>
<li>
<p>
Integer sodales lorem ac fringilla ornare. Fusce ac ultrices odio. Maecenas aliquam orci ac urna
egestas placerat. Maecenas lacus massa, dictum vitae felis vel, semper elementum urna. Curabitur
eu ex sed ex varius aliquam eget ut sapien. Sed ac tellus quis arcu hendrerit hendrerit a ac
dui. Nunc tortor libero, consequat ut ligula at, suscipit mollis ante. Ut ultrices id libero in
congue. Nunc a justo scelerisque, finibus lacus at, pellentesque dolor. Pellentesque habitant
morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse eget
dignissim magna. Integer efficitur risus vitae leo blandit semper.12
</p>
</li>
<li>
<p>
Integer sodales lorem ac fringilla ornare. Fusce ac ultrices odio. Maecenas aliquam orci ac urna
egestas placerat. Maecenas lacus massa, dictum vitae felis vel, semper elementum urna. Curabitur
eu ex sed ex varius aliquam eget ut sapien. Sed ac tellus quis arcu hendrerit hendrerit a ac
dui. Nunc tortor libero, consequat ut ligula at, suscipit mollis ante. Ut ultrices id libero in
congue. Nunc a justo scelerisque, finibus lacus at, pellentesque dolor. Pellentesque habitant
morbi tristique senectus et netus et malesuada fames ac turpis egesas. Suspendisse eget
dignissim magna. Integer efficitur risus vitae leo blandit semper.13
</p>
</li>
<li>
<p>
Integer sodales lorem ac fringilla ornare. Fusce ac ultrices odio. Maecenas aliquam orci ac urna
egestas placerat. Maecenas lacus massa, dictum vitae felis vel, semper elementum urna. Curabitur
eu ex sed ex varius aliquam eget ut sapien. Sed ac tellus quis arcu hendrerit hendrerit a ac
dui. Nunc tortor libero, consequat ut ligula at, suscipit mollis ante. Ut ultrices id libero in
congue. Nunc a justo scelerisque, finibus lacus at, pellentesque dolor. Pellentesque habitant
morbi tristique senectus et netus et malesuada fames ac turpis egesas. Suspendisse eget
dignissim magna. Integer efficitur risus vitae leo blandit semper.14
</p>
</li>
<li>
<p>
Integer sodales lorem ac fringilla ornare. Fusce ac ultrices odio. Maecenas aliquam orci ac urna
egestas placerat. Maecenas lacus massa, dictum vitae felis vel, semper elementum urna. Curabitur
eu ex sed ex varius aliquam eget ut sapien. Sed ac tellus quis arcu hendrerit hendrerit a ac
dui. Nunc tortor libero, consequat ut ligula at, suscipit mollis ante. Ut ultrices id libero in
congue. Nunc a justo scelerisque, finibus lacus at, pellentesque dolor. Pellentesque habitant
morbi tristique senectus et netus et malesuada fames ac turpis egesas. Suspendisse eget
dignissim magna. Integer efficitur risus vitae leo blandit semper.15
</p>
</li>
<li>
<p>
Integer sodales lorem ac fringilla ornare. Fusce ac ultrices odio. Maecenas aliquam orci ac urna
egestas placerat. Maecenas lacus massa, dictum vitae felis vel, semper elementum urna. Curabitur
eu ex sed ex varius aliquam eget ut sapien. Sed ac tellus quis arcu hendrerit hendrerit a ac
dui. Nunc tortor libero, consequat ut ligula at, suscipit mollis ante. Ut ultrices id libero in
congue. Nunc a justo scelerisque, finibus lacus at, pellentesque dolor. Pellentesque habitant
morbi tristique senectus et netus et malesuada fames ac turpis egesas. Suspendisse eget
dignissim magna. Integer efficitur risus vitae leo blandit semper.16
</p>
</li>
<li>
<p>
Integer sodales lorem ac fringilla ornare. Fusce ac ultrices odio. Maecenas aliquam orci ac urna
egestas placerat. Maecenas lacus massa, dictum vitae felis vel, semper elementum urna. Curabitur
eu ex sed ex varius aliquam eget ut sapien. Sed ac tellus quis arcu hendrerit hendrerit a ac
dui. Nunc tortor libero, consequat ut ligula at, suscipit mollis ante. Ut ultrices id libero in
congue. Nunc a justo scelerisque, finibus lacus at, pellentesque dolor. Pellentesque habitant
morbi tristique senectus et netus et malesuada fames ac turpis egesas. Suspendisse eget
dignissim magna. Integer efficitur risus vitae leo blandit semper.17
</p>
</li>
<li>
<p>
Integer sodales lorem ac fringilla ornare. Fusce ac ultrices odio. Maecenas aliquam orci ac urna
egestas placerat. Maecenas lacus massa, dictum vitae felis vel, semper elementum urna. Curabitur
eu ex sed ex varius aliquam eget ut sapien. Sed ac tellus quis arcu hendrerit hendrerit a ac
dui. Nunc tortor libero, consequat ut ligula at, suscipit mollis ante. Ut ultrices id libero in
congue. Nunc a justo scelerisque, finibus lacus at, pellentesque dolor. Pellentesque habitant
morbi tristique senectus et netus et malesuada fames ac turpis egesas. Suspendisse eget
dignissim magna. Integer efficitur risus vitae leo blandit semper.18
</p>
</li>
<li>
<p>
Integer sodales lorem ac fringilla ornare. Fusce ac ultrices odio. Maecenas aliquam orci ac urna
egestas placerat. Maecenas lacus massa, dictum vitae felis vel, semper elementum urna. Curabitur
eu ex sed ex varius aliquam eget ut sapien. Sed ac tellus quis arcu hendrerit hendrerit a ac
dui. Nunc tortor libero, consequat ut ligula at, suscipit mollis ante. Ut ultrices id libero in
congue. Nunc a justo scelerisque, finibus lacus at, pellentesque dolor. Pellentesque habitant
morbi tristique senectus et netus et malesuada fames ac turpis egesas. Suspendisse eget
dignissim magna. Integer efficitur risus vitae leo blandit semper.19
</p>
</li>
<li>
<p>
Integer sodales lorem ac fringilla ornare. Fusce ac ultrices odio. Maecenas aliquam orci ac urna
egestas placerat. Maecenas lacus massa, dictum vitae felis vel, semper elementum urna. Curabitur
eu ex sed ex varius aliquam eget ut sapien. Sed ac tellus quis arcu hendrerit hendrerit a ac
dui. Nunc tortor libero, consequat ut ligula at, suscipit mollis ante. Ut ultrices id libero in
congue. Nunc a justo scelerisque, finibus lacus at, pellentesque dolor. Pellentesque habitant
morbi tristique senectus et netus et malesuada fames ac turpis egesas. Suspendisse eget
dignissim magna. Integer efficitur risus vitae leo blandit semper.20
</p>
</li>
<li>
<p>
Integer sodales lorem ac fringilla ornare. Fusce ac ultrices odio. Maecenas aliquam orci ac urna
egestas placerat. Maecenas lacus massa, dictum vitae felis vel, semper elementum urna. Curabitur
eu ex sed ex varius aliquam eget ut sapien. Sed ac tellus quis arcu hendrerit hendrerit a ac
dui. Nunc tortor libero, consequat ut ligula at, suscipit mollis ante. Ut ultrices id libero in
congue. Nunc a justo scelerisque, finibus lacus at, pellentesque dolor. Pellentesque habitant
morbi tristique senectus et netus et malesuada fames ac turpis egesas. Suspendisse eget
dignissim magna. Integer efficitur risus vitae leo blandit semper.21
</p>
</li>
<li>
<p>
Integer sodales lorem ac fringilla ornare. Fusce ac ultrices odio. Maecenas aliquam orci ac urna
egestas placerat. Maecenas lacus massa, dictum vitae felis vel, semper elementum urna. Curabitur
eu ex sed ex varius aliquam eget ut sapien. Sed ac tellus quis arcu hendrerit hendrerit a ac
dui. Nunc tortor libero, consequat ut ligula at, suscipit mollis ante. Ut ultrices id libero in
congue. Nunc a justo scelerisque, finibus lacus at, pellentesque dolor. Pellentesque habitant
morbi tristique senectus et netus et malesuada fames ac turpis egesas. Suspendisse eget
dignissim magna. Integer efficitur risus vitae leo blandit semper.22
</p>
</li>
<li>
<p>
Integer sodales lorem ac fringilla ornare. Fusce ac ultrices odio. Maecenas aliquam orci ac urna
egestas placerat. Maecenas lacus massa, dictum vitae felis vel, semper elementum urna. Curabitur
eu ex sed ex varius aliquam eget ut sapien. Sed ac tellus quis arcu hendrerit hendrerit a ac
dui. Nunc tortor libero, consequat ut ligula at, suscipit mollis ante. Ut ultrices id libero in
congue. Nunc a justo scelerisque, finibus lacus at, pellentesque dolor. Pellentesque habitant
morbi tristique senectus et netus et malesuada fames ac turpis egesas. Suspendisse eget
dignissim magna. Integer efficitur risus vitae leo blandit semper.23
</p>
</li>
<li>
<p>
Integer sodales lorem ac fringilla ornare. Fusce ac ultrices odio. Maecenas aliquam orci ac urna
egestas placerat. Maecenas lacus massa, dictum vitae felis vel, semper elementum urna. Curabitur
eu ex sed ex varius aliquam eget ut sapien. Sed ac tellus quis arcu hendrerit hendrerit a ac
dui. Nunc tortor libero, consequat ut ligula at, suscipit mollis ante. Ut ultrices id libero in
congue. Nunc a justo scelerisque, finibus lacus at, pellentesque dolor. Pellentesque habitant
morbi tristique senectus et netus et malesuada fames ac turpis egesas. Suspendisse eget
dignissim magna. Integer efficitur risus vitae leo blandit semper.24
</p>
</li>
<li>
<p>
Integer sodales lorem ac fringilla ornare. Fusce ac ultrices odio. Maecenas aliquam orci ac urna
egestas placerat. Maecenas lacus massa, dictum vitae felis vel, semper elementum urna. Curabitur
eu ex sed ex varius aliquam eget ut sapien. Sed ac tellus quis arcu hendrerit hendrerit a ac
dui. Nunc tortor libero, consequat ut ligula at, suscipit mollis ante. Ut ultrices id libero in
congue. Nunc a justo scelerisque, finibus lacus at, pellentesque dolor. Pellentesque habitant
morbi tristique senectus et netus et malesuada fames ac turpis egesas. Suspendisse eget
dignissim magna. Integer efficitur risus vitae leo blandit semper.25
</p>
</li>
</ul>
</div>
</page>
<script>
var el_up = document.querySelector(".GFG_UP");
function check(el) {
var curOverf = el.style.overflow;
if (!curOverf || curOverf === "visible")
el.style.overflow = "hidden";
var isOverflowing = el.clientWidth < el.scrollWidth
|| el.clientHeight < el.scrollHeight;
el.style.overflow = curOverf;
return isOverflowing;
}
function gfg_Run() {
ans = "No Overflow";
if (check(el_up)) {
ans = "Content Overflowed";
containOverflow(el_up);
}
}
function containOverflow(el) {
var lis = [...el.getElementsByTagName('li')];
var removedLis = [];
while (check(el)) {
removedLis.push(lis.pop())
console.log(removedLis)
el.removeChild(el.lastElementChild)
}
var nextPage = document.createElement('page')
nextPage.setAttribute('size', 'A4')
document.querySelector('body').appendChild(nextPage);
var nextPageUl = document.createElement('ul')
nextPageUl.classList.add('GFG_UP')
nextPage.appendChild(nextPageUl)
for(let i = removedLis.length - 1 ; i >= 0; i--) {
nextPageUl.appendChild(removedLis[i])
}
if (check(nextPage.querySelector('.GFG_UP'))) {
containOverflow(nextPage.querySelector('.GFG_UP'))
}
}
</script>
</body>
</html>
如何根据HTML中的内容智能地插入分页符以生成PDF
[英]How to insert a page break intelligently based on content in HTML for generating PDF
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.