更改打印前后的状态，仅在打印时显示
更改打印前后的状态，仅在打印时显示
提问于 2020-08-15 17:20:39
用浏览器Chrome测试(84.0.4147.125版)
我想做的事：
若要使学生的<h2>name</h2>仅在单击“打印”时才出现在顶部，则在打印模式消失(打印/保存/取消)之后，状态应恢复到原来的状态。(应再次将学生<h2>name</h2>隐藏在顶部。)
全文代码： https://codesandbox.io/s/pagination-tables-print-demo-59u37
表页：
import React, { useState } from 'react';
import { Helmet } from 'react-helmet'
// Components
import StudentStudyDetails from '../Components/TablesPage/StudentStudyDetails.js';
// Test Data
import { johnDoeTwoWeeks } from '../Tests/index.js';
const Tables = () => {
const [inPrintPreview, setInPrintPreview] = useState(false);
const print = (ev) => {
ev.preventDefault();
Promise.resolve(setInPrintPreview(true))
.then(() => {
let printContents = document.getElementById("print-report-student-div").innerHTML;
let originalContents = document.body.innerHTML;
document.body.innerHTML = printContents;
window.print();
document.body.innerHTML = originalContents;
})
}
return (
<div className="page-container">
<Helmet>
<title>Tables-Demo</title>
<meta name="description" content="Nested component" />
</Helmet>
<h1 className="h1-reports-title">Tables</h1>
<div>
{<button type="button" onClick={ev => print(ev)} className="btn-reports-submit">Print</button>}
{<StudentStudyDetails tableData={johnDoeTwoWeeks} inPrintPreview={inPrintPreview} />}
</div>
</div>
)
}
export default Tables;表构成部分：
import React from 'react';
// Globals
import { reportsBackendResponses, reportsBackendAttendence } from '../../Globals/index.js';
const StudentReportTable = props => {
const { tableData, reportElement, inPrintPreview } = props;
return (
<div id="print-report-student-div" className="div-reports-tbl">
<h2 className={inPrintPreview ? "h2-print-title-name": "display-none"}>{tableData.lastName}, {tableData.firstName}</h2>
<table id="print-report-student-table-center" className="tbl-reports">
<tbody>
<tr className="tbl-reports-header-row">
<th>Week ending:<br />{tableData.weeks[reportElement].weekEnding}</th>
<th></th>
<th></th>
<th></th>
<th colSpan="2">Teacher:<br />{tableData.tutorName}</th>
<th>{tableData.weeks[reportElement].weekTotalHours}</th>
</tr>
<tr className="tbl-reports-title-row">
<th>Date</th>
<th>Response</th>
<th>Tutor Hours</th>
<th>Credit Value</th>
<th>Attendence</th>
<th>Study Value</th>
<th>Total</th>
</tr>
{tableData.weeks[reportElement].daysInfo.map((row, index) =>
<tr key={index} className="tbl-reports-record-row">
<td>{row.dayDate}</td>
<td>
{row.response.toLowerCase() === reportsBackendResponses.notAsked ?
<p className="p-reports-not-asked">{row.response}</p> :
(row.response.toLowerCase() === reportsBackendResponses.worked ?
<p className="p-reports-worked">{row.response}</p> :
(row.response.toLowerCase() === reportsBackendResponses.absent ?
<p className="p-reports-absent">{row.response}</p> :
(row.response.toLowerCase() === reportsBackendResponses.refused ?
<p className="p-reports-refused">{row.response}</p> :
<p className="p-reports-default">{row.response}</p>
)
)
)
}
</td>
<td>{row.tutorHours}</td>
<td>{row.creditValue}</td>
<td>
{row.attendence.toLowerCase() === reportsBackendAttendence.cancelled ?
<p className="p-reports-cancelled">{row.attendence}</p> :
(row.attendence.toLowerCase() === reportsBackendAttendence.present ?
<p className="p-reports-present">{row.attendence}</p> :
(row.attendence.toLowerCase() === reportsBackendAttendence.noShow ?
<p className="p-reports-no-show">{row.attendence}</p> :
(row.attendence.toLowerCase() === reportsBackendAttendence.notPlanned ?
<p className="p-reports-not-planned">{row.attendence}</p> :
<p className="p-reports-default">{row.attendence}</p>
)
)
)
}
</td>
{row.studyValue ? <td>{row.studyValue}</td> : <td style={{color: "#CCCCCC"}}>- - -</td>}
<td>{row.totalDayHours}</td>
</tr>
)}
</tbody>
</table>
</div>
)
}
export default StudentReportTable;CSS:
/*---------------------------------------- Globals ----------------------------------------*/
html,
body,
#root {
box-sizing: border-box !important;
margin: 0 !important;
padding: 0 !important;
height: 100% !important;
min-height: 100% !important;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow: auto!important;
}
* {
box-sizing: inherit !important;
}
*:before, *:after {
box-sizing: inherit !important;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
}
h1,h2,h3,h4,h5,h6 {
margin: 0;
}
footer {
background-color: #CCCCCC;
color: black;
font-size: 16px;
padding: 2em;
display: flex;
flex-direction: row;
margin-top: 4em;
}
@media print {
html, body {
height: initial !important;
overflow: initial !important;
-webkit-print-color-adjust: exact;
}
}
@media print {
#print-report-student-table-center {
position:absolute;
z-index:15;
left: 50%;
margin-left: -462px; /* half of table width size */
}
}
@page {
size: auto;
margin-top: 20mm;
}
/*---------------------------------------- General ----------------------------------------*/
.absolute-bottom-left {
position: absolute;
bottom: 0;
left: 0;
}
.z-index-5 {
z-index: 5;
}
.position-relative {
position: relative;
}
.overflow-hidden {
overflow: hidden;
}
.display-none {
display: none;
}
/*---------------------------------------- Classes ----------------------------------------*/
.app {
display: flex;
flex-direction: column;
width: 100%;
min-height: 100%;
}
.btn-pagination-selected-tab {
width: 60px;
background-color: #01A3E0;
margin-right: 10px;
padding: 12px 0;
border: none;
border-radius: 5px;
}
.btn-pagination-unselected-tab {
width: 60px;
background-color: #85C8E9;
margin-right: 10px;
padding: 12px 0;
border: none;
border-radius: 5px;
}
.btn-pagination-unselected-tab:hover {
background-color: #4AB0E1;
}
.btn-reports-submit {
background-color: #01A3E0;
font-weight: 600;
color: white;
padding: 5px 10px;
border: 2px solid #01A3E0;
border-radius: 4px;
transition: background-color 0.3s;
outline: none!important;
box-shadow: none!important;
text-decoration: none;
margin-bottom: 40px;
float: right;
}
.btn-reports-submit:hover {
background-color: white;
color: #01A3E0;
text-decoration: none;
}
.btn-reports-submit:active {
background-color: #01A3E0;
color: white;
text-decoration: none;
}
.div-pagination {
display: flex;
user-select: none;
}
.div-reports-details-container {
display: block;
max-width: 950px;
margin-right: 50px;
}
.div-reports-student {
display: flex;
width: 100%;
}
.div-reports-student-container {
display: block;
margin-top: 68px;
}
.div-reports-student-photo-name {
border-top: 2px solid #DDDDDD;
border-right: 2px solid #DDDDDD;
border-left: 2px solid #DDDDDD;
text-align: center;
padding: 30px 70px;
}
.div-reports-student-photo-name img {
width: 150px;
height: 150px;
border-radius: 50%;
object-fit: cover;
object-position: top;
background-repeat: no-repeat;
}
.div-reports-student-photo-name p {
margin: 30px 0 0;
color: #01A3E0;
font-weight: 600;
font-size: 18px;
}
.div-reports-student-total {
border-right: 2px solid #01A3E0;
background-color: #01A3E0;
text-align: center;
color: white;
padding: 20px 0;
}
.div-reports-tbl {
width: 100%;
margin-top: 20px;
}
.footer {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
padding: 40px;
}
.h1-reports-title {
margin: 10px 0 20px;
}
.h2-print-title-name {
text-align: center;
margin-bottom: 40px;
}
.header {
display: flex;
justify-content: flex-end;
align-items: center;
width: 100%;
padding: 40px;
background-color: #CCCCCC;
}
.header a {
margin-right: 15px;
}
.p-reports-not-asked {
margin: 0;
padding: 5px 0;
background-color: #FFEDBC;
border: 2px solid #CCCCCC;
border-radius: 5px;
}
.p-reports-worked {
margin: 0;
padding: 5px 0;
background-color: #CBFCCB;
border: 2px solid #CCCCCC;
border-radius: 5px;
}
.p-reports-absent {
margin: 0;
padding: 5px 0;
background-color: #FBC7C5;
border: 2px solid #CCCCCC;
border-radius: 5px;
}
.p-reports-refused {
margin: 0;
padding: 5px 0;
background-color: #DDDDDD;
border: 2px solid #CCCCCC;
border-radius: 5px;
}
.p-reports-cancelled {
margin: 0;
padding: 5px 10px;
background-color: #FFEDBC;
border: 2px solid #CCCCCC;
border-radius: 5px;
}
.p-reports-present {
margin: 0;
padding: 5px 10px;
background-color: #CBFCCB;
border: 2px solid #CCCCCC;
border-radius: 5px;
}
.p-reports-no-show {
margin: 0;
padding: 5px 10px;
background-color: #FBC7C5;
border: 2px solid #CCCCCC;
border-radius: 5px;
}
.p-reports-not-planned {
margin: 0;
padding: 5px 10px;
border: 2px solid #CCCCCC;
border-radius: 5px;
}
.p-reports-default {
margin: 0;
padding: 5px 10px;
border: 2px solid #CCCCCC;
border-radius: 5px;
}
.page-container {
display: block;
width: 100%;
max-width: 1280px;
margin: 0 auto;
}
.pages-container {
display: block;
width: 100%;
flex: 1;
}
.tbl-reports {
border-bottom: 2px solid #CCCCCC;
border-collapse: separate; /* Don't collapse */
border-spacing: 0;
text-align: left;
}
.tbl-reports-header-row th {
position: -webkit-sticky;
position: sticky;
top: 0;
padding: 10px 20px;
background-color: #01A3E0;
font-size: 18px;
border-top: 2px solid #01A3E0;
}
.tbl-reports-header-row th:first-child {
width: 140px;
color: #FFFFFF;
border-left: 2px solid #01A3E0;
padding-left: 30px;
}
.tbl-reports-header-row th:nth-child(2) {
width: 140px;
}
.tbl-reports-header-row th:nth-child(3) {
width: 90px;
}
.tbl-reports-header-row th:nth-child(4) {
width: 120px;
}
.tbl-reports-header-row th:nth-child(5) {
width: 155px;
color: #FFFFFF;
text-align: end;
}
.tbl-reports-header-row th:nth-child(6) {
width: 140px;
}
.tbl-reports-header-row th:last-child {
color: #FFFFFF;
border-right: 2px solid #01A3E0;
border-left: 2px solid #CCCCCC;
width: 110px;
text-align: end;
}
.tbl-reports-title-row th {
position: -webkit-sticky;
position: sticky;
top: 0;
padding: 10px 20px;
background-color: #EBF6FC;
font-size: 18px;
}
.tbl-reports-title-row th:first-child {
width: 140px;
border-left: 2px solid #CCCCCC;
padding-left: 30px;
}
.tbl-reports-title-row th:nth-child(2) {
width: 140px;
}
.tbl-reports-title-row th:nth-child(3) {
width: 90px;
}
.tbl-reports-title-row th:nth-child(4) {
width: 120px;
}
.tbl-reports-title-row th:nth-child(5) {
width: 155px;
}
.tbl-reports-title-row th:nth-child(6) {
width: 140px;
}
.tbl-reports-title-row th:last-child {
border-right: 2px solid #CCCCCC;
border-left: 2px solid #CCCCCC;
width: 110px;
text-align: end;
}
.tbl-reports-record-row {
border-bottom: 2px solid #CCCCCC;
}
.tbl-reports-record-row td {
padding: 10px 20px;
border-bottom: 2px solid #CCCCCC;
}
.tbl-reports-record-row:last-child td {
border-bottom: none;
}
.tbl-reports-record-row td:first-child {
border-left: 2px solid #CCCCCC;
padding-left: 30px;
}
.tbl-reports-record-row td:not(:first-child) {
text-align: center;
}
.tbl-reports-record-row td:nth-child(5) {
text-align: left;
}
.tbl-reports-record-row td:nth-child(6) {
text-align: left;
padding-left: 50px;
}
.tbl-reports-record-row td:last-child {
border-right: 2px solid #CCCCCC;
border-left: 2px solid #CCCCCC;
text-align: end;
}我是新的处理状态在打印期间，所以任何帮助将是非常感谢的。
我猜这个变化需要在这个片段中的某个地方：
Promise.resolve(setInPrintPreview(true))
.then(() => {
let printContents = document.getElementById("print-report-student-div").innerHTML;
let originalContents = document.body.innerHTML;
document.body.innerHTML = printContents;
window.print();
document.body.innerHTML = originalContents;
})注意:我还注意到在打印模式消失后分页停止工作的问题，它告诉我javascript正在挂起什么东西。
回答 2
Stack Overflow用户
回答已采纳
发布于 2020-08-16 23:52:56
此解决方案需要使用第三方库，并具有不能与组件使用react钩子的约束(因为它必须是类组件)，但它可以工作.
解决方案
全文代码： https://codesandbox.io/s/pagination-tables-print-demo-v3-yej7k
Tables.js
import React from "react";
import { Helmet } from "react-helmet";
// Components
import StudentStudyDetails from "../Components/TablesPage/StudentStudyDetails.js";
// Test Data
import { johnDoeTwoWeeks } from "../Tests/index.js";
const Tables = () => {
return (
<div className="page-container">
<Helmet>
<title>Tables-Demo</title>
<meta name="description" content="Nested component" />
</Helmet>
<h1 className="h1-reports-title">Tables</h1>
<div>
<StudentStudyDetails
tableData={johnDoeTwoWeeks}
/>
</div>
</div>
);
};
export default Tables;StudentStudyDetails.js
import React, { Component } from "react";
import Photo from "../../img/photo.png";
import ReactToPrint from "react-to-print";
// Globals
import { getAvailablePaginatedTabs } from "../../Globals/index.js";
// Components
import StudentReportTable from "./StudentReportTable.js";
import PaginationTabs from "../Shared/PaginationTabs.js";
class StudentStudyDetails extends Component {
constructor(props){
super(props);
this.state = {
selectedPaginationTab: 1,
inPrintPreview: false
}
}
setSelectedPaginationTab = (tabNum) => {
this.setState({...this.state, selectedPaginationTab: tabNum});
}
setInPrintPreview(status){
this.setState({...this.state, inPrintPreview: status});
}
render(){
const { inPrintPreview, selectedPaginationTab } = this.state;
const { tableData } = this.props;
return (
<div>
<ReactToPrint
onBeforeGetContent={() => this.setInPrintPreview(true)}
trigger={() => <button type="button" className="btn-reports-submit">Print</button>}
content={() => this.componentRef}
onAfterPrint={() => this.setInPrintPreview(false)}
/>
<div className="div-reports-student">
<div className="div-reports-details-container">
<PaginationTabs
setSelectedPaginationTab={this.setSelectedPaginationTab}
selectedPaginationTab={selectedPaginationTab}
pages={getAvailablePaginatedTabs(
tableData.weeks.length,
selectedPaginationTab
)}
lastPage={tableData.weeks.length}
/>
<StudentReportTable
tableData={tableData}
reportElement={selectedPaginationTab - 1}
inPrintPreview={inPrintPreview}
ref={el => (this.componentRef = el)}
/>
</div>
<div className="div-reports-student-container">
<div className="div-reports-student-photo-name">
<img src={Photo} alt="student" />
<p>
{tableData.firstName} {tableData.lastName}
</p>
</div>
<div className="div-reports-student-total">
<h5>Year Total: {tableData.yearTotalHours}</h5>
</div>
</div>
</div>
</div>
);
}
};
export default StudentStudyDetails;StudentReportTable.js
import React, { Component } from "react";
// Globals
import {
reportsBackendResponses,
reportsBackendAttendence
} from "../../Globals/index.js";
class StudentReportTable extends Component {
render(){
const {inPrintPreview, reportElement, tableData} = this.props;
return (
<div id="print-report-student-div" className="div-reports-tbl">
<h2 className={inPrintPreview ? "h2-print-title-name" : "display-none"}>
{tableData.lastName}, {tableData.firstName}
</h2>
<table id="print-report-student-table-center" className="tbl-reports">
<tbody>
<tr className="tbl-reports-header-row">
<th>
Week ending:
<br />
{tableData.weeks[reportElement].weekEnding}
</th>
<th></th>
<th></th>
<th></th>
<th colSpan="2">
Teacher:
<br />
{tableData.tutorName}
</th>
<th>{tableData.weeks[reportElement].weekTotalHours}</th>
</tr>
<tr className="tbl-reports-title-row">
<th>Date</th>
<th>Response</th>
<th>Tutor Hours</th>
<th>Credit Value</th>
<th>Attendence</th>
<th>Study Value</th>
<th>Total</th>
</tr>
{tableData.weeks[reportElement].daysInfo.map((row, index) => (
<tr key={index} className="tbl-reports-record-row">
<td>{row.dayDate}</td>
<td>
{row.response.toLowerCase() ===
reportsBackendResponses.notAsked ? (
<p className="p-reports-not-asked">{row.response}</p>
) : row.response.toLowerCase() ===
reportsBackendResponses.worked ? (
<p className="p-reports-worked">{row.response}</p>
) : row.response.toLowerCase() ===
reportsBackendResponses.absent ? (
<p className="p-reports-absent">{row.response}</p>
) : row.response.toLowerCase() ===
reportsBackendResponses.refused ? (
<p className="p-reports-refused">{row.response}</p>
) : (
<p className="p-reports-default">{row.response}</p>
)}
</td>
<td>{row.tutorHours}</td>
<td>{row.creditValue}</td>
<td>
{row.attendence.toLowerCase() ===
reportsBackendAttendence.cancelled ? (
<p className="p-reports-cancelled">{row.attendence}</p>
) : row.attendence.toLowerCase() ===
reportsBackendAttendence.present ? (
<p className="p-reports-present">{row.attendence}</p>
) : row.attendence.toLowerCase() ===
reportsBackendAttendence.noShow ? (
<p className="p-reports-no-show">{row.attendence}</p>
) : row.attendence.toLowerCase() ===
reportsBackendAttendence.notPlanned ? (
<p className="p-reports-not-planned">{row.attendence}</p>
) : (
<p className="p-reports-default">{row.attendence}</p>
)}
</td>
{row.studyValue ? (
<td>{row.studyValue}</td>
) : (
<td style={{ color: "#CCCCCC" }}>- - -</td>
)}
<td>{row.totalDayHours}</td>
</tr>
))}
</tbody>
</table>
</div>
);
}
};
export default StudentReportTable;Stack Overflow用户
发布于 2020-08-16 01:53:05
这个解决方案解决了最初的op存在的两个问题，但是引入了两个我不知道如何解决的新问题。
解决方案
全文代码： https://codesandbox.io/s/pagination-tables-print-demo-59u37
Tables.js
const print = ev => {
ev.preventDefault();
Promise.resolve(setInPrintPreview(true)).then(() => {
let printContents = document.getElementById("print-report-student-div");
let pri;
if (document.getElementById("ifmcontentstoprint")) {
pri = document.getElementById("ifmcontentstoprint").contentWindow;
} else {
const iframe = document.createElement("iframe");
iframe.setAttribute("title", "ifmcontentstoprint");
iframe.setAttribute("id", "ifmcontentstoprint");
iframe.setAttribute(
"style",
"height: 0px; width: 0px; position: absolute;"
);
document.body.appendChild(iframe);
pri = iframe.contentWindow;
}
pri.document.open();
pri.document.write(printContents.innerHTML);
pri.document.close();
pri.focus();
pri.print();
setInPrintPreview(false);
});
};现在使用这个库不尊重css，所以我们必须添加内联样式。
StudentReportTable.js
return (
<div
id="print-report-student-div"
style={{ width: "100%", marginTop: "20px" }}
>
<h2
style={
inPrintPreview
? { textAlign: "center", marginBottom: "40px" }
: { display: "none" }
}
>
{tableData.lastName}, {tableData.firstName}
</h2>
<table
id="print-report-student-table-center"
style={{
borderBottom: "2px solid #cccccc",
borderCollapse: "separate",
borderSpacing: "0",
textAlign: "left"
}}
>
<tbody>
<tr>
<th
style={{
position: "sticky",
top: "0",
width: "140px",
backgroundColor: "#01a3e0",
color: "#ffffff",
borderLeft: "2px solid #01a3e0",
padding: "10px 20px 10px 30px",
fontSize: "18px",
borderTop: "2px solid #01a3e0"
}}
>
Week ending:
<br />
{tableData.weeks[reportElement].weekEnding}
</th>
<th
style={{
position: "sticky",
top: "0",
width: "140px",
backgroundColor: "#01a3e0",
padding: "10px 20px",
fontSize: "18px",
borderTop: "2px solid #01a3e0"
}}
/>
<th
style={{
position: "sticky",
top: "0",
width: "90px",
backgroundColor: "#01a3e0",
padding: "10px 20px",
fontSize: "18px",
borderTop: "2px solid #01a3e0"
}}
/>
<th
style={{
position: "sticky",
top: "0",
width: "120px",
backgroundColor: "#01a3e0",
padding: "10px 20px",
fontSize: "18px",
borderTop: "2px solid #01a3e0"
}}
/>
<th
style={{
position: "sticky",
top: "0",
width: "155px",
backgroundColor: "#01a3e0",
color: "#ffffff",
textAlign: "end",
padding: "10px 20px",
fontSize: "18px",
borderTop: "2px solid #01a3e0"
}}
colSpan="2"
>
Teacher:
<br />
{tableData.tutorName}
</th>
<th
style={{
position: "sticky",
top: "0",
width: "110px",
backgroundColor: "#01a3e0",
color: "#ffffff",
borderRight: "2px solid #01a3e0",
borderLeft: "2px solid #cccccc",
textAlign: "end",
padding: "10px 20px",
fontSize: "18px",
borderTop: "2px solid #01a3e0"
}}
>
{tableData.weeks[reportElement].weekTotalHours}
</th>
</tr>
<tr className="tbl-reports-title-row">
<th
style={{
position: "sticky",
top: "0",
width: "140px",
padding: "10px 20px 10px 30px",
backgroundColor: "#ebf6fc",
fontSize: "18px",
borderLeft: "2px solid #cccccc"
}}
>
Date
</th>
<th
style={{
position: "sticky",
top: "0",
width: "140px",
padding: "10px 20px",
backgroundColor: "#ebf6fc",
fontSize: "18px"
}}
>
Response
</th>
<th
style={{
position: "sticky",
top: "0",
width: "90px",
padding: "10px 20px",
backgroundColor: "#ebf6fc",
fontSize: "18px"
}}
>
Tutor Hours
</th>
<th
style={{
position: "sticky",
top: "0",
width: "120px",
padding: "10px 20px",
backgroundColor: "#ebf6fc",
fontSize: "18px"
}}
>
Credit Value
</th>
<th
style={{
position: "sticky",
top: "0",
width: "155px",
padding: "10px 20px",
backgroundColor: "#ebf6fc",
fontSize: "18px"
}}
>
Attendence
</th>
<th
style={{
position: "sticky",
top: "0",
width: "140px",
padding: "10px 20px",
backgroundColor: "#ebf6fc",
fontSize: "18px"
}}
>
Study Value
</th>
<th
style={{
position: "sticky",
top: "0",
width: "110px",
padding: "10px 20px",
backgroundColor: "#ebf6fc",
fontSize: "18px",
borderRight: "2px solid #cccccc",
borderLeft: "2px solid #cccccc",
textAlign: "end"
}}
>
Total
</th>
</tr>
{tableData.weeks[reportElement].daysInfo.map((row, index) =>
tableData.weeks[reportElement].daysInfo.length === index + 1 ? (
<tr key={index} style={{ borderBottom: "none" }}>
<td
style={{
padding: "10px 20px",
borderBottom: "none",
borderLeft: "2px solid #cccccc",
paddingLeft: "30px"
}}
>
{row.dayDate}
</td>
<td
style={{
padding: "10px 20px",
borderBottom: "none",
textAlign: "center"
}}
>
{row.response.toLowerCase() ===
reportsBackendResponses.notAsked ? (
<p
style={{
margin: "0",
padding: "5px 0",
backgroundColor: "#ffedbc",
border: "2px solid #cccccc",
borderRadius: "5px"
}}
>
{row.response}
</p>
) : row.response.toLowerCase() ===
reportsBackendResponses.worked ? (
<p
style={{
margin: "0",
padding: "5px 0",
backgroundColor: "#cbfccb",
border: "2px solid #cccccc",
borderRadius: "5px"
}}
>
{row.response}
</p>
) : row.response.toLowerCase() ===
reportsBackendResponses.absent ? (
<p
style={{
margin: "0",
padding: "5px 0",
backgroundColor: "#fbc7c5",
border: "2px solid #cccccc",
borderRadius: "5px"
}}
>
{row.response}
</p>
) : row.response.toLowerCase() ===
reportsBackendResponses.refused ? (
<p
style={{
margin: "0",
padding: "5px 0",
backgroundColor: "#dddddd",
border: "2px solid #cccccc",
borderRadius: "5px"
}}
>
{row.response}
</p>
) : (
<p
style={{
margin: "0",
padding: "5px 0",
border: "2px solid #cccccc",
borderRadius: "5px"
}}
>
{row.response}
</p>
)}
</td>
<td
style={{
padding: "10px 20px",
borderBottom: "none",
textAlign: "center"
}}
>
{row.tutorHours}
</td>
<td
style={{
padding: "10px 20px",
borderBottom: "none",
textAlign: "center"
}}
>
{row.creditValue}
</td>
<td
style={{
padding: "10px 20px",
borderBottom: "none",
textAlign: "center"
}}
>
{row.attendence.toLowerCase() ===
reportsBackendAttendence.cancelled ? (
<p
style={{
margin: "0",
padding: "5px 0",
backgroundColor: "#ffedbc",
border: "2px solid #cccccc",
borderRadius: "5px"
}}
>
{row.attendence}
</p>
) : row.attendence.toLowerCase() ===
reportsBackendAttendence.present ? (
<p
style={{
margin: "0",
padding: "5px 0",
backgroundColor: "#cbfccb",
border: "2px solid #cccccc",
borderRadius: "5px"
}}
>
{row.attendence}
</p>
) : row.attendence.toLowerCase() ===
reportsBackendAttendence.noShow ? (
<p
style={{
margin: "0",
padding: "5px 0",
backgroundColor: "#fbc7c5",
border: "2px solid #cccccc",
borderRadius: "5px"
}}
>
{row.attendence}
</p>
) : row.attendence.toLowerCase() ===
reportsBackendAttendence.notPlanned ? (
<p
style={{
margin: "0",
padding: "5px 0",
border: "2px solid #cccccc",
borderRadius: "5px"
}}
>
{row.attendence}
</p>
) : (
<p
style={{
margin: "0",
padding: "5px 0",
border: "2px solid #cccccc",
borderRadius: "5px"
}}
>
{row.attendence}
</p>
)}
</td>
{row.studyValue ? (
<td
style={{
padding: "10px 20px",
borderBottom: "none",
textAlign: "left",
paddingLeft: "50px"
}}
>
{row.studyValue}
</td>
) : (
<td
style={{
padding: "10px 20px",
borderBottom: "none",
textAlign: "left",
paddingLeft: "50px",
color: "#CCCCCC"
}}
>
- - -
</td>
)}
<td
style={{
padding: "10px 20px",
borderRight: "2px solid #cccccc",
borderLeft: "2px solid #cccccc",
borderBottom: "none",
textAlign: "end"
}}
>
{row.totalDayHours}
</td>
</tr>
) : (
<tr key={index} style={{ borderBottom: "2px solid #cccccc" }}>
<td
style={{
padding: "10px 20px",
borderBottom: "2px solid #cccccc",
borderLeft: "2px solid #cccccc",
paddingLeft: "30px"
}}
>
{row.dayDate}
</td>
<td
style={{
padding: "10px 20px",
borderBottom: "2px solid #cccccc",
textAlign: "center"
}}
>
{row.response.toLowerCase() ===
reportsBackendResponses.notAsked ? (
<p
style={{
margin: "0",
padding: "5px 0",
backgroundColor: "#ffedbc",
border: "2px solid #cccccc",
borderRadius: "5px"
}}
>
{row.response}
</p>
) : row.response.toLowerCase() ===
reportsBackendResponses.worked ? (
<p
style={{
margin: "0",
padding: "5px 0",
backgroundColor: "#cbfccb",
border: "2px solid #cccccc",
borderRadius: "5px"
}}
>
{row.response}
</p>
) : row.response.toLowerCase() ===
reportsBackendResponses.absent ? (
<p
style={{
margin: "0",
padding: "5px 0",
backgroundColor: "#fbc7c5",
border: "2px solid #cccccc",
borderRadius: "5px"
}}
>
{row.response}
</p>
) : row.response.toLowerCase() ===
reportsBackendResponses.refused ? (
<p
style={{
margin: "0",
padding: "5px 0",
backgroundColor: "#dddddd",
border: "2px solid #cccccc",
borderRadius: "5px"
}}
>
{row.response}
</p>
) : (
<p
style={{
margin: "0",
padding: "5px 0",
border: "2px solid #cccccc",
borderRadius: "5px"
}}
>
{row.response}
</p>
)}
</td>
<td
style={{
padding: "10px 20px",
borderBottom: "2px solid #cccccc",
textAlign: "center"
}}
>
{row.tutorHours}
</td>
<td
style={{
padding: "10px 20px",
borderBottom: "2px solid #cccccc",
textAlign: "center"
}}
>
{row.creditValue}
</td>
<td
style={{
padding: "10px 20px",
borderBottom: "2px solid #cccccc",
textAlign: "center"
}}
>
{row.attendence.toLowerCase() ===
reportsBackendAttendence.cancelled ? (
<p
style={{
margin: "0",
padding: "5px 0",
backgroundColor: "#ffedbc",
border: "2px solid #cccccc",
borderRadius: "5px"
}}
>
{row.attendence}
</p>
) : row.attendence.toLowerCase() ===
reportsBackendAttendence.present ? (
<p
style={{
margin: "0",
padding: "5px 0",
backgroundColor: "#cbfccb",
border: "2px solid #cccccc",
borderRadius: "5px"
}}
>
{row.attendence}
</p>
) : row.attendence.toLowerCase() ===
reportsBackendAttendence.noShow ? (
<p
style={{
margin: "0",
padding: "5px 0",
backgroundColor: "#fbc7c5",
border: "2px solid #cccccc",
borderRadius: "5px"
}}
>
{row.attendence}
</p>
) : row.attendence.toLowerCase() ===
reportsBackendAttendence.notPlanned ? (
<p
style={{
margin: "0",
padding: "5px 0",
border: "2px solid #cccccc",
borderRadius: "5px"
}}
>
{row.attendence}
</p>
) : (
<p
style={{
margin: "0",
padding: "5px 0",
border: "2px solid #cccccc",
borderRadius: "5px"
}}
>
{row.attendence}
</p>
)}
</td>
{row.studyValue ? (
<td
style={{
padding: "10px 20px",
borderBottom: "2px solid #cccccc",
textAlign: "left",
paddingLeft: "50px"
}}
>
{row.studyValue}
</td>
) : (
<td
style={{
padding: "10px 20px",
borderBottom: "2px solid #cccccc",
textAlign: "left",
paddingLeft: "50px",
color: "#CCCCCC"
}}
>
- - -
</td>
)}
<td
style={{
padding: "10px 20px",
borderRight: "2px solid #cccccc",
borderLeft: "2px solid #cccccc",
borderBottom: "2px solid #cccccc",
textAlign: "end"
}}
>
{row.totalDayHours}
</td>
</tr>
)
)}
</tbody>
</table>
</div>
);新问题
问题1：某些内联样式(如backgroundColor和color)在打印预览中不受尊重
问题2:当从打印模式返回到页面上时，您会注意到浏览器右侧出现了第二个滚动条。
如果有人知道如何在上面解决这两个问题，那将会有很大的帮助。谢谢。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/63428865
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号