react-hiprint-plugins v1.1.5

react-hiprint-plugins

Usage

import { HiPrint } from 'react-hiprint-plugins';

const testTemplate = { "panels": [{ "index": 0, "height": 50, "width": 75, "paperHeader": 49.5, "paperFooter": 141.73228346456693, "printElements": [{ "options": { "left": 4.5, "top": 1.5, "height": 126, "width": 202.5 }, "printElementType": { "type": "rect" } }, { "options": { "left": 6, "top": 7.5, "height": 9.75, "width": 48, "title": "物料标签" }, "printElementType": { "type": "text" } }, { "options": { "left": 3, "top": 21, "height": 9, "width": 141 }, "printElementType": { "type": "hline" } }, { "options": { "left": 3, "top": 42, "height": 9, "width": 141 }, "printElementType": { "type": "hline" } }, { "options": { "left": 3, "top": 63, "height": 9, "width": 141 }, "printElementType": { "type": "hline" } }, { "options": { "left": 3, "top": 84, "height": 9, "width": 202.5 }, "printElementType": { "type": "hline" } }, { "options": { "left": 3, "top": 108, "height": 9, "width": 204 }, "printElementType": { "type": "hline" } }, { "options": { "left": 58.5, "top": 6, "height": 123, "width": 9 }, "printElementType": { "type": "vline" } }, { "options": { "left": 6, "top": 27, "height": 12, "width": 48, "title": "包装数量" }, "printElementType": { "type": "longText" } }, { "options": { "left": 6, "top": 48, "height": 9.75, "width": 48, "title": "采购订单号" }, "printElementType": { "type": "text" } }, { "options": { "left": 6, "top": 69, "height": 9.75, "width": 48, "title": "产品名称" }, "printElementType": { "type": "text" } }, { "options": { "left": 6, "top": 93, "height": 9.75, "width": 48, "title": "出货日期" }, "printElementType": { "type": "text" } }, { "options": { "left": 4.5, "top": 112.5, "height": 9.75, "width": 49.5, "title": "有效日期" }, "printElementType": { "type": "text" } }, { "options": { "left": 144, "top": 6, "height": 102, "width": 9 }, "printElementType": { "type": "vline" } }, { "options": { "left": 145.5, "top": 22.5, "height": 48, "width": 61.5, "title": "物料号", "testData": "M20230607-001", "textType": "qrcode", "barcodeMode": "CODE128A" }, "printElementType": { "type": "text" } }, { "options": { "left": 64.5, "top": 7.5, "height": 9.75, "width": 75, "field": "mLotId", "testData": "M20230607-001" }, "printElementType": { "type": "text" } }, { "options": { "left": 64.5, "top": 27, "height": 9.75, "width": 75, "field": "packageQty", "testData": "300" }, "printElementType": { "type": "text" } }, { "options": { "left": 64.5, "top": 51, "height": 9.75, "width": 75, "field": "orderId", "testData": "O230101001" }, "printElementType": { "type": "text" } }, { "options": { "left": 64.5, "top": 69, "height": 9.75, "width": 75, "field": "productName", "testData": "PA0001" }, "printElementType": { "type": "text" } }, { "options": { "left": 64.5, "top": 93, "height": 9.75, "width": 75, "field": "shipmentDate", "testData": "2023-08-10", "dataType": "datetime", "format": "yyyy-M-d" }, "printElementType": { "type": "text" } }, { "options": { "left": 64.5, "top": 112.5, "height": 9.75, "width": 133.5, "field": "effectiveDate", "testData": "2025-08-10", "dataType": "datetime", "format": "yyyy-MM-dd HH:mm" }, "printElementType": { "type": "text" } }], "paperNumberLeft": 182, "paperNumberTop": 119, "paperNumberDisabled": true }] };
const testData = [{
  mLotId: "M2023001",
  packageQty: "25",
  orderId: "00001",
}];

const onSave = (value) => {
    console.log('onSaveTemplateJson', value);
}
export default () => <div style={{height: '900px'}}><HiPrint template={testTemplate} printData={testData} onSaveTemplate={onSave}/> </div>