在react中实现打印功能

叁歲伎倆 2023-06-05 05:52 42阅读 0赞

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

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

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

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

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

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

![format_png][]

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

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

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

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

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

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

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

方法2：使用react-inline-css

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

**网页效果图：**

![format_png 1][]

**打印预览竖版效果图：**

![format_png 2][]

**横版效果图：**

**![format_png 3][]**

打印效果图：

![format_png 4][]

![format_png 5][]

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>
        );
      }
    }

[https_blog.csdn.net_u014267869_article_details_52539341]: https://blog.csdn.net/u014267869/article/details/52539341
[format_png]: /images/20230601/00a6d5966c9e46d98ef5d889aac2f80d.png
[aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]: /images/20230601/b46779dc9b45415ea13a6ee1ebfc753f.png
[format_png 1]: /images/20230601/e084c5b893eb471686135524c7626083.png
[format_png 2]: /images/20230601/d7d27d55f86247d5bed9b4f1aa82f27e.png
[format_png 3]: /images/20230601/c946673fda084a55aafd4479af3946c2.png
[format_png 4]: /images/20230601/6a7553f3b4da4adab53f44c2839e25d5.png
[format_png 5]: /images/20230601/66d86c1b20864c8ebe2925e0e54a4f45.png