如果不弄乱表格格式，就无法分页工作

Posted 2023-02-22

【中文标题】如果不弄乱表格格式，就无法分页工作

【英文标题】：Can't page break to work without messing up the table formatting

【发布时间】：2019-01-31 06:54:32

【问题描述】：

我一直遇到表格中的分页符问题。以为我有一个解决方案，因为它在这个 SO 问题中运行良好：

Inserting a page break into of <table> in React app

这对于只有一列的表格很有效，但现在我正在处理多列，这很混乱。

基本上我必须包含display: block 才能使分页符正常工作，但这使它从格式良好的表格变为：

我已经在 MDN 中列出了列表，只是尝试了任何可行的方法。

https://developer.mozilla.org/en-US/docs/Web/CSS/display

此外，分页符仅在单独的<tr> 上起作用，这是不可取的，因为它会生成一个空白页面。 通过将pagebreak 移动到<tr> 来解决这个问题而不是<td>。

我无法解决这些问题；有关如何解决此问题的任何建议？

不确定 JSFiddle 在打印问题上有多大用处，但这里是编译后的 html。我永远无法让 JSFiddle 与 React 一起工作：

https://jsfiddle.net/5gz62d91/

最好的可能是 Github 存储库：

https://github.com/ishraqiyun77/page-breaks

下面是单独的代码：

import React,  Component  from 'react';
import ReactDOM from 'react-dom';

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

class PageBreakIssues extends Component 

    // Render the data points
    renderDataPoint() 
        let dataPoint = [];
        for (let i = 1; i <= 3; i++) 
            let num = (Math.random() * 100).toFixed(2);
            dataPoint.push(
                <td className='data-point' key= i >
                     num < 25 ? null : num 
                </td>
            )
        
        return dataPoint;
    

    // Start generating the row data
    renderDataRow() 
        let dataRow = [];
        for (let i = 1; i <= 5; i++) 
            dataRow.push(
                <tr key= i >
                    <td className='data-name' colSpan='3' key=i>Test -  i </td>
                     this.renderDataPoint() 
                </tr>
            )
        
        return dataRow;
    

    // Start generating table sections with the section name
    // COMMENT THIS OUT TO TRY WITOUT ADDING A BLANK ROW
    renderSections() 
        let sections = [];
        for (let i = 1; i <= 10; i++) 
            sections.push(
                <tbody key= i >

                    <tr key= i >
                        <td colSpan='7' className='section-name' key=i >
                            Section -  i 
                        </td>
                    </tr>
                     this.renderDataRow() 
                    
                        i % 2 === 0
                            ?
                            <tr className='pagebreak'>
                                <td colSpan='7'></td>
                            </tr>
                            :
                            null
                    
                </tbody>
            )
           
        return sections;
    

    // Start generating table sections with the section name
    // UNCOMMENT THIS SECTION TO TRY WITHOUT INSERT BLANK TR
    // renderSections() 
    //     let sections = [];
    //     for (let i = 1; i <= 10; i++) 
    //         sections.push(
    //             <tbody key=i>
    //                 <tr key=i>
    //                     <td colSpan='7' className= i % 2 === 0? 'section-name pagebreak' : 'section-name' key=i >
    //                         Section - i
    //                     </td>
    //                 </tr>
    //                 this.renderDataRow()
    //             </tbody>
    //         )
    //     
    //     return sections;
    // 

    // Render the table with <th>
    render() 
        return (
            <table>
                <thead>
                    <tr>
                        <th colSpan='3'>Results</th>
                        <th>1</th>
                        <th>2</th>
                        <th>3</th>
                    </tr>
                </thead>
                 this.renderSections() 
            </table>
        )
    


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

---

@mixin borders 
    border: 1px solid black;


%borders 
    @include borders;


table 
    border-spacing: 0;

    th 
        text-align: center;
    

    tr 
        th
            @extend %borders;
        

        td 
            @extend %borders;
            &.data-name 
                padding: 3px 100px 3px 3px;
            

            &.data-point 
                text-align: center;
                padding: 3px 10px;
            

            &.section-name 
                background-color: #999;
            
        
    


@media print 
    tr 
        display: block;
    

    .pagebreak 
        break-before: always !important;
        page-break-before: always !important;
        page-break-inside: avoid !important;
    

【问题讨论】：

here 和 here 的帖子可能是相关的。

【参考方案1】：

我想出了一个更加硬编码的方法（所以调用完美地解决了你的问题）。我必须说它并不优雅。

我的方法的主要思想是将tbody 更改为display:block（像往常一样），但也将.pagebreak 添加到目标tbody。

但是，此方法从表中取消附加 tbody，因此不再与 thead 对齐。这就是为什么我添加一个tr 用于打印头，并在打印时删除原点thead。

添加打印，普通视图不显示

//Thead part, add a printing thead only shown in Print
//As originaly thead will has alloction problem
 i % 2 === 1 ?
  <tr className='printing-thead'>
    <td colspan="3">Results</td>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr> : null

....
...
//Corrected Page break
</tbody>
<tbody class="pagebreak">
    <tr>
        <td colspan="7"></td>
    </tr>
</tbody>
<tbody>
...

对应的 CSS

table 
  border-spacing: 0;
  table-layout: fixed;
  th 
    text-align: center;
  
  tr 
    th 
      @extend %borders;
    
    td 
      @extend %borders;
      &.data-name 
        padding: 3px 100px 3px 3px;
      
      &.data-point 
        text-align: center;
        padding: 3px 10px;
      
      &.section-name 
        background-color: #999;
      
    
  
  tr.printing-thead 
    display: none;
  


@media print 
  thead 
    display: none;
  
  tbody 
    display: block;
    tr.printing-thead 
      display: contents;
      font-weight: bold;
      text-align: center;
    
  
  .pagebreak 
    height: 0px;
    break-before: always !important;
    page-break-before: always !important;
    page-break-inside: avoid !important;
    td 
      display: none;
    
  

JSfiddle。

还有 react 版本

JSfiddle React Version

【讨论】：

由于不在办公室，回复晚了，抱歉。谢谢您的帮助！这确实解决了所询问的问题。但是，它提出了您谈到的两个问题：<thead> 和 <tbody> 列不对齐；标题不会在每一页上重复。我会再玩一些，看看我能做什么。谢谢！

@sockpuppet，你最好不要先选为ans。可能有人有更好的解决方案，我也在找。

@sockpuppet ，我更新一个解决方案解决你提到的问题。

嗨，能否为在 JSFiddle 中呈现 HTML 的组件显示 render()？我没有得到相同的结果，实际上遇到了隐藏分页符所在部分的问题。显然需要有一个条件，在true 和false 条件中都有一个<tbody>，但其中一个包含pagebreak 类名。然而，这也跳过了这些部分。在<tbody className> 上有一个三元组也会导致它隐藏分页符所在的部分。

@sockpuppet，我在内容中更新了react版本的jsfiddle，请看一下。