文档打印强制分页以及指定元素避免分页

1、前言

之前接到一个需求，在打印的时候，在指定位置进行分页

网上搜索了一番，找到了两个很有用的属性

break-after和page-break-inside

break-after可以用来强制分页

page-break-inside:avoid可以避免在元素内插入分页符

来看看两种的应用场景

2、break-after

import "./main.css";
const listA = [];
const listB = [];
(function getData() {
  for (let i = 0; i < 30; i++) {
    const itemA = {
      no: i,
      name: `甲${i}`,
      gender: "男",
    };
    const itemB = {
      no: i,
      name: `乙${i}`,
      gender: "女",
    };

    listA.push(itemA);
    listB.push(itemB);
  }
})();
function Main() {
  return (
    <div className="container">
      <table>
        <thead>
          <tr>
            <th>序号</th>
            <th>姓名</th>
            <th>性别</th>
          </tr>
        </thead>
        <tbody>
          {listA.map((cur) => {
            return (
              <tr>
                <td>{cur.no}</td>
                <td>{cur.name}</td>
                <td>{cur.gender}</td>
              </tr>
            );
          })}
        </tbody>
      </table>
      <table>
        <thead>
          <tr>
            <th>序号</th>
            <th>姓名</th>
            <th>性别</th>
          </tr>
        </thead>
        <tbody>
          {listB.map((cur) => {
            return (
              <tr>
                <td>{cur.no}</td>
                <td>{cur.name}</td>
                <td>{cur.gender}</td>
              </tr>
            );
          })}
        </tbody>
      </table>
    </div>
  );
}

export default Main;

复制代码

​

.container {
    margin: 50px 0px;
}
table {
    margin: auto;
    border-collapse: collapse;
    border: 2px solid black;
    /* break-after:always; */
}

tbody tr {
    border-bottom: 2px solid black;
}
tbody td {
    border-right: 2px solid black;
}
复制代码

效果如下

我放了两个表，在正常情况下，在浏览器按Ctrl+P打印，打印效果如下显示

从上面我们可以看到，两个表是连在一起的，我们需要的是两个表不能打印在同一页，需要分开

比如表1高度为1页半，表2高度为1页半

那么两个表共需要打印3页，

第一页都是表1的内容

第二页一半表1，一半表2

第三页都是表2内容

现在的需求是，第二页的表一想独占一页，不想跟表2一起

这个时候，我们的break-after就派上用场了

table {
    margin: auto;
    border-collapse: collapse;
    border: 2px solid black;
    break-after:always; 
}
复制代码

在table元素中，加上break-after:always，代表在table结尾强制分页（也可以加在其他元素中

打印效果如下

2、page-break-inside

还是上面的例子

表1如果太长，分了两页，那么分页的时候，有可能刚好在行中间分割，导致一个整行一半在这，一半在那，不太美观

可以利用page-break-inside属性解决问题，page-break-inside:avoid避免在元素内部插入分页符

我们在tr中加入page-break-inside:avoid

tbody tr {
    border-bottom: 2px solid black;
    page-break-inside:avoid
}
复制代码

解决，搞定，也可以加在其他元素，避免在该元素内分页

参考：

• developer.mozilla.org/zh-CN/docs/…

• developer.mozilla.org/zh-CN/docs/…