在react中实现打印功能

最近项目中，前端采用react+antd+dva的组合，已经完成了后头管理类系统产品的更新迭代工作。

今天有一个新需求，需要在后台管理系统中实现点击打印完成指定页面的打印功能。

之前也没接触过，只知道浏览器带有打印功能的实现，window.print()。

问题来了，在react中是没有dom节点的，不过我们也是可以转为dom节点的。

常规js文件打印：https://blog.csdn.net/u014267869/article/details/52539341

在react中，其实同样也是可以获取到节点信息的，在你需要打印的内容部分节点添加一个ID

打印按钮点击事件
print = () => {
    window.document.body.innerHTML = window.document.getElementById('billDetails').innerHTML;
    window.print();
    window.location.reload();
}

　　这样打印出来的内容是没有带样式的，因为一般css文件并不会写到行内去，所以在生成html的文件字符串时，里面没有样式信息，在打印时就会布局混乱。

要想打印出来的效果与网页上显示的效果一致，就需要在生成html的文件字符串时，带上样式信息。

方法1：把样式信息写在行内

在文件信息不复杂时，可以写在行内

方法2：使用react-inline-css

使用这个npm包，可以在配置后把样式自动添加到行内

网页效果图：

打印预览竖版效果图：

横版效果图：

打印效果图：

完整代码：

import React, { PureComponent } from 'react';
import moment from 'moment';
import { connect } from 'dva';
import {
  Card,
  Button,
  Form,
  Table,
  message,
 } from 'antd';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';
import { fixedZeroTo4Bit } from '../../utils/utils';
import styles from './Funds.less';
import { isEmptyObject } from '../../utils/reg';
import { Yuan } from '../../utils/math';
import watermark from '../../assets/icon/revocation.png';

@connect(({ finance, loading }) => ({
  finance,
  loading: loading.models.list,
}))
@Form.create()
export default class LoanSettleMent extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      loading: true,
    };
  }

  componentDidMount() {
    const code = !isEmptyObject(this.props.match) ? this.props.match.params.id : 0;
    this.statisticalInfo({ receiptsCode: code });
  }

  // 结算单列表详情
  statisticalInfo(params) {
    this.props.dispatch({
      type: 'finance/statisticalInfo',
      payload: params,
    }).then(() => {
      this.setState({
        loading: false,
      })
    });
  }

  // 撤销操作
  fetchRevocation(params) {
    this.props
      .dispatch({
        type: 'finance/fetchRevocation',
        payload: params,
      })
      .then(() => {
        const { finance: { revocationData } } = this.props;
        const { code } = revocationData;
        if (code === 200) {
          message.info('撤销货款单成功!').then(() => {
            window.location.href = '/funds/loansettlement';
          });
        } else {
          message.info('撤销货款单失败!');
        }
      });
  }

  // 撤销
  cancer = () => {
    const code = !isEmptyObject(this.props.match) ? this.props.match.params.id : 0;
    this.fetchRevocation({
      receiptsCode: code,
    });
  };

  // 返回
  back = () => {
    window.history.back();
  };

  // 打印
  print(){
    window.document.body.innerHTML = window.document.getElementById('billDetails').innerHTML;
    window.print();
    window.location.reload();
  }

  render() {
    const { finance: { statisticalInfo }, loading } = this.props;
    let data = [],
        createName,
        createTime;
    if (statisticalInfo && !Array.isArray(statisticalInfo)) {
      data = statisticalInfo;
      createName = statisticalInfo.createName;
      createTime = statisticalInfo.createTime;
    }

    if (statisticalInfo != undefined) {
      data = statisticalInfo.goodsVos;
    }

    let _data = [],
        receiptsCode;
    if (statisticalInfo && !Array.isArray(statisticalInfo)) {
      _data = statisticalInfo;
      receiptsCode = statisticalInfo.receiptsCode;
    }
    const { supplierName, carNo, stallName, startTime, endTime, enable } = _data;

    const len = data.length;

    const columns = [
      {
        title: '品种',
        dataIndex: 'attrName',
        align: 'center',
      },
      {
        title: '销售货款',
        dataIndex: 'goodsAmount',
        align: 'left',
        render: (text, record, index) => {
          const { goodsAmount, goodsPaymentStr } = record;
          const type = goodsPaymentStr !== null ? goodsPaymentStr.split('负').length : -1;
          if (index < len - 1) {
            return <span>{goodsAmount ? Yuan(goodsAmount, 2) : ''}</span>;
          }
          return {
            children:
              type == 2 ? (
                <span className={styles.neg}>{goodsPaymentStr}</span>
              ) : (
                <span className={styles.bold}>{goodsPaymentStr}</span>
              ),
            props: {
              colSpan: 7,
            },
          };
        },
      },
      {
        title: '件数',
        dataIndex: 'number',
        align: 'center',
        render: (text, record, index) => {
          const { number } = record;
          if (index < len - 1) {
            return <span>{number ? number : ''}</span>;
          }
          return {
            children: '',
            props: {
              colSpan: 0,
            },
          };
        },
      },
      {
        title: '重量',
        dataIndex: 'weight',
        align: 'center',
        render: (text, record, index) => {
          const { weight } = record;
          if (index < len - 1) {
            return <span>{weight ? weight : ''}</span>;
          }
          return {
            children: '',
            props: {
              colSpan: 0,
            },
          };
        },
      },
      {
        title: '平均售价',
        dataIndex: 'averageAmount',
        align: 'center',
        render: (text, record, index) => {
          const { averageAmount } = record;
          if (index < len - 1) {
            return <span>{averageAmount ? Yuan(averageAmount, 2) : ''}</span>;
          }
          return {
            children: '',
            props: {
              colSpan: 0,
            },
          };
        },
      },
      {
        title: '平均重量',
        dataIndex: 'averageWeight',
        align: 'center',
        render: (text, record, index) => {
          const { averageWeight } = record;
          if (index < len - 1) {
            return <span>{averageWeight ? averageWeight : ''}</span>;
          }
          return {
            children: '',
            props: {
              colSpan: 0,
            },
          };
        },
      },
      {
        title: '费用类型',
        dataIndex: 'type',
        align: 'center',
        render: (text, record, index) => {
          const { type } = record;
          if (index < len - 1) {
            return <span>{type}</span>;
          }
          return {
            children: '',
            props: {
              colSpan: 0,
            },
          };
        },
      },
      {
        title: '扣款金额',
        dataIndex: 'amount',
        align: 'center',
        render: (text, record, index) => {
          const { amount } = record;
          if (index < len - 1) {
            return <span>{amount !== null ? Yuan(amount, 2) : ''}</span>;
          }
          return {
            children: '',
            props: {
              colSpan: 0,
            },
          };
        },
      },
    ];

    return (
      <PageHeaderLayout>
        <div className={styles.billDetails} id={'billDetails'}>
          <Card
            bordered={false}
            title=""
          >
            <div className={styles.paymentbill}>
              <div style={{display: 'flex', height: '60px', lineHeight: '60px'}}>
                <h1 style={{flex: 1, textAlign: 'center'}}>{stallName}</h1>
                <span style={{position: 'absolute', right: '10px', color: '#FF6666', fontWeight: '600'}}>{`NO:${receiptsCode !== undefined ? receiptsCode : ''}`}</span>
              </div>

              <div style={{display: 'flex'}}>
                <h2 style={{flex: 1, textAlign: 'center'}}>商品销售车次结算单</h2>
                <div style={{position: 'absolute', right: '10px'}}>
                  <Button type="primary" onClick={this.cancer} disabled={!enable} style={{marginRight: '5px'}}>
                    撤销
                  </Button>
                  <Button onClick={this.print.bind(this)} style={{marginRight: '5px'}}>打印</Button>
                  <Button type="primary" onClick={this.back} style={{marginRight: '5px'}}>
                    返回
                  </Button>
                </div>
              </div>

              <div style={{display: 'flex'}}>
                <h3 style={{flex: 1, textAlign: 'left'}}>{`货老板：${supplierName !== undefined ? supplierName : ''} ${
                  carNo !== undefined ? fixedZeroTo4Bit(carNo, 4) : 0
                }车`}
                </h3>
                <h3 style={{flex: 1}}>{`到货时间：${moment(startTime).format('YYYY-MM-DD')}`}</h3>
                <h3 style={{flex: 1}}>{`售罄时间：${moment(endTime).format('YYYY-MM-DD')}`}</h3>
              </div>

              <img src={watermark} hidden={enable} style={{position: 'absolute', width: '100px', height: '100px', top: '120px', right: '80px',zIndex: 100}} />
            </div>
          </Card>
          <Card
            bordered={false}
            title=""
            bodyStyle={{ padding: '0 16px' }}
          >
            <Table
              dataSource={data}
              columns={columns}
              bordered
              pagination={false}
              loading={this.state.loading}
            />
          </Card>
          <Card style={{ border: 0 }}>
            <div style={{display: 'flex'}}>
              <h3 style={{flex: 1}}>{`结算人：${createName !== undefined ? createName : ''}`}</h3>
              <h3 style={{flex: 1, textAlign: 'right'}}>{`结算时间:${moment(createTime).format(
                'YYYY-MM-DD'
              )}`}</h3>
            </div>
          </Card>
        </div>
      </PageHeaderLayout>
    );
  }
}

后续准备把dom节点转为pdf再加上去...待续