类似于html中布局的A4页面
类似于html中布局的A4页面
提问于 2016-09-14 08:56:38
我的工作是基于网络的小应用程序，用户是显示2-3页长的报告，可以打印为PDF格式。我在stackoverflow / internet上查看了不同的解决方案，并在打印端找到了一些可行的解决方案(内容有额外的边距打印，但我需要解决这个问题)，我目前的问题是，我无法在带有页面布局的浏览器中显示html内容。我能够显示具有A4大小的第一页，但是一旦内容超过1页，它看起来就像是打印在外部的页面，您可以检查下面的图像。
- 如何在浏览器中显示页面
- 打印预览是什么样子
这是CSS
.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,0,0.5);
}
@media print {
.page-break { display: block; page-break-before: always; }
size: A4 portrait;
}
@media print {
.noprint {display:none;}
.enable-print { display: block; }
}我正在努力解决以下问题，
- 如果所有的报表都以类似页面的布局显示(另外，如果我可以用水平分页而不是长垂直页显示页面)，我会很喜欢的。
- 打印时没有填充问题，您看到的是打印！
回答 3
Stack Overflow用户
回答已采纳
发布于 2016-09-14 09:56:52
你的第二个问题：
你必须把身体边缘和填充设置为零。还需要从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, 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;
}
}您的第一个问题：
您可以尝试通过计算滚动高度来创建分页功能，并继续从页面中删除元素，直到页面的高度小于页面本身为止。
示例：https://jsfiddle.net/tk8rwnav/31/
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);
});
});这个示例对每个元素都进行了分解。段落不会打断文字，但您可以实现这一点，但这将变得非常复杂的速度。
Stack Overflow用户
发布于 2017-02-20 13:40:12
下面是snipMe()函数的修订版，以确保第2-n页中的元素按原来的顺序排列。我还补充了一些意见。
function snipMe() {
page_count++;
if (page_count > max_pages) {
return;
}
var long = $(this)[0].scrollHeight - Math.ceil($(this).innerHeight());
var children = $(this).children().toArray(); // Save elements in this page to children[] array
var removed = [];
// Loop while this page is longer than an A4 page
while (long > 0 && children.length > 0) {
var child = children.pop(); // Remove last array element from the children[] array
$(child).detach(); // JQuery Method detach() removes the "child" element from DOM for the current page
removed.push(child); // Add element that was removed to the end of "removed" array
long = $(this)[0].scrollHeight - Math.ceil($(this).innerHeight()); // Compute current size of the page
}
// If elements were removed from the page
if (removed.length > 0) {
var rev_removed = removed.reverse(); // Reverse the order of the removed array
var a4 = $('<div class="A4"></div>'); // Start a new page
a4.append(rev_removed); // Add elements removed from last page to the new page
$(this).after(a4); // Add the new page to the document
snipMe.call(a4[0]); // Recursively call myself to adjust the remainder of the pages
}
}Stack Overflow用户
发布于 2016-09-14 09:17:38
默认情况下，还会为打印添加页边距。如果你点击“更多的设置”，就会有一个空白处的下拉菜单。选择“无”以删除所有边距。
这样，您就能够处理css中的边距。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/39486352
复制相关文章
相似问题
腾讯云开发者
