@yuancang/electron_hiprint

基于 electron-hiprint 的打印组件封装，通过依赖注入解耦业务代码，提供 Modal 弹窗形式的打印功能。

安装

npm install @yuancang/electron_hiprint
# 或
pnpm add @yuancang/electron_hiprint

依赖说明

peerDependencies（需自行安装）：

• react: >=16.8.0
• react-dom: >=16.8.0
• antd: >=3.0.0

快速开始

1. 配置依赖注入

在应用入口处配置（只需配置一次）：

import React from 'react';
import { configure } from '@yuancang/electron_hiprint';
import '@yuancang/electron_hiprint/src/sku/hiprint.css';
import { Modal } from 'antd';

// 初始化配置
configure(
  {
    // 打印内容下拉选择
    PRINT_SELECT_OPTIONS: [
      { code: 'productCnName', name: '商品中文名称' },
    ],

    // 打印纸类型
    PRINTED_TYPE_LIST: [
      { code: 'SIZE_4', name: '40*20(双列)', size: 60, width: '60mm', height: '30mm' },
    ],

    // 打印类型配置
    TYPE_OPTIONS: {
      SIZE_4: {
        type: 'SIZE_4',
        skuMax: 21,
        nameMax: 21,
        renderedCount: 2,
        countMax: 4,
      },
    },

    // API URL 配置
    URL_OPTIONS: {
      logs: '/xxx',
      single_print: '/xxx',
      batch_print: '/xxx',
    },

    // 打印来源类型
    CLIENT_PRINT_TYPE: {
      0: 0, // 商品列表 - 单个打印
      1: 1, // 入库列表 - 批量打印
    },
  },
  {
    // 获取打印数据的方法
    fetchPostWidthData: (url, data) => axios.post(url, data),

    // 获取登录信息
    getLoginInfo: () => JSON.parse(localStorage.getItem('loginInfo') || '{}'),

    // Modal 弹窗组件（必填，用于自定义弹窗样式）
    ModalWrapper: Modal,
  }
);

最小可运行示例（推荐）

import React, { useEffect } from 'react';
import axios from 'axios';
import { Modal } from 'antd';
import { configure } from '@yuancang/electron_hiprint';

export default function BootstrapPrintConfig() {
  useEffect(() => {
    configure(
      {
        PRINT_SELECT_OPTIONS: [
          { code: 'xxx', name: '商品中文名称' },
          { code: 'xxx', name: '商品英文名称' },
        ],
        PRINTED_TYPE_LIST: [
          { code: 6, name: '40*20(双列)', size: 60, width: '60mm', height: '30mm' },
        ],
        TYPE_OPTIONS: {
          6: { type: 6, skuMax: 21, nameMax: 21, renderedCount: 2, countMax: 20 },
        },
        URL_OPTIONS: {
          logs: '/xxx',
          single_print: '/xxx',
          batch_print: '/xxx',
        },
        CLIENT_PRINT_TYPE: {
          0: 0,
          1: 1,
        },
      },
      {
        fetchPostWidthData: (url, data) => axios.post(url, data),
        getLoginInfo: () => JSON.parse(localStorage.getItem('loginInfo') || '{}'),
        ModalWrapper: Modal,
      }
    );
  }, []);

  return null;
}

2. 使用组件

import React, { useRef } from 'react';
import { Button } from 'antd';
import { ModalForPrintSku } from '@yuancang/electron_hiprint';

function App() {
  const printRef = useRef();

  return (
    <>
      <Button onClick={() => printRef.current?.show(true, { id: 123 })}>
        打开打印
      </Button>

      <ModalForPrintSku
        modalRef={(ref) => (printRef.current = ref)}
        url="/api/print"
        productClientPrintFromType={1}
        formatData={(res) => res.data}
      />
    </>
  );
}

API 参考

configure(config, deps)

通过依赖注入解耦业务代码，使组件库与具体业务逻辑分离。

import { configure, getConfig, getDeps } from '@yuancang/electron_hiprint';

config 配置项

| 属性 | 类型 | 说明 | |------|------|------| | PRINT_SELECT_OPTIONS | array | 打印内容下拉选项 [{ code, name }] | | PRINTED_TYPE_LIST | array | 打印纸类型 [{ code, name, size, width, height }] | | TYPE_OPTIONS | object | 打印类型详细配置，包含 skuMax、nameMax、countMax 等 | | URL_OPTIONS | object | API 地址配置，包含 logs、single_print、batch_print | | CLIENT_PRINT_TYPE | object | 打印来源类型映射 |

deps 依赖注入

| 属性 | 类型 | 必填 | 说明 | |------|------|------|------| | fetchPostWidthData | (url, data) => Promise | 是 | 获取打印数据的请求方法 | | getLoginInfo | () => object | 否 | 获取登录信息 | | ModalWrapper | Component | 是 | Modal 弹窗组件（支持 antd Modal 或自定义） |

配置与依赖的合并规则

• configure(config, deps) 每次调用都会更新内部运行时配置。
• config 中：
  • PRINT_SELECT_OPTIONS、PRINTED_TYPE_LIST 仅接受数组；
  • TYPE_OPTIONS、URL_OPTIONS、CLIENT_PRINT_TYPE 仅接受对象。
• deps 中：
  • fetchPostWidthData、getLoginInfo 仅接受函数；
  • ModalWrapper 为空时会回退默认组件。
• 非法类型会自动回退到默认值，避免污染组件内部状态。

获取当前配置

import { getConfig, getDeps } from '@yuancang/electron_hiprint';

// 获取当前配置
const config = getConfig();

// 获取当前依赖
const deps = getDeps();

getConfig() 和 getDeps() 返回的是只读快照（深拷贝 + 冻结），用于读取当前状态，不建议直接修改返回值。

ModalForPrintSku Props

| 属性 | 类型 | 必填 | 说明 | |------|------|------|------| | modalRef | (ref) => void | 是 | 获取组件实例 | | url | string | 是 | 获取打印数据的接口地址 | | productClientPrintFromType | number | 是 | 打印来源：0=单个, 1=批量 | | formatData | function | 否 | 格式化接口返回数据 |

组件实例方法 (ref)

printRef.current.show(true, { id: 123 }); // 显示弹窗
printRef.current.show(false);              // 隐藏弹窗
printRef.current.close();                   // 关闭弹窗
printRef.current.getParams();              // 获取当前参数

打印尺寸

| code | 名称 | 尺寸 | |------|------|------| | SIZE_4 | 4020(双列) | 60mm × 30mm | | 5 | 4020 | 40mm × 20mm | | 2 | 100*30 | 100mm × 30mm | | 3 | A4 | 210mm × 297mm |

开发

# 安装依赖
npm install

# 开发模式（监听）
npm run dev

# 构建
npm run build

发布

# patch 版本 +1 (1.0.3 → 1.0.4)
npm run release

# minor 版本 +1 (1.0.3 → 1.1.0)
npm run release:minor

# major 版本 +1 (1.0.3 → 2.0.0)
npm run release:major

License

MIT