所以基本上，我的表有一堆子标题，我想在这么多子节之后插入一个分页符，以防止在其中一个节的中间自动分页。大致是这样看的灰色区域是分页符所在的子标题，如果它像第 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'));
个人中心
文章发布
退出
4
我是一名优秀的程序员,十分优秀！