Shr*_*han 11 html javascript css vue.js
我有一个通过许多Vue组件生成的大型网页.渲染的HTML结构有点类似于:
<header></header>
<element1></element1>
<element2></element2>
<element3></element3>
<table></table>
<element4></element4>
<footer></footer>
我想在A5页面上很好地打印这个页面header并footer在每个打印页面上重复.我用2种方法试过这个:
将HTML结构转换为页面容器并基于总计分割元素clientHeight.就像是
<section class="page">
<header></header>
<element1></element1>
<element2></element2>
<element3></element3>
<footer></footer>
</section>
<section class="page">
<header></header>
<table></table>
<element4></element4>
<footer></footer>
</section>
或者,将CSS分页符属性添加到header内容溢出位置并动态插入.例如
<header></header>
<element1></element1>
<element2></element2>
<element3></element3>
<footer></footer>
<header style="page-break-before: always"></header>
<table></table>
<element4></element4>
<footer></footer>
DOM遍历找到溢出点的样子
var availHeight = 20; // Height of A5 page - tolerance
var body = document.querySelector('body');
var initialWidth = body.style.width;
body.style.width = '14.85cm';
if (body.clientHeight > availHeight) { // if content exceeds page height
var scrollHeight = 0;
for (var i = 0; i < body.children.length; i++) {
var child = body.children[i];
scrollHeight += child.clientHeight;
if (scrollHeight > availHeight) { // if children traversed till now make up to the height of page
if (child.clientHeight < availHeight) {
child.insertAdjacentHTML('beforebegin', '"page break html here..."');
scrollHeight = 0;
}
}
}
}
body.style.width = initialWidth;
但是,这两种方法在打印时都会产生不准确的结果.
@pageSafari不支持CSS ,因此无用.
display: table-header-group而且table-footer-group也不起作用.
是否有不同的跨浏览器解决方案来实现具有重复页眉和页脚的精美打印页面,而不是剪切/重叠任何内容,或者是否可以将DOM遍历代码改进为更通用和稳定？可以在这里纠正或简化事情吗？
提前致谢.我还没有达成一个令人满意的解决方法或解决方案.
我在这里做了类似的任务，但它只是为了格式化页面以在多页面设计中查看。使用类似的方法，我们可以实现它以添加页眉和页脚进行打印。让我知道它是否适合您以及您是否需要任何帮助。
$(function(){
function printFormat($contentElement){
//Preparing Temporary Page
var $printWrapper=$('.printWrapper').empty();
var $tempA5=$('<div class="page-a5">').appendTo($printWrapper);
$contentElement.clone().children().appendTo($tempA5);
var $header = $tempA5.find('.header'), $footer = $tempA5.find('.footer');
var pageHeight = $tempA5.height(), headerHeight = $header.height(), footerHeight = $footer.height();
$header.remove();$footer.remove();
//Generating Pages
var $pageA5=$('<div class="page-a5">').appendTo($printWrapper).append($header.clone());
var $pagefooter=$footer.clone().appendTo($pageA5),$bottomLine=$('<div>').appendTo($pageA5);
var $elements=$tempA5.children();
var i=-1, totalChildren=$elements.length;
while(++i<totalChildren){
var $element=$elements.eq(i);
var $element_copy=$element.clone().insertBefore($pagefooter);
if($bottomLine[0].offsetTop>pageHeight) {
$pageA5=$('<div class="page-a5">').appendTo($printWrapper).append($header.clone());
$pagefooter=$footer.clone().appendTo($pageA5);
$bottomLine=$('<div>').appendTo($pageA5);
$element_copy.insertBefore($pagefooter);
}
}
$tempA5.remove();
$printWrapper.find('.footer').each(function(i,el){
$(el).css("marginTop",pageHeight-el.nextSibling.offsetTop);
});
$contentElement.hide();
}
printFormat($("#contents"));
});.page-a5{
position: relative;
width: 720px;
height: 1068px;
margin: auto;
}
.header{
font-size: 20px;
padding: 20px;
background: orange;
}
.footer{
font-size: 20px;
padding: 20px;
background: blue;
}
@media print {
body,
page {
margin: 0;
box-shadow: 0;
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="printWrapper"></div>
<div id="contents">
<div class="header">Header :)</div>
<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><p style="text-align: center; color: rgb(116, 116, 116); font-family: "PT Sans", Arial, Helvetica, 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, 116, 116); font-family: "PT Sans", Arial, Helvetica, sans-serif; font-size: 13px; margin-bottom: 20px;"><span style="color: rgb(107, 113, 122);">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 </span><span style="color: rgb(107, 113, 122);">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.</span></p><h3 style="color: rgb(116, 116, 116); font-family: "PT Sans", Arial, Helvetica, sans-serif; font-size: 13px; margin-bottom: 20px;"><ul style="box-sizing: inherit; color: rgb(0, 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, 116, 116); font-family: "PT Sans", Arial, Helvetica, 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, 113, 122);">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.</span><br></h3><ol style="box-sizing: inherit; color: rgb(0, 0, 0); font-family: Verdana, 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, 116, 116); font-family: "PT Sans", Arial, Helvetica, sans-serif; font-size: 13px; margin-bottom: 20px;"><span style="color: rgb(107, 113, 122);">The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section</span><span style="color: rgb(107, 113, 122);"> 1.10.32. </span><span style="color: rgb(107, 113, 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, 113, 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; 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, 0, 0.87); font-size: 14px; font-family: Lato, "Helvetica Neue", Arial, Helvetica, 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, 36, 38, 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, color 0.1s ease; cursor: auto; background: rgb(249, 250, 251); vertical-align: inherit; border-bottom-width: 1px; border-bottom-color: rgba(34, 36, 38, 0.1); border-left: 1px solid rgba(34, 36, 38, 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, color 0.1s ease; cursor: auto; background: rgb(249, 250, 251); vertical-align: inherit; border-bottom-width: 1px; border-bottom-color: rgba(34, 36, 38, 0.1); border-left: 1px solid rgba(34, 36, 38, 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, color 0.1s ease; cursor: auto; background: rgb(249, 250, 251); vertical-align: inherit; border-bottom-width: 1px; border-bottom-color: rgba(34, 36, 38, 0.1); border-left: 1px solid rgba(34, 36, 38, 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, color 0.1s ease; cursor: auto; background: rgb(249, 250, 251); vertical-align: inherit; border-bottom-width: 1px; border-bottom-color: rgba(34, 36, 38, 0.1); border-left: 1px solid rgba(34, 36, 38, 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, color 0.1s ease; cursor: auto; background: rgb(249, 250, 251); vertical-align: inherit; border-bottom-width: 1px; border-bottom-color: rgba(34, 36, 38, 0.1); border-left: 1px solid rgba(34, 36, 38, 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, 36, 38, 0.15); background: rgb(249, 250, 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, color 0.1s ease; cursor: auto; border-top-color: rgba(34, 36, 38, 0.15); background: rgb(249, 250, 251); vertical-align: middle; border-left: 1px solid rgba(34, 36, 38, 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, color 0.1s ease; cursor: auto; border-top-color: rgba(34, 36, 38, 0.15); background: rgb(249, 250, 251); vertical-align: middle; border-left: 1px solid rgba(34, 36, 38, 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, color 0.1s ease; cursor: auto; border-top-color: rgba(34, 36, 38, 0.15); background: rgb(249, 250, 251); vertical-align: middle; border-left: 1px solid rgba(34, 36, 38, 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, color 0.1s ease; cursor: auto; border-top-color: rgba(34, 36, 38, 0.15); background: rgb(249, 250, 251); vertical-align: middle; border-left: 1px solid rgba(34, 36, 38, 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, color 0.1s ease; cursor: auto; border-top-color: rgba(34, 36, 38, 0.15); background: rgb(249, 250, 251); vertical-align: middle; border-left: 1px solid rgba(34, 36, 38, 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, 36, 38, 0.1);">Accountant</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, 36, 38, 0.1);">Tokyo</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, 36, 38, 0.1);">33</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, 36, 38, 0.1);">2008/11/28</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, 36, 38, 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, 36, 38, 0.1); border-left: none;">Angelica Ramos</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-color: rgba(34, 36, 38, 0.1); border-left: 1px solid rgba(34, 36, 38, 0.1);">Chief Executive Officer (CEO)</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-color: rgba(34, 36, 38, 0.1); border-left: 1px solid rgba(34, 36, 38, 0.1);">London</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-color: rgba(34, 36, 38, 0.1); border-left: 1px solid rgba(34, 36, 38, 0.1);">47</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-color: rgba(34, 36, 38, 0.1); border-left: 1px solid rgba(34, 36, 38, 0.1);">2009/10/09</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-color: rgba(34, 36, 38, 0.1); border-left: 1px solid rgba(34, 36, 38, 0.1);">$1,200,000</td></tr></tbody></table><p style="color: rgb(116, 116, 116); font-family: "PT Sans", Arial, Helvetica, sans-serif; font-size: 13px; margin-bottom: 20px;"><br></p><p style="color: rgb(116, 116, 116); font-family: "PT Sans", Arial, Helvetica, sans-serif; font-size: 13px; margin-bottom: 20px;"><br></p></h2><p><span style="color: rgb(116, 116, 116); font-family: "PT Sans", Arial, Helvetica, 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, 116, 116); font-family: "PT Sans", Arial, Helvetica, 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, 116, 116); font-family: "PT Sans", Arial, Helvetica, 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, 116, 116); font-family: "PT Sans", Arial, Helvetica, 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><div><p><span style="color: rgb(116, 116, 116); font-family: "PT Sans", Arial, Helvetica, 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, 116, 116); font-family: "PT Sans", Arial, Helvetica, 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></div><div><p><span style="color: rgb(116, 116, 116); font-family: "PT Sans", Arial, Helvetica, 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, 116, 116); font-family: "PT Sans", Arial, Helvetica, sans-serif;">Integer sodales,
| 归档时间： |
|
| 查看次数： |
475 次 |
| 最近记录： |