sofa-print

React print component.

开发&调式

# 在http://localhost:8081端口打开示例页面

npm run dev

# 将打包之后的组件映射到 global node_modules 中

npm link

发布

npm run build

npm login

npm publish

安装

npm install sofa-print

使用

1. 无预览样式

import React, { Component } from 'react';
import { PrintPage, PageBreak } from 'sofa-print';
import 'sofa-print/dist/main.css';

class PrintOrderDetail extends Component {
  this.state = {
      orderList: [1, 2, 3, 4, 5],
      skuList: [1, 2, 3, 4],
    };
  handlePrin = () => {
    this.refs.printComponent.printMethod();
  }
  render() {
    const { orderList, skuList } = this.state;
    return (
      <div>
        <button onClick={this.handlePrint}>打印</button>
        <PrintPage ref="printComponent">
          <div>
            {orderList.map((order) => (
              <div key={order}>
                <h2>order detail table</h2>
                <table>
                  <thead>
                    <tr>
                      <th>column 1</th>
                      <th>column 2</th>
                      <th>column 3</th>
                    </tr>
                  </thead>
                  <tbody>
                    {skuList.map((sku) => (
                      <tr key={sku}>
                        <td>data 1</td>
                        <td>data 2</td>
                        <td>data 3</td>
                      </tr>
                    ))}
                  </tbody>
                </table>
                <PageBreak />
              </div>
            ))}
          </div>
        </PrintPage>
      </div>
    );
  }
}

2. 有预览样式

import React, { Component } from 'react';
import styled from 'styled-components';
import { PrintPage, PageBreak } from 'sofa-print';
import 'sofa-print/dist/main.css';

const PageWrapper = styled.div`
  padding: 0 20px;
  background-color: #fff;
`;

class PrintOrderComponent extends Component {
  this.state = {
      orderList: [1, 2, 3, 4, 5],
      skuList: [1, 2, 3, 4],
    };
  handleGoBack = () => {
    window.location.href = 'https://baidu.com';
  }
  render() {
    const { orderList, skuList } = this.state;
    return (
      <div>
        <PrintPage previewStyle={true} goBack={this.handleGoBack}>
          {orderList.map((order) => (
            <div key={order}>
              <PageWrapper>
                <h2>order detail table</h2>
                <table>
                  <thead>
                    <tr>
                      <th>column 1</th>
                      <th>column 2</th>
                      <th>column 3</th>
                    </tr>
                  </thead>
                  <tbody>
                    {skuList.map((sku) => (
                      <tr key={sku}>
                        <td>data 1</td>
                        <td>data 2</td>
                        <td>data 3</td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </PageWrapper>
              <PageBreak />
            </div>
          ))}
        </PrintPage>
      </div>
    );
  }
}

export default PrintOrderComponent;

API

1. PrintPage组件

   打印组件，包裹需要打印的元素的容器组件，配合printMethod()方法使用；

2. PageBreak组件

   分页组件，插入到需要分页的元素后，之后的内容会另起一页开始打印；

3. printMethod()方法

   PrintPage组件的打印方法，在自定义的打印按钮上调用该方法，可以触发打印操作；

PrintPage组件接收的props

|属性|类型|默认值|说明 |:--:|:-----|:-----|:-----| |onBeforePrint|function|undefined|打印动作之前的回调函数 |previewStyle|boolean|false|是否展示预览样式，设置为true，会展示‘打印’和‘返回’按钮 |pageWidth|number|764|设置打印纸的宽度，previewStyle为true时有效 |showGoBackButton|boolean|true|是否展示返回按钮，previewStyle为true时有效 |goBack|function|undefined|点击返回按钮的回调函数，previewStyle为true时有效