1, the preface

I received a request to page in a specified location when printing

A bit of Internet research turned up two useful attributes

Break – after and page – break – inside

Break-after can be used to force paging

Page-break-inside :avoid inserting page breaks inside elements

Let’s look at two application scenarios

2, break – after

import "./main.css";
const listA = [];
const listB = [];
(function getData() {
  for (let i = 0; i < 30; i++) {
    const itemA = {
      no: i,
      name: ` armour${i}`.gender: "Male"};const itemB = {
      no: i,
      name: ` b${i}`.gender: "Female"}; listA.push(itemA); listB.push(itemB); }}) ();function Main() {
  return (
    <div className="container">
      <table>
        <thead>
          <tr>
            <th>The serial number</th>
            <th>The name</th>
            <th>gender</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>The serial number</th>
            <th>The name</th>
            <th>gender</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;

Copy the code

​

.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;
}
Copy the code

Results the following

I put two tables, under normal circumstances, press Ctrl+P in the browser to print, the print effect is shown below

From the above we can see that the two tables are joined together, what we need is that the two tables cannot be printed on the same page, they need to be separated

For example, table 1 is a page and a half high, and Table 2 is a page and a half high

So the two tables need to print 3 pages,

The first page is filled with the contents of Table 1

The second page is half table 1 and half Table 2

The third page is filled with the contents of Table 2

Now the requirement is that table 1 on page 2 wants to have a page, not table 2

This is where our break-after comes in handy

table {
    margin: auto;
    border-collapse: collapse;
    border: 2px solid black;
    break-after:always; 
}
Copy the code

Add break-after:always to the table element to force paging at the end of the table (you can also add it to other elements)

The print effect is as follows

2, page – break – inside

Again, the example above

If table 1 is too long and divided into two pages, it is possible to split a row in the middle of a page, resulting in a whole row with half of it here and half of it there

You can use the page-break-inside property to solve the problem. Page-break-inside :avoid inserting page breaks inside elements

We add page-break-inside:avoid to tr

tbody tr {
    border-bottom: 2px solid black;
    page-break-inside:avoid
}
Copy the code

It can also be added to other elements to avoid pagination within that element

Reference:

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

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