css实现多div打印分页问题

最新推荐文章于 2024-01-12 10:21:51 发布

25号底片~

最新推荐文章于 2024-01-12 10:21:51 发布

阅读量1.2k

点赞数 1

文章标签： css 前端

本文链接：https://blog.csdn.net/weixin_46001736/article/details/131511185

版权

通过CSS的@mediaprint媒体查询和page-break-after属性，可以确保每个带.print-page类的<div>在打印时单独占据一页。添加page-break-after:always;到.print-page类，会在每个此类<div>后插入分页符，从而实现分页效果。预览打印页面可使用浏览器的打印预览功能。

摘要由CSDN通过智能技术生成

要实现在打印时每个 <div> 都能单独展示在一页上，你可以使用CSS的@media print 媒体查询和page-break-after属性。

首先，你可以添加一个特殊的类名，用于表示需要在打印时分页的 <div> 元素。

<div class="print-page">
    <!-- 这个div将在打印时分页显示 -->
</div>

然后，你可以使用CSS的@media print 媒体查询来设置打印样式，并使用page-break-after属性在每个需要分页的 <div> 后添加分页符。

<style>
    @media print {
        .print-page {
            page-break-after: always; /* 添加分页符，在每个print-page div之后分页 */
        }
    }
</style>

这样，在打印时，每个带有 .print-page 类名的 <div> 将会单独展示在一页上。

请注意，为了在预览打印页面时看到效果，你可以使用浏览器的打印预览功能。你可以通过按下 Ctrl + P（在Windows）或 Command + P（在Mac）来快速预览打印效果。

以下是一个完整的示例：

<style>
    @media print {
        .print-page {
            page-break-after: always; /* 添加分页符，在每个print-page div之后分页 */
        }
    }
</style>

<div class="print-page">
    <!-- 第一个需要分页的内容 -->
</div>

<div class="print-page">
    <!-- 第二个需要分页的内容 -->
</div>

使用上述代码，在打印时，每个带有 .print-page 类名的 <div> 将单独展示在一页上。