html - 在 React 应用程序的 <table> 中插入分页符-6ren

html - 在 React 应用程序的中插入分页符

转载作者：太空宇宙更新时间：2023-11-03 22:28:00

所以基本上，我的表有一堆子标题，我想在这么多子节之后插入一个分页符，以防止在其中一个节的中间自动分页。大致是这样看的灰色区域是分页符所在的子标题，如果它像第 4、8、12 等小节。

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

1) <div>作为 <table> 的 child , <tbody> , <thead>问题:

我最初的想法是只插入 <div className='pagebreak'>每 4 次之后 <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

似乎您不能在 <table> 中放置任何类型的分页符标签。

2) 创建一个新的 <table>对于每个小节。

它看起来就像废话，因为列宽会因表而异，除非我将宽度设为静态，而我不想这样做。希望让它们保持动态，同时让所有列的宽度始终相同，这由给定列中数据点的最大宽度决定。

话虽如此，这确实有效，因为它实际上插入了一个分页符:

    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>
            </tbody>
        </table>
        <div className='pagebreak'></div>
        <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>
            </tbody>
        </table>   
    )

对于如何处理这个问题有什么建议吗？

最佳答案

以 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'));

关于html - 在 React 应用程序的 <table> 中插入分页符，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50204990/

文章推荐： c++ - 链接 OpenCV 3.0。 QT Creator 的库

文章推荐： c# - Internet Explorer 无法打开网站

文章推荐： c# - 不可见的控件仍在渲染

文章推荐： opencv - 在 UWP Windows 10 应用程序上使用 openCV

太空宇宙

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城