我正在尝试在网络上实现打印预览.我必须展示最终印刷品的外观.
我已经取得了类似于这个 demo的东西.
我已经取得了类似于这个 demo的东西.
var max_pages = 100;
var page_count = 0;
function snipMe() {
page_count++;
if (page_count > max_pages) {
return;
}
var long = $(this)[0].scrollHeight - Math.ceil($(this).innerHeight());
var children = $(this).children().toArray();
var removed = [];
while (long > 0 && children.length > 0) {
var child = children.pop();
$(child).detach();
removed.unshift(child);
long = $(this)[0].scrollHeight - Math.ceil($(this).innerHeight());
}
if (removed.length > 0) {
var a4 = $('<div class="A4"></div>');
a4.append(removed);
$(this).after(a4);
snipMe.call(a4[0]);
}
}
$(document).ready(function() {
$('.A4').each(function() {
snipMe.call(this);
});
});
.A4 {
background: white;
width: 21cm;
height: 29.7cm;
display: block;
margin: 0 auto;
padding: 10px 25px;
margin-bottom: 0.5cm;
Box-shadow: 0 0 0.5cm rgba(0,0.5);
overflow-y: scroll;
Box-sizing: border-Box;
font-size: 12pt;
}
@media print {
.page-break {
display: block;
page-break-before: always;
}
size: A4 portrait;
}
@media print {
body {
margin: 0;
padding: 0;
}
.A4 {
Box-shadow: none;
margin: 0;
width: auto;
height: auto;
}
.noprint {
display: none;
}
.enable-print {
display: block;
}
}
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<div class="A4">
<h1>
Title
</h1>
<p> 1Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam,feugiat vitae,ultricies eget,tempor sit amet,ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi,condimentum sed,commodo vitae,ornare sit amet,wisi. Aenean fermentum,elit eget tincidunt condimentum,eros ipsum rutrum orci,sagittis tempus
lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus,neque id cursus faucibus,tortor neque egestas augue,eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi,tincidunt quis,accumsan porttitor,facilisis luctus,metus</p>
<p>2 Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam,metus</p>
<p>3 Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam,metus</p>
<h1>
Hey you!
</h1>
<p>4 Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam,wisi. Aenean f ermentum,metus</p>
<p>5 Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam,metus</p>
<p> 6 Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam,metus</p>
<p>7 Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam,metus</p>
<p>8 Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam,metus</p>
<p>9 Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam,metus</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam,metus</p>
<h1>
Lorum lorum lorum
</h1>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam,metus</p>
</div>
在此处输入代码
但是这个算法的问题在于,如果元素高度大于可用高度,它会将整个内容剪切到下一页.如何在不失去HTML设计结构的情况下打破内容,就像打印预览一样.
附加了一个用于reference的图像,其中用户头像移动到下一页并失去其位置.
解决方法
$(function(){
var content_height = 652; // the height of the content,discluding the header/footer
var page = 1; // the beginning page number to show in the footer
function buildNewsletter(){
if($('#newsletterContent').contents().length > 0){
// when we need to add a new page,use a jq object for a template
// or use a long HTML string,whatever your preference
$page = $("#page_template").clone().addClass("page").css("display","block");
// fun stuff,like adding page numbers to the footer
$page.find(".footer span").append(page);
$("body").append($page);
page++;
// here is the columnizer magic
$('#newsletterContent').columnize({
columns: 1,target: ".page:last .content",overflow: {
height: content_height,id: "#newsletterContent",doneFunc: function(){
buildNewsletter();
}
}
});
}
}
setTimeout(buildNewsletter,10);
});
.page
{
width: 612px;
height: 792px;
margin: 20px;
position: relative;
Box-shadow: 0 0 0.5cm rgba(0,0.5);
}
.page .content .column{
text-align:justify;
font-size: 10pt;
}
.page .content .column blockquote{
border-left: 2px solid #999999;
background: #DEDEDE;
padding: 10px;
margin: 4px 20px;
clear: both;
}
.page .content .column img{
float: left; margin: 10px;
}
.page .content .column p{
padding: 0 10px; margin: 10px 0;
}
.page .content .column h1{
padding: 0 10px;
}
.page .header{
text-align: center;
font-size: 18pt;
font-family: helvetica,arial;
padding: 20px 0 0;
}
.page .header hr,.page .footer hr{
width: 400px;
}
.page .footer{
text-align: center;
}
.page .footer span{
position: absolute;
bottom: 10px; right: 10px;
}
#page_template{
display: none;
}
.enclosure
{
border:1px dashed black;
}
<script src="https://welcome.totheinter.net/autocolumn/jquery.js"></script>
<script src="https://welcome.totheinter.net/autocolumn/autocolumn.min.js"></script>
<div id="page_template">
<div class='header'>This is a header<hr></div>
<div class='content'></div>
<div class='footer'><hr><span>Page: </span>This is the footer.</div>
</div>
<div id="newsletterContent">
<h1>
Title
</h1>
<p> 1Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam,metus</p>
</div>
您是否尝试过使用columinizer检查此link
