我试图创建一些< page>< / page> a4类取决于其中的内容量.如果内容超过< page>< / page>的高度,我想创建一个新的< page>< / page>对于超出上一页的内容.
var element = document.getElementsByClassName('a4')[0];
var editorHeight = element.offsetHeight;
var pages = element.childElementCount * 1123;
var pageNumber = element.getElementsByClassName('a4').length + 1;
if (editorHeight < pages) {
var newPage = document.createElement('page');
newPage.setAttribute('size','A4');
newPage.setAttribute('class','a4');
newPage.dataset.pages = pageNumber;
element.appendChild(newPage);
}
body {
background: rgb(204,204,204);
}
page {
background: white;
display: block;
text-align: justify;
margin: 20px;
margin-bottom: 0.5cm;
Box-shadow: 0 0 0.5cm rgba(0,0.5);
}
page[size="A4"] {
width: 21cm;
height: 29.7cm;
padding: 20px;
}
@media print {
body,page {
margin: 0;
Box-shadow: 0;
}
}
<page size="A4"> Contrary to popular belief,Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC,making it over 2000 years old. Richard Mcclintock,a Latin professor at Hampden-Sydney College in Virginia,looked up one of the more obscure Latin words,consectetur,from a Lorem Ipsum passage,and going through the cites of the word in classical literature,discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero,written in 45 BC. This book is a treatise on the theory of ethics,very popular during the Renaissance. The first line of Lorem Ipsum,"Lorem ipsum dolor sit amet..",comes from a line in section 1.10.32. The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form,accompanied by English versions from the 1914 translation by H. Rackham. Contrary to popular belief,a Latin professor at Hampden-Sydney College in Virginia,looked up one of the more obscure Latin words,discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero,"Lorem ipsum dolor sit amet..",comes from a line in section 1.10.32. The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form,accompanied by English versions from the 1914 translation by H. Rackham. Contrary to popular belief,making it over 2000 years old. Richard Mcclintock,discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero,very popular during the Renaissance. The first line of Lorem Ipsum,comes from a line in section 1.10.32. The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form,Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC,and going through the cites of the word in classical literature,discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero,written in 45 BC. This book is a treatise on the theory of ethics,comes from a line in section 1.10.32. The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form,Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC,from a Lorem Ipsum passage,comes from a line in section 1.10.32. The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form,accompanied by English versions from the 1914 translation by H. Rackham. Contrary to popular belief,accompanied by English versions from the 1914 translation by H. Rackham. </page>
从上面的代码中,我检查了新的< page class ='a4'>< / page>已创建但我无法获得超出内容并将其放入新创建的页面中.
如何让新页面填充超过上一页的内容？
解决方法
如果您使用
Summer Note或类似类型的html编辑器,我们可以消除在html中包含文本节点的想法,因为这些编辑器通常将所有内容包装在< p>中.标签.例如,如果您编写以下内容
This is First Line This is Second Line This is Third Line
编辑器将生成这样的HTML.
<p>This is First Line</p> <p>This is Second Line</p> <p>This is Third Line</p>
生成的HTML也可以有表格,列表和可能是图像,
<h2>A Title</h2> <p>A 2-3 line paragraph</p> <hr><!-- just to prettify --> <table>...</table> <ul><li>An Un-ordered List</li></ul> <ol><li>An Un-ordered List</li></ol> <p><img src="#" alt="An Image"></p>
没有任何权衡,我们无法将它们分成页面.因此,如果我们可以通过一些权衡取舍,我们可以完成这项工作.关于这些HTML编辑器的一个好处是它们倾向于生成大部分Block level Elements作为页面的直接子项.因此,通过计算每个Block元素子元素的位置和高度,我们可以检查子元素是否适合使用简单算法的页面,或者如果不是,则将其移动到下一页面.
function arrangePage($pageElement,index) {
if (!index) index = 1;
var pageHeight = $pageElement.height();
var children = $pageElement.children();
for (var i = 0; i < children.length; i++) {
var child = children.eq(i);
if(i == 0 && child.height() > pageHeight) continue; /* Infinite loop fix :: explained in answer*/
var bottom = child.height() + child[0].offsetTop;
if (bottom < pageHeight) continue;
var newPage = $('<page size="A4">').appendTo('body').append(children.splice(i));
arrangePage(newPage,index + 1);
}
$('<span>').addClass('page-number').html('Page ' + index).appendTo($pageElement); /* Inerts Page Index*/
}
$(function() {
arrangePage($("page"));
});
body {
background: rgb(204,204);
}
page {
position: relative; /* This is mandatory */
background: white;
display: block;
text-align: justify;
margin: 20px;
margin-bottom: 0.5cm;
Box-shadow: 0 0 0.5cm rgba(0,0.5);
}
page[size="A4"] {
width: 21cm;
height: 29.7cm;
padding: 20px;
overflow: hidden;
}
@media print {
body,page {
margin: 0;
Box-shadow: 0;
}
}
.page-number {
position: absolute;
bottom: 8px;
left: 8px;
font-size: 12px;
color: #9e4200de;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <page size="A4"><p><span style="color: inherit; font-family: inherit; font-size: 14px;"></span></p><h2 class="entry-title fusion-post-title" data-fontsize="18" data-lineheight="27" style="color: rgb(51,51,51); margin-top: 0px; margin-bottom: 28px; font-size: 18px; font-family: muSEO-slab-300,Arial,Helvetica,sans-serif; line-height: 27px; padding-bottom: 0px;">Blog Image Post</h2><h2><div class="post-content" style=""><p style="text-align: center; color: rgb(116,116,116); font-family: "PT Sans",sans-serif; font-size: 13px; margin-bottom: 20px;"><img src="https://www.jqueryscript.net/images/Universal-Placeholder-Text-Lorem-Ipsum-Generator-getlorem.jpg" style="width: 425px;"><span style="color: rgb(107,113,122);"><br></span></p><p style="color: rgb(116,sans-serif; font-size: 13px; margin-bottom: 20px;"><span style="color: rgb(107,122);">Contrary to popular belief,looked up </span><span style="color: rgb(107,122);">one of the more obscure Latin words,discovered the undoubtable source.</span></p><h3 style="color: rgb(116,sans-serif; font-size: 13px; margin-bottom: 20px;"><ul style="Box-sizing: inherit; color: rgb(0,0); font-family: Verdana,sans-serif; font-size: 15px;"><li style="Box-sizing: inherit;">Item</li><li style="Box-sizing: inherit;">Item</li><li style="Box-sizing: inherit;">Item</li><li style="Box-sizing: inherit;">Item</li></ul></h3><h3 style="color: rgb(116,sans-serif; font-size: 13px; margin-bottom: 20px;">Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum <span style="color: rgb(107,122);">et Malorum" (The Extremes of Good and Evil) by Cicero,very popular during the Renaissance.</span><br></h3><ol style="Box-sizing: inherit; color: rgb(0,sans-serif; font-size: 15px;"><li style="Box-sizing: inherit;">First item</li><li style="Box-sizing: inherit;">Second item</li><li style="Box-sizing: inherit;">Third item</li><li style="Box-sizing: inherit;">Fourth item</li></ol><p style="color: rgb(116,122);">The first line of Lorem Ipsum,comes from a line in section</span><span style="color: rgb(107,122);"> 1.10.32. </span><span style="color: rgb(107,122);">The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form,accompanied by English </span><span style="color: rgb(107,122);">versions from the 1914 translation by H. Rackham.</span></p><table id="example" class="ui celled table dataTable" cellspacing="0" width="100%" role="grid" aria-describedby="example_info" style="Box-sizing: inherit; border-collapse: separate; width: 865px; background: rgb(255,255,255); margin: 0px; border: 1px solid rgba(34,36,38,0.15); Box-shadow: none; border-radius: 0.285714rem; color: rgba(0,0.87); font-size: 14px; font-family: Lato,"Helvetica Neue",sans-serif;"><thead style="Box-sizing: inherit; Box-shadow: none;"><tr role="row" style="Box-sizing: inherit;"><th class="sorting_asc" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-sort="ascending" aria-label="Name: activate to sort column descending" style="Box-sizing: content-Box; margin: 0px; padding: 0.928571em 20px 0.928571em 0.785714em; text-align: inherit; transition: background 0.1s ease,color 0.1s ease; cursor: auto; background: rgb(249,250,251); vertical-align: inherit; border-bottom-width: 1px; border-bottom-color: rgba(34,0.1); border-left: none; position: relative; border-radius: 0.285714rem 0px 0px; width: 137px;">Name</th><th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Position: activate to sort column ascending" style="Box-sizing: content-Box; margin: 0px; padding: 0.928571em 20px 0.928571em 0.785714em; text-align: inherit; transition: background 0.1s ease,0.1); border-left: 1px solid rgba(34,0.1); position: relative; width: 224px;">Position</th><th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Office: activate to sort column ascending" style="Box-sizing: content-Box; margin: 0px; padding: 0.928571em 20px 0.928571em 0.785714em; text-align: inherit; transition: background 0.1s ease,0.1); position: relative; width: 104px;">Office</th><th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Age: activate to sort column ascending" style="Box-sizing: content-Box; margin: 0px; padding: 0.928571em 20px 0.928571em 0.785714em; text-align: inherit; transition: background 0.1s ease,0.1); position: relative; width: 39px;">Age</th><th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Start date: activate to sort column ascending" style="Box-sizing: content-Box; margin: 0px; padding: 0.928571em 20px 0.928571em 0.785714em; text-align: inherit; transition: background 0.1s ease,0.1); position: relative; width: 85px;">Start date</th><th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Salary: activate to sort column ascending" style="Box-sizing: content-Box; margin: 0px; padding: 0.928571em 20px 0.928571em 0.785714em; text-align: inherit; transition: background 0.1s ease,0.1); position: relative; border-radius: 0px 0.285714rem 0px 0px; width: 83px;">Salary</th></tr></thead><tfoot style="Box-sizing: inherit; Box-shadow: none;"><tr style="Box-sizing: inherit;"><th rowspan="1" colspan="1" style="Box-sizing: content-Box; margin: 0px; padding: 0.785714em; font-weight: 400; text-align: inherit; transition: background 0.1s ease,color 0.1s ease; cursor: auto; border-top-color: rgba(34,0.15); background: rgb(249,251); vertical-align: middle; border-left: none; border-radius: 0px 0px 0px 0.285714rem;">Name</th><th rowspan="1" colspan="1" style="Box-sizing: content-Box; margin: 0px; padding: 0.785714em; font-weight: 400; text-align: inherit; transition: background 0.1s ease,251); vertical-align: middle; border-left: 1px solid rgba(34,0.1);">Position</th><th rowspan="1" colspan="1" style="Box-sizing: content-Box; margin: 0px; padding: 0.785714em; font-weight: 400; text-align: inherit; transition: background 0.1s ease,0.1);">Office</th><th rowspan="1" colspan="1" style="Box-sizing: content-Box; margin: 0px; padding: 0.785714em; font-weight: 400; text-align: inherit; transition: background 0.1s ease,0.1);">Age</th><th rowspan="1" colspan="1" style="Box-sizing: content-Box; margin: 0px; padding: 0.785714em; font-weight: 400; text-align: inherit; transition: background 0.1s ease,0.1);">Start date</th><th rowspan="1" colspan="1" style="Box-sizing: content-Box; margin: 0px; padding: 0.785714em; font-weight: 400; text-align: inherit; transition: background 0.1s ease,0.1); border-radius: 0px 0px 0.285714rem;">Salary</th></tr></tfoot><tbody style="Box-sizing: inherit;"><tr role="row" class="odd" style="Box-sizing: inherit;"><td class="sorting_1" style="Box-sizing: content-Box; margin: 0px; padding: 0.785714em; transition: background 0.1s ease,color 0.1s ease; text-align: inherit; border-top: none; border-left: none;">Airi Satou</td><td style="Box-sizing: content-Box; margin: 0px; padding: 0.785714em; transition: background 0.1s ease,color 0.1s ease; text-align: inherit; border-top: none; border-left: 1px solid rgba(34,0.1);">Accountant</td><td style="Box-sizing: content-Box; margin: 0px; padding: 0.785714em; transition: background 0.1s ease,0.1);">Tokyo</td><td style="Box-sizing: content-Box; margin: 0px; padding: 0.785714em; transition: background 0.1s ease,0.1);">33</td><td style="Box-sizing: content-Box; margin: 0px; padding: 0.785714em; transition: background 0.1s ease,0.1);">2008/11/28</td><td style="Box-sizing: content-Box; margin: 0px; padding: 0.785714em; transition: background 0.1s ease,0.1);">$162,700</td></tr><tr role="row" class="even" style="Box-sizing: inherit;"><td class="sorting_1" style="Box-sizing: content-Box; margin: 0px; padding: 0.785714em; transition: background 0.1s ease,color 0.1s ease; text-align: inherit; border-top-color: rgba(34,0.1); border-left: none;">Angelica Ramos</td><td style="Box-sizing: content-Box; margin: 0px; padding: 0.785714em; transition: background 0.1s ease,0.1);">Chief Executive Officer (CEO)</td><td style="Box-sizing: content-Box; margin: 0px; padding: 0.785714em; transition: background 0.1s ease,0.1);">London</td><td style="Box-sizing: content-Box; margin: 0px; padding: 0.785714em; transition: background 0.1s ease,0.1);">47</td><td style="Box-sizing: content-Box; margin: 0px; padding: 0.785714em; transition: background 0.1s ease,0.1);">2009/10/09</td><td style="Box-sizing: content-Box; margin: 0px; padding: 0.785714em; transition: background 0.1s ease,0.1);">$1,200,000</td></tr></tbody></table><p style="color: rgb(116,sans-serif; font-size: 13px; margin-bottom: 20px;"><br></p><p style="color: rgb(116,sans-serif; font-size: 13px; margin-bottom: 20px;"><br></p></div></h2><p><span style="color: rgb(116,sans-serif;">Nunc tincidunt,elit non cursus euismod,lacus augue ornare metus,egestas imperdiet nulla nisl quis mauris. Suspendisse a pharetra urna. Morbi dui lectus,pharetra nec elementum eget,vulputate ut nisi. Aliquam accumsan,nulla sed feugiat vehicula,lacus justo semper libero,quis porttitor turpis odio sit amet ligula. Duis dapibus fermentum orci,nec malesuada libero vehicula ut.</span></p><p><span style="color: rgb(116,sans-serif;">Integer soDales,urna eget interdum eleifend,nulla nibh laoreet nisl,quis dignissim mauris dolor eget mi. Donec at mauris enim. Duis nisi tellus,adipiscing a convallis quis,tristique vitae risus. Nullam molestie gravida lobortis. Proin ut nibh quis felis auctor ornare. Cras ultricies,nibh at mollis faucibus,justo eros porttitor mi,quis auctor lectus arcu sit amet nunc.</span></p><p><span style="color: rgb(116,quis auctor lectus arcu sit amet nunc.</span></p><div><p><span style="color: rgb(116,quis auctor lectus arcu sit amet nunc.</span></p></div><div><p><span style="color: rgb(116,quis auctor lectus arcu sit amet nunc.</span></p></div><p><br></p></page>