0

Printed Image

I have been trying to figure this out to make the printing text clear using reactToPrint library, but it's coming as blurry. I have tried making font changes(font face, style etc) but none of them seems to work. I have tried subpixel-antialiasing also, but it still doesn't improve my print quality. I am using a thermal printer to print for a restaurant POS system developed.

When I print any content writing them in any text editor that gives me clear output using the same printer.

enter image description here

Part of code:

<ReactToPrint
trigger={(e) => {
    return <MDBBtn size='lg' className="me-2" color="info" disabled={printBtnDisabled}>
        Print
    </MDBBtn>

pageStyle={pageStyle}
content={() => componentRef.current} />

Can anyone please guide me on this? Let me know if anything else is required?

Santanu
  • 893
  • 3
  • 10
  • 24
  • Hey! Happy to try and help (I think you were asking about this on GitHub previously). Are you able to show more code and/or a demo by chance? It's very difficult to help debug without seeing the code. Also, to clarify: if you print not using `react-to-print` it works ok, but when using `react-to-print` it is blurry? – Matthew Herbst Jul 30 '23 at 16:46
  • 1
    @MatthewHerbst Thanks for replying back. I was able to resolve it to some extend by specifying the pageStyle property very precisely in mm values instead of inches which was before. – Santanu Jul 31 '23 at 03:32
  • That's great! If you want, you can answer your own question here, that way others can see how you did it if they run into a similar issue. It's a very novel/cool use-case by the way, appreciate you sharing! – Matthew Herbst Jul 31 '23 at 07:56

0 Answers0