У меня возникли проблемы с разрывами страниц в таблицах. Думал, что у меня было решение, поскольку он отлично работал в этом вопросе SO:
Вставка разрыва страницы в <table> в приложении React
Это отлично работает для таблицы с одним столбцом, но теперь, когда я работаю с несколькими столбцами, это беспорядок.
В основном я должен включить 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;
}
}