# sofa-print

> react print component

Latest version **1.0.10** (published 2020-07-06) · MIT license · 0 weekly downloads

## Install

```sh
npm install sofa-print
pnpm add sofa-print
yarn add sofa-print
bun add sofa-print
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.10 |
| Published | 2020-07-06 |
| First published | 2019-02-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 6 |
| Unpacked size | 23.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Maintainers | leonayang, zhanghuohuo1996 |
| Keywords | react, component, print |

## Links

- npm: https://www.npmjs.com/package/sofa-print
- Repository: https://github.com/SFTC/sofa-print
- Homepage: https://github.com/SFTC/sofa-print#readme
- Issues: https://github.com/SFTC/sofa-print/issues
- npm.io page: https://npm.io/package/sofa-print

## Dependencies (6)

- [react](https://npm.io/package/react.md) ^16.7.0
- [react-dom](https://npm.io/package/react-dom.md) ^16.2.0
- [babel-polyfill](https://npm.io/package/babel-polyfill.md) 6.23.0
- [react-to-print](https://npm.io/package/react-to-print.md) ^2.1.2
- [react-proptypes](https://npm.io/package/react-proptypes.md) ^1.0.0
- [styled-components](https://npm.io/package/styled-components.md) 2.0.0

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.0.10 (latest) — 2020-07-06
- 1.0.9-beta — 2020-07-06
- 1.0.8 — 2019-08-15
- 1.0.7 — 2019-05-27
- 1.0.6 — 2019-05-27
- 1.0.5 — 2019-04-03
- 1.0.4 — 2019-04-03
- 1.0.3 — 2019-03-17
- 1.0.2 — 2019-02-19
- 1.0.1 — 2019-02-18
- 1.0.0 — 2019-02-17

## README

# sofa-print
React print component.

## 开发&调式


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

npm run dev

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

npm link
```

## 发布

```bash
npm run build

npm login

npm publish
```

## 安装

```bash
npm install sofa-print
```

## 使用

1. 无预览样式

```js
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. 有预览样式


```js
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时有效

---
_Source: https://npm.io/package/sofa-print · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._