seokju-na/react-thermal-printer

React for thermal printing

react-thermal-printer's Issues

Print via serial port (Web) - How to troubleshoot

Hello,

I am trying to use to connect website for receipt printing. Request prompt is coming to select available port for the printer but nothing is happening after connect.

I can see that data array being passed to Writer instance in debugging mode. Any help to how to get this working.

My code is executing this in a callback function on click event.

const data = await render(
  <Printer type="epson">
    <Text>Hello World</Text>
  </Printer>
);

const port = await window.navigator.serial.requestPort();
await port.open({ baudRate: 9600 });

const writer = port.writable?.getWriter();
if (writer != null) {
  await writer.write(data);
  writer.releaseLock();
}

Thanks,

GJ

TypeScript >= 5 support

Upgrade typescript version to >= 5

Issue with using react-thermal-printer with local IP printers

Issue Description

(im using nextjs 14) I'm trying to work with local IP printers, specifically ECS/POS printers, using the react-thermal-printer library. Following the provided example code:

import { render, Printer, Text, Cut } from 'react-thermal-printer';
import { connect } from 'node:net';

const data = await render(
  <Printer type="epson" width={42}>
    <Text>Hello World</Text>
    <Cut />
  </Printer>
);

const conn = connect({
  host: '192.168.0.99',
  port: 9100,
  timeout: 3_000,
});
conn.write(Buffer.from(data), () => {
  conn.destroy();
});
conn.on('error', ...);
conn.on('timeout', ...);

However, when running this code in my Node.js environment (v21.6.1), I encounter the following error:

SyntaxError: Unexpected token '<'
    at ModuleLoader.moduleStrategy (node:internal/modules/esm/translators:168:18)
    at callTranslator (node:internal/modules/esm/loader:279:14)
    at ModuleLoader.moduleProvider (node:internal/modules/esm/loader:285:30)
    at async link (node:internal/modules/esm/module_job:76:21)

It seems like there's an issue with the syntax when using JSX within a Node.js environment.

Request for Assistance

I'm unsure if I'm using the library incorrectly or if there's a compatibility issue with my setup. Any assistance or guidance on how to properly utilize react-thermal-printer with local IP printers would be greatly appreciated. I'm currently working on a personal project where this functionality is crucial.

Thank you for your time and assistance.

'GetContents' has been explicitly marked deprecated here

/Users/hao/Library/Caches/node-gyp/16.18.0/include/node/v8.h:5614:3: note: 'GetContents' has been explicitly marked deprecated here
V8_DEPRECATED("Use GetBackingStore. See http://crbug.com/v8/9908.\")

yarn install
node: v16.18.0
yarn: 1.22.19

Will there be support for Epson Ethernet versions?

EPSON TM-T82 doesn't have serial ports and is connected to the router which is accessible over Local IP. Will there be support for these type of thermal printers

render is not a function

I am using react-thermal-printer version ^0.11.0 in my React app. When I use the render function I get render is not a function
in console.

Can you export this as a type like PrinterType?

react-thermal-printer/packages/react-thermal-printer/src/components/Printer.tsx

Line 31 in 65b23af

}: ExtendHTMLProps<'div', PrinterProps>) {

eslint, prettier -> biomejs

Printer Paper Width.

I am using this package for multiple printers with different printer paper while using the same system.

My question is the printer width in mm or in pixels. also if I don't set the width will it automatically determine the paper width itself.

@seokju-na please respond to this, it's urgent.

Thanks

리액트네이트브에서는 사용이 안되는걸까요?

안녕하세요.

리액트 네이티브에서는 사용이 안되는지 걸까요?

혹시 안되는거면 지원 계획은 있으신지 궁금해서 질문드립니다.

감사합니다.

Just pointing out an alternative method

First, thank for your incredible work ⭐

I could keep this myself without bothering you. But seeing #64 and many others, I thought I could just open this issue.

I made a fork: https://github.com/vajahath/image-thermal-printer

What it basically does is convert the "thing to print" into an image (or HTMLCanvasElemet) and use the https://github.com/seokju-na/react-thermal-printer/blob/main/packages/printer/src/commands/image.ts image command on it.

So far, it is working nice-ish (some tweaks needed here and there)

I converted my div into canvas (https://www.npmjs.com/package/html-to-image#toCanvas). Then printed it using the above command. This gave me unlimited customization.

(the printer I'm using is very old and of low quality - hence some lines segments are lost)

Because the printers are generally having low resolution, serif typeface may not be a good choice. I prefer sans serif typeface. Roboto is a good choice. (Noto as well). Any font that claims to work well in low-res could be a good choice.

Some advantages I found:

• Alignment: This is a solved problem in html. With now we having the container-queries, we can design a div the way we want.
• Tables: html tables adjust themselves
• Responsive: Thermal printer comes in many width - 2 inch (my case), 3 inch. With the right css you can target any number of widths.
• Tiny and simplified code (mainly image manipulation is only required)
• Framework agnostic.

Cons:

• Need to fiddle around the printer dpi (mine is 200) and possible print widths.

---

This issue was to inform you an alternative method. Feel free to close this issue whenever you wish.

Error Uncaught TypeError: Cannot read properties of undefined (reading 'prototype')

Hey Guys, I do not have the printer yet, but I'm trying to test this library, I'm getting the follow error:

How can I solve this??

Packages:

"dependencies": {
    "@formatjs/intl-pluralrules": "4.3.3",
    "@formatjs/intl-relativetimeformat": "10.0.1",
    "@fortawesome/fontawesome-free": "6.1.1",
    "@hello-pangea/dnd": "^16.3.0",
    "@hotjar/browser": "^1.0.9",
    "@popperjs/core": "2.11.5",
    "@react-google-maps/api": "^2.19.0",
    "@storybook/react": "^7.3.2",
    "animate.css": "4.1.1",
    "apexcharts": "3.35.0",
    "axios": "0.26.1",
    "bootstrap": "5.2.2",
    "bootstrap-icons": "^1.5.0",
    "bootstrap-switch-button-react": "^1.2.0",
    "chart.js": "3.7.1",
    "clsx": "1.1.1",
    "formik": "2.2.9",
    "glamor": "^2.20.40",
    "i18next": "^23.4.6",
    "i18next-browser-languagedetector": "^7.1.0",
    "js-cookie": "^3.0.5",
    "laravel-echo": "^1.12.1",
    "line-awesome": "1.3.0",
    "lodash": "^4.17.21",
    "moment": "^2.29.4",
    "moment-timezone": "^0.5.43",
    "nouislider": "15.5.1",
    "polished": "^4.2.2",
    "prism-react-renderer": "1.3.1",
    "prism-themes": "1.9.0",
    "prismjs": "1.28.0",
    "pusher-js": "^7.2.0",
    "qs": "6.10.3",
    "react": "18.0.0",
    "react-apexcharts": "1.4.0",
    "react-app-alias": "^2.2.2",
    "react-app-rewired": "^2.2.1",
    "react-beautiful-dnd": "^12.1.0",
    "react-bootstrap": "2.5.0-beta.1",
    "react-copy-to-clipboard": "5.1.0",
    "react-dates": "^21.8.0",
    "react-dom": "18.0.0",
    "react-hook-form": "^7.45.0",
    "react-i18next": "^13.2.1",
    "react-if": "^4.1.5",
    "react-inlinesvg": "3.0.0",
    "react-input-mask": "3.0.0-alpha.2",
    "react-intl": "5.25.0",
    "react-number-format": "^4.9.3",
    "react-qr-code": "^2.0.12",
    "react-query": "3.38.0",
    "react-router-dom": "6.3.0",
    "react-scripts": "5.0.1",
    "react-svg": "^16.1.22",
    "react-table": "^7.7.0",
    "react-thermal-printer": "^0.17.0",
    "react-to-print": "^2.14.13",
    "react-toastify": "^9.1.3",
    "react-topbar-progress-indicator": "4.1.1",
    "sass": "^1.66.1",
    "socicon": "3.0.5",
    "yup": "0.32.11"
  },
  "devDependencies": {
    "@testing-library/jest-dom": "5.16.4",
    "@testing-library/react": "13.1.1",
    "@testing-library/user-event": "13.5.0",
    "@types/bootstrap": "5.1.10",
    "@types/chart.js": "2.9.37",
    "@types/jest": "27.4.1",
    "@types/node": "16.11.27",
    "@types/prismjs": "1.26.0",
    "@types/qs": "6.9.7",
    "@types/react": "18.0.6",
    "@types/react-beautiful-dnd": "^13.1.4",
    "@types/react-copy-to-clipboard": "5.0.2",
    "@types/react-dates": "^21.8.3",
    "@types/react-dom": "18.0.2",
    "@types/react-input-mask": "^3.0.2",
    "@types/react-table": "^7.7.9",
    "@types/sass-loader": "8.0.3",
    "@vitejs/plugin-react": "^4.0.4",
    "@vitejs/plugin-react-refresh": "^1.3.6",
    "css-loader": "6.7.1",
    "del": "6.0.0",
    "mini-css-extract-plugin": "2.6.1",
    "prettier": "2.6.2",
    "rtlcss-webpack-plugin": "4.0.7",
    "sass-loader": "13.0.2",
    "typescript": "4.6.3",
    "vite": "^4.4.9",
    "webpack": "5.74.0",
    "webpack-cli": "4.10.0"
  },

Row throws an error when string from right side is too big

The row component throws an error if the string length from right side is too big

example:

<Row
        left={<Text>CEP:</Text>}
        right={
          <Text>Antiga 18 portão de garagem vermelho casa de esquina</Text>
        }
/>

Error thrown:
Possible Unhandled Promise Rejection (id: 2):

RangeError: String.prototype.repeat count must be finite and non-negative
RangeError: String.prototype.repeat count must be finite and non-negative

Are supported printer types Epson and Star only?

I saw this line in the documentation. Note: Supported printer types are epson, star.

Does this mean only printers from these two manufactures are supported? I was under the impression any printer with ESC/POS capability is supported. I did see in the JS conf video that the printer used was of neither company.

Also wondering what ports are best supported by this library? LAN WLAN USB

Fix Module "stream" has been externalized for browser compatibility. Cannot access "stream.Transform" in client code.

const Render = (
  <Printer type='epson' width={42} characterSet='korea'>
    <Text size={{ width: 2, height: 2 }}>9,500원</Text>
    <Text bold={true}>결제 완료</Text>
    <Br />
    <Line />
    <Row left='결제방법' right='체크카드' />
    <Row left='카드번호' right='123456**********' />
    <Row left='할부기간' right='일시불' />
    <Br />
    <Text align='center'>Wifi: some-wifi / PW: 123123</Text>
    <Cut />
  </Printer>
);

function Invoice({ setPopup }: InvoiceProps) {
  const { state } = useContext(StoreContext);
  const { transaction, setTransaction } = useContext(OverlayContext);

  if (!transaction) setPopup(undefined);

  return (
    <Box
      position='absolute'
      right={0}
      top={0}
      w='350px'
      bg='bg'
      boxShadow='xl'
      px={4}
      py={6}
      h='100vh'
      maxH='100vh'
      borderLeftWidth={1}
      borderLeftColor='grey.300'
      zIndex={10}
    >
      <HStack
        // px={4}
        justify='space-between'
        w='100%'
        position='absolute'
        bottom={0}
      >
        <Button
          variant='secondary'
          onClick={() => {
            setTransaction(null);
            setPopup(undefined);
          }}
        >
          Back
        </Button>
        <HStack gap={4}>
          <Button
            onClick={async () => {
             //where am calling the print function
              const port = (await navigator.serial.requestPort());
              await port.open({ baudRate: 9600 });

              const writer = port.writable?.getWriter();
              if (writer != null) {
                await writer.write(Render);
                writer.releaseLock();
              }
            }}
            variant='secondary'
            leftIcon={<IoPrint fontSize='1rem' />}
          >
            Print
          </Button>
          <Button leftIcon={<IoShareSocialSharp />}>Share</Button>
        </HStack>
      </HStack>
    </Box>
  );
}

Am getting Module "stream" has been externalized for browser compatibility. Cannot access "stream.Transform" in client code.anytime I start the app which would literally crash the app.
Am I doing something wrong? Please help

Jest to vitest

Fast is good

Partial Cut Discussion

We have an issue where the paper is falling to the floor after a . It would be nice to be able to specify a partial cut. Either as a prop on the Cut component or a new component CutPartial. This could be implemented by adjusting the m parameter on the printer.cut() call. Maybe allowing the m parameter to be passed as a parameter from the Cut component. Thoughts?

Image align and Row center content are not centered

Hello, great work.

Image component is not getting centered when printed and the same goes for Row with the center prop.

Can you extract the core (non-react) part of this module and publish as a separate package?

Great work!
Can you extract the core (non-react) part of this module and publish as a separate package?
You can reuse that core package in the react-thermal-printer module as well.

Motive:
I was searching for a thermal printer implementation to play around with pure JS and once settled, use it in Angular. So If you could extract out the core (non-react) part and publish as a new standalone package, that would be very helpful for the community.

Printing via Bluetooth

Does this package support printing via Bluetooth and if yes please share an example.

Printing in arabic is not working.

I'm trying to print Arabic text on a POS printer.
i have tried both "star" and "Epson" types
and i have tested on both wpc1256_arabic and pc864_arabic .

Printing in English is working fine. printing images using <Image src.. /> also works fine.
but when I try to print an Arabic text, it shows an unknown character. (not ???)

Printer function:

  const printer = async () => {
 
    if (!printerState) {
     // connecting to printer
       ....
           setPrinterState(() => characteristic);
       ....
    }

    printing();
  };

Printing function

  const printing = async () => {
    const data = await render(
      <Printer type="star" width={88} characterSet="wpc1256_arabic">
        <Text>مرحبا بك في رياكت</Text>
      </Printer>
    );
    // Print the data in chunks
    await printChunks(printerState, data);
  };

printChunks function:

  const sendChunk = async (printerState, chunk) => {
    try {
      await printerState.writeValueWithResponse(chunk);
    } catch (error) {
      console.error(`Error sending data chunk: ${error}`);
      throw error;
    }
  };

Printer trigger:

  <Button type="primary" onClick={printer}>
        PRINT
  </Button>

Unable to connect printer using usb or serial requestPort

Unable to connect and print the text using usb cable and also get error :

DOMException: Failed to execute 'open' on 'SerialPort': Failed to open serial port. : (this in chrome)

TypeError: Cannot read properties of undefined (reading 'requestPort')
at handle (App.js:20:1) : (this in brave browser)

is it automatic connect to the printer or somthing else can you tellme how should i fixed it

import "./App.css";
import "leaflet/dist/leaflet.css";
import "leaflet-draw/dist/leaflet.draw.css";
import { Printer, Text, render } from "react-thermal-printer";


function App() {
  const handle = async() => {
    try {
      const data = await render(
        <Printer type="epson">
          <Text>Hello World</Text>
        </Printer>
      );
      
      const port = await window.navigator.serial.requestPort();
      await port.open({ baudRate: 9600 });
      
      const writer = port.writable?.getWriter();
      if (writer != null) {
        await writer.write(data);
        writer.releaseLock();
      }
      
     console.log('ehy', data, port)
    } catch (error) {
      console.log(error)
    }
  }

  return (
    <div className="App">
      <button onClick={handle}>Print</button>
    </div>
  );
}

export default App;

Some values are missing

in most of the printer it's worked fine, but when i tried to use printer model : KS-NET KS9050, some values are missing. do u know why?

Print Image Not working

how to print with image logo? can explain it?

when print with image my printer always print random black .

EPSON TM-T82X USB

react/jsx-runtime not found

This dependency was not found:

• react/jsx-runtime in ./node_modules/react-thermal-printer/esm/index.js

To install it, you can run: npm install --save react/jsx-runtime

Cyrillic alphabet is printed incorrectly, is there any options?

Disable floyd-steinberg option for print image

Is it posible to disable floyd-steinberg method for printing image?

• current I'm using this library to print the whole receipt because mot of printer does not support Khmer Unicode.
• so printing result with text image is not smooth

Does it work with bluetooth thermal printer?

is it possible to print via the React web application using a thermal Bluetooth printer?

can i render three aligns like this

<Row
left={

메뉴명
수량

}
right="가격"
/>

안녕하세요 석주님! 써멀 프린트로 연결되어 있지 않았을 경우 PDF로 출력할 수 있을까요?

안녕하세요 석주님 우선 오픈 소스라이브러리에 기여해주셔서 감사합니다! 공교롭게 이번주에 써멀 프린터로 출력할 수 있도록 기능 구현해달라는 요청을 받았는데요, 덕분에 수월하게 진행 중에 있습니다.

석주님의 영상상자료와 리드미를 바탕으로 리액트 컴포넌트를 만들어서 아래와 같이 렌더링하려고 하고 있습니다.

온클릭 함수로 프린트 함수를 전달해서 실행되도록 하단의 이미지 처럼 놓았구요.

하지만, 아직 프린터를 회사로부터 수령받지 못해서 버튼을 클릭하면 다음과 같은 에러 메시지가 나타나더라구요.

함수가 제대로 동작하는지 확인하고 싶은데, 혹시 PDF로 익스포트할 수 있도록 라이브러리에서 세팅하는 방법이 있을까요?
더불어서, 제가 석주님의 라이브러리를 제대로 적용했는지도 궁금합니다.

Will it Work for Multiple printers

Will the module support to print the receipt into multiple printers simultaneously

Row Alignment Issues center alignment not working in star printer

 <Printer type="star" width={42} encoder={encoder}>
        <Text bold={true} align="left" size={{ width: 2, height: 2 }}>
          KOT: #1
        </Text>
        <Br />
        <Text>Dine In</Text>
        <Text>Space: Private Room</Text>
        <Text>Table: Table 2</Text>
        <Text>Date: 12th June 2024</Text>
        <Text>Status: Mixed</Text>
        <Text>Created by: Sushil</Text>
        <Br />
        <Row
          left={"Item"} 
          className="grid grid-cols-3 items-center"
          center={"Status"}
          right="Qty"
        />
        <Line />
        <Row left="Chicken Biryani"  center="Ready" right="1" />
        <Row left="Mutton Biryani"  center="Ready" right="2" />
        <Row left="Paneer Biryani"  center="Ready" right="3" />
        <Row left="Veg Biryani"  center="Ready" right="4" />
        <Line />
        <Row left="Total" right="3" />
        <Cut />
      </Printer>

@seokju-na
@Hassan-jr