HTML中如何实现内容分页打印？

如：我现在在一个网页中，显示了10条简历，每一个简历就是一页，在打印时，将每一个简历单独打印在一张A4纸上？也就是说，这个网页按CTRL+P打印，打印10张A4的纸。

我的想法是，在简历的起始代码中，加上某个标签，在打印时，从这个标签开始就是一张新的打印。

就是强制分页是吧 age-break-after: always;

<div style="page-break-after: always;">
</div>
<div style="page-break-after: always;">
</div>
<div style="page-break-after: always;">
</div>
<div style="page-break-after: always;">
</div>

具体实现可以参考如下链接地址: 主要用到 css属性:page-break-after: always;

https://www.cnblogs.com/hellowzl/p/15626408.html

把不需要打印的部分添加class="no_print"就行了


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <style>
        @media print {
            .no_print {
                display: none;
            }
        }
    </style>
    <div class="no_print">不打印这部分</div>
    <div>打印这部分</div>
    <div class="no_print">不需要打印的加上no_print样式就行了</div>
    <div>要打印的移除样式</div>

</body>

</html>

设置只有打印时才起作用的样式，样式就是A4纸的宽高标准，每个简历都在这个宽高内就可以了

这个其实就是强制分页，也就是说，你给每个简历的div加上style="page-break-after: always;"也及时如下：

<div style="page-break-after: always;">
简历1
</div>
<div style="page-break-after: always;">
简历2
</div>
<div style="page-break-after: always;">
简历3
</div>
<div style="page-break-after: always;">
简历4
</div>
<div style="page-break-after: always;">
简历5
</div>
<div style="page-break-after: always;">
简历6
</div>
<div style="page-break-after: always;">
简历7
</div>
<div style="page-break-after: always;">
简历8
</div>
<div style="page-break-after: always;">
简历9
</div>
<div style="page-break-after: always;">
简历10
</div>


 
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>分页打印</title>
</head>
 
<body>
  
    <div style="page-break-after: always;">简历1</div>
    <div style="page-break-after: always;">简历2</div>
    <div style="page-break-after: always;">简历3</div>
    <div style="page-break-after: always;">简历4</div>
 
</body>
 
</html>