html5 a4页面,A4页面就像html中的布局

你的第二个问题：

您必须将体边距和填充设置为零.您还需要从A4类中删除框阴影,边距,宽度和高度,以便打印多个页面.

.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;

}

@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;

}

}

你的第一个问题：

您可以尝试通过计算滚动高度来创建分页功能,并继续从页面中删除元素,直到scollheight小于页面本身.

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 = $('

a4.append(removed);

$(this).after(a4);

snipMe.call(a4[0]);

}

}

$(document).ready(function() {

$('.A4').each(function() {

snipMe.call(this);

});

});

这个例子打破了每个元素.段落不会破坏单词,但你可以实现这一点,但这将变得非常复杂.