{"id":31492480,"url":"https://github.com/cwy007/react-client-print","last_synced_at":"2026-06-30T09:31:22.117Z","repository":{"id":181247719,"uuid":"666469777","full_name":"cwy007/react-client-print","owner":"cwy007","description":"a tag print editor","archived":false,"fork":false,"pushed_at":"2023-07-29T15:48:26.000Z","size":1869,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-10-02T13:53:22.520Z","etag":null,"topics":["browser","client","mobx","print","print-tag","react"],"latest_commit_sha":null,"homepage":"https://cwy007.github.io/react-client-print/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/cwy007.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2023-07-14T15:44:12.000Z","updated_at":"2023-07-29T14:33:54.000Z","dependencies_parsed_at":"2023-07-14T17:04:13.629Z","dependency_job_id":null,"html_url":"https://github.com/cwy007/react-client-print","commit_stats":null,"previous_names":["cwy007/react-client-print"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/cwy007/react-client-print","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cwy007%2Freact-client-print","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cwy007%2Freact-client-print/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cwy007%2Freact-client-print/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cwy007%2Freact-client-print/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cwy007","download_url":"https://codeload.github.com/cwy007/react-client-print/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cwy007%2Freact-client-print/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34961543,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-30T02:00:05.919Z","response_time":92,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["browser","client","mobx","print","print-tag","react"],"created_at":"2025-10-02T13:12:03.968Z","updated_at":"2026-06-30T09:31:22.105Z","avatar_url":"https://github.com/cwy007.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-client-print\n\n[![NPM version](https://img.shields.io/npm/v/react-client-print.svg?style=flat)](https://npmjs.org/package/react-client-print)\n[![NPM downloads](http://img.shields.io/npm/dm/react-client-print.svg?style=flat)](https://npmjs.org/package/react-client-print)\n\n标签编辑器 - 定制标签打印模板\n\n## demos\n\n[线上演示](https://cwy007.github.io/react-client-print/demo/react-client-print)\n\n1.预览\n![预览](https://p.ipic.vip/8q8erb.png)\n\n2.编辑模板\n![编辑模板](https://p.ipic.vip/z28tao.png)\n\n3.触发打印\n![触发打印](https://p.ipic.vip/t0iqqc.png)\n\n## Usage\n\n```bash | pure\nyarn add react-client-print\n\nor\n\nnpm install react-client-print\n\n```\n\n```jsx\nimport ReactClientPrint from 'react-client-print';\n\n\u003cReactClientPrint\n  ref={storeRef}\n  templates={store.templates}\n  defaultTemplateName={store.defaultTemplateName}\n  dataSource={store.dataSource}\n  defaultFields={store.defaultFields}\n  onChange={async ({ template, operationType }) =\u003e {\n    if (operationType === 'create') {\n      const resp = await createTemplateSvc(template);\n      if (resp.code === 200) {\n        message.success('新建模板成功');\n      }\n    }\n\n    if (operationType === 'update') {\n      const resp = await updateTemplateSvc(template);\n      if (resp.code === 200) {\n        message.success('修改模板成功');\n      }\n    }\n\n    if (operationType === 'delete') {\n      const resp = await deleteTemplateSvc(template);\n      if (resp.code === 200) {\n        message.success('删除模板成功');\n      }\n    }\n\n    refresh();\n  }}\n/\u003e;\n```\n\n## API\n\n| 属性名              | 描述                     | 类型                                | 默认值      |\n| ------------------- | ------------------------ | ----------------------------------- | ----------- |\n| templates           | 打印模板列表             | `TTemplate`                         | `[]`        |\n| defaultTemplateName | 默认模板名称             | `string`                            | `undefined` |\n| dataSource          | 打印的数据源             | `Record\u003cstring, string\u003e[]`          | `[]`        |\n| defaultFields       | 模板字段                 | `{name: string; fields: sring[]}[]` | `[]`        |\n| onChange            | 新建/编辑/删除模板的回调 | `ReactClientPrintProps['onChange']` | `undefined` |\n\n### 方法\n\n| 名称  | 描述                           | 类型         |\n| ----- | ------------------------------ | ------------ |\n| store | 组件内部状态 PrintStore 的实例 | `PrintStore` |\n\n### types\n\n```tsx | pure\ntype TBarcodeFormat = 'CODE39' | 'CODE128' | 'EAN8' | 'EAN13' | 'UPC';\n\ninterface TPosition {\n  width: number;\n  height: number;\n  left: number;\n  top: number;\n  style?: React.CSSProperties;\n}\n\nexport interface TNode extends TPosition {\n  id: string | number;\n  placeholder: string;\n  type?: 'label' | 'value' | 'qrcode' | 'barcode'; // TODO\n  formmat?: TBarcodeFormat; // TODO\n}\n\nexport interface TTemplate {\n  size: {\n    type: 'fixed';\n    width: number;\n    height: number;\n  };\n  nodes: TNode[];\n  name: string;\n}\n\ninterface ReactClientPrintProps {\n  dataSource?: Record\u003cstring, string\u003e[];\n  templates?: TTemplate[];\n  defaultTemplateName?: string;\n  defaultFields: {\n    name: string;\n    fields: string[];\n  }[];\n  onChange: (payload: {\n    template: Partial\u003cTTemplate\u003e;\n    operationType: 'update' | 'create' | 'delete';\n  }) =\u003e void;\n}\n```\n\n## Development\n\n```bash\n# install dependencies\n$ yarn install\n\n# develop library by docs demo\n$ yarn start\n```\n\n## Deploy to Github Page\n\n```jsx\n// .dumirc.ts\n// 我们把base和publicPath都设置成 /\u003cREPO\u003e/就可以了。\nexport default defineConfig({\n  outputPath: 'docs-dist',\n  base: process.env.NODE_ENV === 'production' ? '/react-client-print/' : '/',\n  publicPath: process.env.NODE_ENV === 'production' ? '/react-client-print/' : '/',\n  // exportStatic: {},\n});\n\n// logo 如何配置？现在本地可以显示，发到gh-page后加载logo.png资源地址不对 - TODO\n\n// cli\nyarn run deploy\n\n```\n\n## Reference\n\n- [dumi](https://d.umijs.org/)\n- [antd](https://ant-design.antgroup.com/components/overview-cn/)\n- [less](https://less.bootcss.com/)\n- [mobx](https://mobx.js.org/README.html)\n- [react](https://react.dev/learn)\n\n- [npm publish](https://www.jianshu.com/p/0faaff26a2c8)\n\n\u003e `npm login --registry=https://registry.npmjs.org`\n\n- [手动部署](https://d.umijs.org/guide/faq#%E6%89%8B%E5%8A%A8%E9%83%A8%E7%BD%B2)\n- [自动部署](https://d.umijs.org/guide/faq#%E8%87%AA%E5%8A%A8%E9%83%A8%E7%BD%B2)\n- [dumi 站点部署到 github pages](https://www.jianshu.com/p/bbb33a759b32)\n\n- [remote: Permission to git denied to github-actions[bot]](https://github.com/ad-m/github-push-action/issues/96#issuecomment-1647904286)\n\n## LICENSE\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcwy007%2Freact-client-print","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcwy007%2Freact-client-print","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcwy007%2Freact-client-print/lists"}