css之分页打印的示例代码

1. 实现分页打印的原理

在CSS中，我们可以使用@page规则来控制打印页面的样式。@page规则可以设置一些属性，如页边距、页面大小等。为了实现分页效果，我们可以使用page-break-before或page-break-after属性来控制元素在页面中的分页表现。

2. 分页打印的示例代码

下面是一个简单的示例代码，演示如何使用CSS实现分页打印的效果：

@media print {
  .pagebreak { page-break-before: always; }
}
.page {
    width: 210mm;
    height: 297mm;
    padding: 20mm;
    background-color: #ffffff;
    box-shadow: 0 0.5mm 2mm rgba(0,0,0,0.3);
    margin: 5mm auto;
}
.content {
    line-height: 1.5;
  text-align: justify;
}
h1 {
    text-align: center;
    font-size: 24px;
}
h2 {
    font-size: 18px;
    margin-top: 30px;
}
h3 {
    font-size: 16px;
    margin-top: 20px;
}
p {
    margin-top: 10px;
}
strong {
    font-weight: bold;
    color: red;
}

在上述示例代码中，我们定义了一个用于打印的页面样式（.page），并在打印时通过打印设置将页面大小设置为A4纸的大小（210mm x 297mm）。我们使用了.pagebreak类来表示分页的位置。

在.content类中，我们设置了文本的对齐方式为两端对齐（text-align: justify），这样可以让文字在页面中更好的分布。我们还设置了行高为1.5（line-height: 1.5），这样可以增加文字的可读性。

3. 根据数据动态生成分页打印效果

如果我们需要根据数据动态生成分页打印的效果，可以使用JavaScript来实现。下面是一个使用JavaScript动态生成分页打印效果的示例代码：

function generatePrintPages(data) {
    var content = document.getElementById('content');
    var pageCount = Math.ceil(data.length / 10);
  
    for (var i = 0; i < pageCount; i++) {
        var page = document.createElement('div');
        page.classList.add('page');
      
        for (var j = i * 10; j < (i + 1) * 10 && j < data.length; j++) {
            var item = document.createElement('div');
            item.innerText = data[j];
            page.appendChild(item);
        }
        
        content.appendChild(page);
        
        if (i < pageCount - 1) {
            var breakPage = document.createElement('div');
            breakPage.classList.add('pagebreak');
            content.appendChild(breakPage);
        }
    }
}
var data = [...]; // 假设这里是我们的数据
generatePrintPages(data);

上述示例代码中，我们通过generatePrintPages函数来根据数据动态生成分页打印效果。我们首先为每一页创建一个div元素，并添加.page类。然后，我们根据每页可以显示的数据量，创建相应数量的子元素，并添加到当前页的div元素中。我们还使用.pagebreak类来在页与页之间添加分页标记。

4. 总结

通过CSS的@page规则和page-break属性，我们可以很方便地在打印时实现分页效果。我们可以通过控制元素的page-break-before或page-break-after属性，来控制元素在页面中的分页表现。

如果我们需要根据数据动态生成分页打印效果，可以使用JavaScript来实现。我们可以根据数据的数量，动态生成对应数量的页面，并在页面之间添加分页标记。

通过以上的示例代码，我们可以深入了解CSS分页打印的原理，并且了解如何根据数据动态生成分页打印效果。这对于需要在打印时控制页面显示的应用场景非常有用，如打印报表、打印长文章等。