https://github.com/cwy007/react-client-print
a tag print editor
https://github.com/cwy007/react-client-print
browser client mobx print print-tag react
Last synced: about 15 hours ago
JSON representation
a tag print editor
- Host: GitHub
- URL: https://github.com/cwy007/react-client-print
- Owner: cwy007
- License: mit
- Created: 2023-07-14T15:44:12.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2023-07-29T15:48:26.000Z (almost 3 years ago)
- Last Synced: 2025-10-02T13:53:22.520Z (9 months ago)
- Topics: browser, client, mobx, print, print-tag, react
- Language: TypeScript
- Homepage: https://cwy007.github.io/react-client-print/
- Size: 1.78 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-client-print
[](https://npmjs.org/package/react-client-print)
[](https://npmjs.org/package/react-client-print)
标签编辑器 - 定制标签打印模板
## demos
[线上演示](https://cwy007.github.io/react-client-print/demo/react-client-print)
1.预览
2.编辑模板
3.触发打印
## Usage
```bash | pure
yarn add react-client-print
or
npm install react-client-print
```
```jsx
import ReactClientPrint from 'react-client-print';
{
if (operationType === 'create') {
const resp = await createTemplateSvc(template);
if (resp.code === 200) {
message.success('新建模板成功');
}
}
if (operationType === 'update') {
const resp = await updateTemplateSvc(template);
if (resp.code === 200) {
message.success('修改模板成功');
}
}
if (operationType === 'delete') {
const resp = await deleteTemplateSvc(template);
if (resp.code === 200) {
message.success('删除模板成功');
}
}
refresh();
}}
/>;
```
## API
| 属性名 | 描述 | 类型 | 默认值 |
| ------------------- | ------------------------ | ----------------------------------- | ----------- |
| templates | 打印模板列表 | `TTemplate` | `[]` |
| defaultTemplateName | 默认模板名称 | `string` | `undefined` |
| dataSource | 打印的数据源 | `Record[]` | `[]` |
| defaultFields | 模板字段 | `{name: string; fields: sring[]}[]` | `[]` |
| onChange | 新建/编辑/删除模板的回调 | `ReactClientPrintProps['onChange']` | `undefined` |
### 方法
| 名称 | 描述 | 类型 |
| ----- | ------------------------------ | ------------ |
| store | 组件内部状态 PrintStore 的实例 | `PrintStore` |
### types
```tsx | pure
type TBarcodeFormat = 'CODE39' | 'CODE128' | 'EAN8' | 'EAN13' | 'UPC';
interface TPosition {
width: number;
height: number;
left: number;
top: number;
style?: React.CSSProperties;
}
export interface TNode extends TPosition {
id: string | number;
placeholder: string;
type?: 'label' | 'value' | 'qrcode' | 'barcode'; // TODO
formmat?: TBarcodeFormat; // TODO
}
export interface TTemplate {
size: {
type: 'fixed';
width: number;
height: number;
};
nodes: TNode[];
name: string;
}
interface ReactClientPrintProps {
dataSource?: Record[];
templates?: TTemplate[];
defaultTemplateName?: string;
defaultFields: {
name: string;
fields: string[];
}[];
onChange: (payload: {
template: Partial;
operationType: 'update' | 'create' | 'delete';
}) => void;
}
```
## Development
```bash
# install dependencies
$ yarn install
# develop library by docs demo
$ yarn start
```
## Deploy to Github Page
```jsx
// .dumirc.ts
// 我们把base和publicPath都设置成 //就可以了。
export default defineConfig({
outputPath: 'docs-dist',
base: process.env.NODE_ENV === 'production' ? '/react-client-print/' : '/',
publicPath: process.env.NODE_ENV === 'production' ? '/react-client-print/' : '/',
// exportStatic: {},
});
// logo 如何配置？现在本地可以显示，发到gh-page后加载logo.png资源地址不对 - TODO
// cli
yarn run deploy
```
## Reference
- [dumi](https://d.umijs.org/)
- [antd](https://ant-design.antgroup.com/components/overview-cn/)
- [less](https://less.bootcss.com/)
- [mobx](https://mobx.js.org/README.html)
- [react](https://react.dev/learn)
- [npm publish](https://www.jianshu.com/p/0faaff26a2c8)
> `npm login --registry=https://registry.npmjs.org`
- [手动部署](https://d.umijs.org/guide/faq#%E6%89%8B%E5%8A%A8%E9%83%A8%E7%BD%B2)
- [自动部署](https://d.umijs.org/guide/faq#%E8%87%AA%E5%8A%A8%E9%83%A8%E7%BD%B2)
- [dumi 站点部署到 github pages](https://www.jianshu.com/p/bbb33a759b32)
- [remote: Permission to git denied to github-actions[bot]](https://github.com/ad-m/github-push-action/issues/96#issuecomment-1647904286)
## LICENSE
MIT