Question

SaleInvoice.js上有一个“打印”按钮，显示了包含Report.js的模态。

创建Report.js只是为了描述应如何以及在打印页面上显示什么内容。

Report.js具有一个“打印”按钮，可在浏览器中打开“打印预览”。

如何使SaleInvoice.js上的“打印”按钮直接在浏览器中打开“打印预览”？

SaleInvoice.js

...
            <button
              style={{marginRight: '200px'}}
              onClick={() => this.setState({printView: true})}>
              Print
            </button>
            {this.state.printView ? (
              <Modal
                type="Print"
                {...this.props}
                show={this.state.printView}
                modalClosed={() => this.setState({printView: false})}
              />
            ) : null}
...

Report.js

import React from 'react';
import styles from './SaleInvoice.module.css';

const SaleInvoice = props => {
  const {customerName} = props;
  const rows = props.lineItems;
  const alignRightMarginRight = [styles.alignRight, styles.marginRight].join(
    ' ',
  );
  const {amountBeforeFreight, freight, amountAfterFreight} = props;
  const reverseDateString = date => {
    let [yyyy, mm, dd] = date.split('-');
    return dd + '-' + mm + '-' + yyyy;
  };
  const renderContent = () => {
    let i = 0;
    let contentRows = (i, d) => {
      return (
        <React.Fragment>
          <td className={styles.serialNumber}>{i}</td>
          <td className={styles.productName}>{d.product_name}</td>
          <td className={alignRightMarginRight}>{d.product_qty}</td>
          <td className={alignRightMarginRight}>{d.product_unit}</td>
          <td className={alignRightMarginRight}>{d.product_rate}</td>
          <td className={alignRightMarginRight}>{d.product_disc}</td>
          <td className={alignRightMarginRight}>{d.sub_total}</td>
        </React.Fragment>
      );
    };
    return rows.map(d => {
      i++;
      if (i === rows.length) {
        return null;
      }
      if (i % 10 === 0) {
        return (
          <tr key={i} className={styles.pagebreak}>
            {contentRows(i, d)}
          </tr>
        );
      } else {
        return <tr key={i}>{contentRows(i, d)}</tr>;
      }
    });
  };

  return (
    <React.Fragment>
      <div className={styles.all}>
        <div className={[styles.header].join(' ')}>
          <button className={styles.hideInPrint} onClick={window.print}>
            Print
          </button>
          <button className={styles.hideInPrint} onClick={props.modalClosed}>
            Close
          </button>
          <h5 className={styles.docTitle}>Estimate</h5>
          <h6 className={styles.customerName}>
            {customerName}
            <span className={styles.date}>
              {reverseDateString(props.date.split('T')[0])}
            </span>
          </h6>
        </div>
        <table className={styles.content}>
          <thead>
            <tr>
              <td>No</td>
              <td>Name</td>
              <td className={alignRightMarginRight}>Qty</td>
              <td className={alignRightMarginRight}>Unit</td>
              <td className={alignRightMarginRight}>Rate</td>
              <td className={alignRightMarginRight}>Disc</td>
              <td className={alignRightMarginRight}>Total</td>
            </tr>
          </thead>
          <tbody className={styles.content}>{renderContent()}</tbody>
        </table>
        <div className={styles.footer}>
          <div className={styles.foot}>
            <label>Amount:</label>
            <label className={styles.amount}>
              {amountBeforeFreight.toFixed(2)}
            </label>
          </div>
          <div className={styles.foot}>
            <label>Freight:</label>
            <label className={styles.amount}>
              {freight ? freight.toFixed(2) : 0}
            </label>
          </div>
          <div className={styles.foot}>
            <label>Final Amount:</label>
            <label className={styles.amount}>
              {amountAfterFreight.toFixed(2)}
            </label>
          </div>
        </div>
      </div>
    </React.Fragment>
  );
};

export default SaleInvoice;

Answer 1

在文件SalesInvoice.js中，我们将更改事件onClick，而不是执行什么操作（在您的状态下将模式视图设置为true），我们希望它在浏览器中打开打印窗口。如下

<button
  style={{marginRight: '200px'}}
  onClick={window.print} >
  Print
</button>

我猜你不需要这个部分吗？

        {this.state.printView ? (
          <Modal
            type="Print"
            {...this.props}
            show={this.state.printView}
            modalClosed={() => this.setState({printView: false})}
          />
        ) : null}

React打印组件

1 个答案: