Question

所以基本上，我的表有一堆子标题，我希望在这么多的子章节之后插入分页符，并防止在其中一个部分的中间自动分页。它大致看起来如此。灰色区域是子标题，如果像第4章，第8章，第12章等那样，分页符将在之前。

我遇到的两个主要问题可能是也可能不是React独有的。此外，我正在使用Bootstrap。

1）<div>作为<table>，<tbody>，<thead>问题的孩子：

我最初的想法是每隔4 <div className='pagebreak'>插入<th>。这将触发错误（释义）为<div> cannot be a child of <table>/<tbody>/<thead>。

因此，不允许执行以下操作：

let i = 1;

return _.map(section, s => {
    i++;
    return (
        <table>
            <tbody>
                <tr>
                    <th colSpan='6'>{s.subSectionTitle}</th>
                </tr>
                <tr>
                    <td>{s.data1}</td>
                    <td>{s.data2}</td>
                    <td>{s.data3}</td>
                    <td>{s.data4}</td>
                    <td>{s.data5}</td>
                    <td>{s.data6}</td>
                </tr>
                { i = 4 ? <div className='pagebreak'></div> : null }
            </tbody>
        </table>
    )
})

其他一些明智的想法我没做过的工作就是做：

{ i = 4 ? <tr className='pagebreak'></tr> : null }

或者：

{ i = 4 ? <th><td className='pagebreak'></th></tr> : null }

或者：

虽然这些会导致错误，但他们什么也做不了。它将忽略{ i = 4 ? <tr><th><div className='pagebreak'></div></th></tr> : null }

似乎您无法在pagebreak标记内放置任何类型的分页符。

2）创建每个子部分都有一个新的<table>。

它看起来就像垃圾一样，因为列宽会因表格而异，除非我将宽度设为静态而我不会这样做想做。想让它们保持动态，同时让所有列的宽度都相同，这取决于给定列中数据点的最大宽度。

话虽如此，这确实有效实际上插入分页符：

<table>

有关如何处理此问题的任何建议吗？

Answer 1

基于Rounin的响应，以显示在React示例中有效的方法：

@media print {

    tr {
        display: block;
    }

    .pagebreak {
        break-after: always !important;
        page-break-after: always !important;
        page-break-inside: avoid !important;
    }
}

// component.jsx
import React, { Component } from 'react';
import ReactDOM from 'react-dom';

import styles from '../assets/scss/app.scss';

class TestPrint extends Component {
    constructor(props) {
        super(props);
        this.state = {
            data: [
                'test', 'test', 'test', 'test', 'test', 'test',
                'test', 'test', 'test', 'test', 'test', 'test',
                'test', 'test', 'test', 'test', 'test', 'test',
                'test', 'test', 'test', 'test', 'test', 'test',
                'test', 'test', 'test', 'test', 'test', 'test',
                'test', 'test', 'test', 'test', 'test', 'test',
                'test', 'test', 'test', 'test', 'test', 'test',
                'test', 'test', 'test', 'test', 'test', 'test'
            ]
        }
    }

    renderContent() {
        let i = 0;
        return this.state.data.map((d) => {
            i++
            if (i % 10 === 0) {
                return (
                    <tr key={i} className='pagebreak'>
                        <td key={i}>{i} - {d}</td>
                    </tr>                    
                )
            } else {
                return (
                    <tr key={i}>
                        <td key={i}>{i} - {d}</td>
                    </tr>
                )
            }
        });
    }

    render() {
        return (
            <table>
                <tbody>
                    { this.renderContent() }
                </tbody>
            </table>
        )
    }
}

ReactDOM.render(<TestPrint />, document.getElementById('app'));

Answer 2

这是正确的：

<div>不能是<table>或<tbody>或<thead>
的孩子

但没有什么可以阻止你对表进行标记和样式设置，以便每隔一段时间就有一行，设置为块级元素，表示在CSS中使用以下内容声明的分页符：

page-break-before: always;

并且包含单个无内容数据单元，使用：

<td colspan="7">

您还可以使用以下方法避免传统表格行中的分页符：

page-break-before: avoid

工作示例：

＆＃13;

table {
border-collapse: collapse;
}

td {
height: 12px;
padding: 6px 24px;
border: 1px solid rgb(0, 0, 0);
}

tr {
page-break-before: avoid;
}

tr.page-break {
display: block;
page-break-before: always;
}

tr.page-break td {
border: 1px solid rgba(0, 0, 0, 0);
}

＆＃13;

<table>
<tr class="page-break">
<td colspan="7">
</tr>

<tr>
<td>A1</td>
<td>A2</td>
<td>A3</td>
<td>A4</td>
<td>A5</td>
<td>A6</td>
<td>A7</td>
</tr>

<tr>
<td>B1</td>
<td>B2</td>
<td>B3</td>
<td>B4</td>
<td>B5</td>
<td>B6</td>
<td>B7</td>
</tr>

<tr>
<td>C1</td>
<td>C2</td>
<td>C3</td>
<td>C4</td>
<td>C5</td>
<td>C6</td>
<td>C7</td>
</tr>

<tr>
<td>D1</td>
<td>D2</td>
<td>D3</td>
<td>D4</td>
<td>D5</td>
<td>D6</td>
<td>D7</td>
</tr>

<tr>
<td>E1</td>
<td>E2</td>
<td>E3</td>
<td>E4</td>
<td>E5</td>
<td>E6</td>
<td>E7</td>
</tr>

<tr>
<td>F1</td>
<td>F2</td>
<td>F3</td>
<td>F4</td>
<td>F5</td>
<td>F6</td>
<td>F7</td>
</tr>

<tr class="page-break">
<td colspan="7">
</tr>

<tr>
<td>G1</td>
<td>G2</td>
<td>G3</td>
<td>G4</td>
<td>G5</td>
<td>G6</td>
<td>G7</td>
</tr>
</table>

＆＃13;

进一步阅读page-break- *属性：

https://css-tricks.com/almanac/properties/p/page-break/

在React app中插入分页符

2 个答案: