Question

我创建了一个自定义打印函数来打印特定 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;

组件呈现良好（下图）。

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

Answer 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：精确； 强制使用彩色打印。

反应打印页面内容

1 个答案: