Unable to connect printer using usb or serial requestPort

[abhishek73magar]

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;

[Hassan-jr]

window.navigator.serial and window.navigator.usb are both in experimental and are not supported by all browsers, in fact it is only supported in the latest versions of chrome, edge and opera.

I am also facing this issues and still looking for a better way that is cross browser to connect to thermal printer that are attached through USB.

@seokju-na any suggestions pleas.

[seokju-na]

Since react-thermal-printer library focus rendering the content marked up with JSX as data that can be printed on a thermal printer, but not responsible for the interface sending data to the thermal printer.

This library won't solve connecting to the printer, but i can give some guide.

In Web Browser:

• Web Bluetooth API
• Web Serial API
• WebUSB API

In Electron or Node.js:

• Node SerialPort
• @thiagoelg/node-printer

[Toscanah]

window.navigator.serial and window.navigator.usb are both in experimental and are not supported by all browsers, in fact it is only supported in the latest versions of chrome, edge and opera.

I am also facing this issues and still looking for a better way that is cross browser to connect to thermal printer that are attached through USB.

@seokju-na any suggestions pleas.

Have you found a solution? I'm facing the same problem with a thermal printer attached via USB and not serial. The WebUSB API could help but it's a bit intricate to work, so using the library with USB would be great but unfortunately, I'm missing the serial port on my PC so I can't use it as of now.

[Toscanah]

I found this: https://github.com/drffej/webusb.printer

It's a very simple snippet that actually works and lets you print some text on a USB-attached printer (just adjust the vendorId filter to your case). You can take the code as an example and print your own stuff.

Also, if you see an error "Failed to execute 'open' on 'USBDevice': Access denied." install this "Zadig" as explained here: https://stackoverflow.com/a/76488056/19193089

You won't have any cool looking Components like this library offers, you'll have to format your own string and feed it to the encoder, but it should work.