反应打印页面内容答案

【问题标题】：React Print Page Content反应打印页面内容
【发布时间】：2021-06-04 22:00:40
【问题描述】：

我创建了一个自定义打印函数来打印特定 div 内的内容（我找不到它的 React 库）。

我的自定义函数：

export function printReports(divId){
    var content = document.getElementById(divId).innerHTML;
    var mywindow = window.open('', 'Print', 'height=600,width=800');

    mywindow.document.write('<html><head><title>Print</title>');
    mywindow.document.write('</head><body >');
    mywindow.document.write(content);
    mywindow.document.write('</body></html>');

    mywindow.document.close();
    mywindow.focus()
    mywindow.print();
    mywindow.close();
    return true;
}

然后，我有一个基本的收据组件：

import React, { useState, useEffect } from 'react';
import { Table, Button } from 'reactstrap';
import NumberFormat from 'react-number-format';
import moment from 'moment';

import * as customFuncs from '../util/myFunctions';
import * as api from '../api/Tenants';

const DepositReceipt = (props) => {
    const tempTransactionID = props.tempTransactionID;

    const [ data, setData ] = useState({});

    useEffect(() => {
        async function fetchData() {
            setLoading(true);
            setData(await tenantAPI.getTempTransactionDetails(tempTransactionID)); // get data from database
            setLoading(false);
        }
        fetchData();
    }, [tempTransactionID])

    
    const totalTransaction = parseFloat(data.HousingAmount) + parseFloat(data.TenantAmount);

    return (
        <>
              <div style={{marginTop: '1%', marginLeft: '1%', marginRight: '1%', marginBottom: '1%'}}>
                        <Button color="primary" onClick={() => customFuncs.printReports('DepositReceiptDiv')}>Print</Button>
                    </div>
                    <div id="DepositReceiptDiv" className="row">
                        <div className="col-sm-4 offset-md-4">
                            <p style={{textAlign: 'center'}}>Receipt for Payment</p>
                            <Table bordered>
                                <tr>
                                    <th>
                                        <p>
                                            {data.TenantFName} {data.TenantLName} <br />
                                            Unit {data.UnitName} <br />
                                            <NumberFormat value={data.TenantPhone} displayType={'text'} format="+1 (###) ###-####" mask="_"/> <br />
                                            {data.TenantEmail}
                                        </p>
                                    </th>
                                    <th>
                                        Receipt Date: {moment().format("MM/DD/YYYY")}
                                    </th>
                                </tr>
                            </Table>
                            <Table bordered>
                                <thead>
                                    <tr>
                                        <th className="text-center">Transaction Date</th>
                                        <th className="text-center">Transaction Amount</th>
                                        <th className="text-center">Currency Type</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td className="text-center">{moment(data.TransactionDate).format("MM/DD/YYYY")}</td>
                                        <td className="text-center"><NumberFormat value={parseFloat(totalTransaction).toFixed(2)} displayType={'text'} thousandSeparator={true} prefix={'$'} /></td>
                                        <td className="text-center">{data.PaymentType}</td>
                                    </tr>
                                </tbody>
                            </Table>
                        </div>
                    </div>
          </>
     );
}

export default DepositReceipt;

组件渲染得很好（下图）。

但是，当我单击打印时，它不会保持相同的样式/格式：

【问题讨论】：

您可以使用@media print { your selectors here } 并在打印前显示。
你能举个例子吗？

标签： css reactjs printing

【解决方案1】：

        body{
            margin: 0;
            -webkit-print-color-adjust: exact;
        }
        .container{
            display: flow-root;
            max-width: 1200px;
            margin: 0 auto;
            padding-left: 15px;
            padding-right: 15px;
            font-family: 'Courier New', Courier, monospace;
        }
        section{
            padding: 80px 0;
            background-color: lightcoral;
        }
        h1{
            font-size: 24px;
            
        }
        p{
            font-size: 16px;
        }

        @media print{
            @page {
        margin-top: 0;
        margin-bottom: 0;
            }
            body{
                padding-top: 24px;
                padding-bottom: 24px;
            }
            section{
            padding: 80px 0;
            background-color: aliceblue;
        }
        h1{
            font-size: 20px;
            
        }
        p{
            font-size: 16px;
        }
        }

    <section>
        <div class="container">
        <h1>Title</h1>
        <hr>
        <p>Some of content here</p>
        </div>
    </section>

您可以看到打印窗口中显示的页面与它自己的区别。 -webkit-print-color-adjust：精确； 强制使用颜色打印。

【讨论】：