A4页面像HTML中的布局

Question

我正在处理基于小型网站的应用程序，其中用户呈现2-3页长的报告，可以打印为PDF格式。我在stackoverflow/internet上查看了不同的解决方案，发现打印方面有些可行的解决方案（内容打印额外的利润率，但我需要解决这个问题）我目前的问题是我无法在浏览器中显示html内容页面像布局。我能够显示第1页与A4大小，但只要内容超出1页却显示为它印以外的网页，你可以检查以下

1. 的影像如何在浏览器中显示的页面

2. 它是如何打印预览看起来像

这里是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; } 
} 

我试图解决以下问题，如果所有的报告显示与像页面布局

1. 很想（另外，如果我能表现出水平分页的页面，而不是长的垂直页）
2. 打印时没有填充问题，您看到的是打印！

Answer 1

你的第二个问题：

您对身体有margin和padding设置为零。您还需要从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; 
    } 
} 

你的第一个问题：

您可以尝试通过计算scrollHeight属性创建一个分页功能，并保持去除页面元素，直到该scollheight比页面本身较小。

实施例：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); 
    }); 
}); 

这个例子破坏每一元件上。段落不会在文字上打破，但是您可以实现这一点，但这会变得非常快速。

Answer 2

默认情况下会为打印添加页边距。如果您点击“更多设置”，则会有一个边距下拉菜单。选择无以删除所有边距。

这样你就可以处理CSS内的边距。

Answer 3

下面是snipMe（）函数的修订版本，用于确保Page 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 
     } 
    }