HTML Print low text quality?

[amg....@gmail.com]

Hi

I'm trying to print a recepeit format, but the results looks kind of low quality for the text (blurry text), if I print directly from browser (window.print) the quality improves.

Any suggestion on what to give a look or direct answer to improve the blurry text I'm getting? please

here's the code I'm using:

HTML:

 

   <div style="box-sizing: border-box; width: 100% !important; line-height: 1 !important; font-size: 12px !important; font-family: Times New Roman; false">
    <img src="http://www.washday.mx/wp-content/uploads/2020/11/logo.png" className="logo" style="height: auto; width: 100%;" alt="Logotipo" />
    <p className="centrado" style="text-align: center; align-content: center; font-size: 12px;">
        Store Name
    </p>
    <hr style="border-top: 1px solid black;"/>
    <p style="text-align: left; align-content: left; font-size: 12px;">
       <span style="font-weight: bold; font-size: 12px;">Fecha emision:</span> 02/12/2020
    </p>
    <p style="text-align: left; align-content: left; font-size: 12px;">
       <span style="font-weight: bold; font-size: 12px;">Hora emision:</span> 04:38 pm
    </p>
    <p style="text-align: left; align-content: left; font-size: 12px;">
       <span style="font-weight: bold; font-size: 12px;">Atendio:</span>
    </p>
    <p style="text-align: left; align-content: left; font-size: 12px;">
       <span style="font-weight: bold; font-size: 12px;">Orden:</span> WD-194
    </p>
    <table style="border-top: 1px solid black; border-collapse: collapse; font-size: 12px; width: 100%;">
        <thead>
            <tr style="border-top: 1px solid black; border-collapse: collapse; font-size: 12px; text-align: center; align-content: center; font-size: 12px;">
                <th className="cantidad" style="border-top: 1px solid black; border-collapse: collapse; font-size: 12px; width: 27%; max-width: 27%; word-break: break-all; font-size: 12px;">CANT</th>
                <th className="producto" style="border-top: 1px solid black; border-collapse: collapse; font-size: 12px; width: 46%; max-width: 46%; font-size: 12px;">PROD</th>
                <th className="precio" style="border-top: 1px solid black; border-collapse: collapse; font-size: 12px; width: 27%; max-width: 27%; word-break: break-all; font-size: 12px;">$$</th>
            </tr>
        </thead>
        <tbody>
            <tr key={prod._id}  style="border-top: 1px solid black; border-collapse: collapse; font-size: 12px;  text-align: center; align-content: center; font-size: 12px;">
                            <td className="cantidad" style="border-top: 1px solid black; border-collapse: collapse; font-size: 12px; width: 27%; max-width: 27%; word-break: break-all; font-size: 12px;">1</td>
                            <td className="producto" style="border-top: 1px solid black; border-collapse: collapse; font-size: 12px; width: 46%; max-width: 46%; font-size: 12px;">Cobertura de almohada</td>
                            <td className="precio" style="border-top: 1px solid black; border-collapse: collapse; font-size: 12px; width: 27%; max-width: 27%; word-break: break-all; font-size: 12px;">2</td>
                        </tr><tr key={prod._id}  style="border-top: 1px solid black; border-collapse: collapse; font-size: 12px;  text-align: center; align-content: center; font-size: 12px;">
                            <td className="cantidad" style="border-top: 1px solid black; border-collapse: collapse; font-size: 12px; width: 27%; max-width: 27%; word-break: break-all; font-size: 12px;">1</td>
                            <td className="producto" style="border-top: 1px solid black; border-collapse: collapse; font-size: 12px; width: 46%; max-width: 46%; font-size: 12px;">Cobertura de sobrecama</td>
                            <td className="precio" style="border-top: 1px solid black; border-collapse: collapse; font-size: 12px; width: 27%; max-width: 27%; word-break: break-all; font-size: 12px;">5.5</td>
                        </tr><tr key={prod._id}  style="border-top: 1px solid black; border-collapse: collapse; font-size: 12px;  text-align: center; align-content: center; font-size: 12px;">
                            <td className="cantidad" style="border-top: 1px solid black; border-collapse: collapse; font-size: 12px; width: 27%; max-width: 27%; word-break: break-all; font-size: 12px;">1</td>
                            <td className="producto" style="border-top: 1px solid black; border-collapse: collapse; font-size: 12px; width: 46%; max-width: 46%; font-size: 12px;">Mantel</td>
                            <td className="precio" style="border-top: 1px solid black; border-collapse: collapse; font-size: 12px; width: 27%; max-width: 27%; word-break: break-all; font-size: 12px;">5</td>
                        </tr>
        </tbody>
    </table>
    <hr className="separador" style="border-top: 1px solid black;" />
    <p className="derecha" style="text-align: right; align-content: right; font-size: 12px;">
        Subtotal: <span className="negritas" style="font-wight: bold; font-size: 12px;">12.5</span>
    </p>
    <p className="derecha" style="text-align: right; align-content: right; font-size: 12px;">
        Descuento: <span className="negritas" style="font-wight: bold; font-size: 12px;">0</span>
    </p>
    <p className="derecha" style="text-align: right; align-content: right; font-size: 12px;">
        Impuestos: <span className="negritas" style="font-wight: bold; font-size: 12px;">0</span>
    </p>
    <p className="derecha" style="text-align: right; align-content: right; font-size: 12px;">
        Total: <span className="negritas" style="font-wight: bold; font-size: 12px;">12.5</span>
    </p>
    <p className="derecha" style="text-align: right; align-content: right; font-size: 12px;">
        Pago: <span className="negritas" style="font-wight: bold; font-size: 12px;">0</span>
    </p>
    <p className="derecha" style="text-align: right; align-content: right; font-size: 12px;">
        Debe: <span className="negritas" style="font-wight: bold; font-size: 12px;">12.50</span>
    </p>
    <hr className="separador" style="border-top: 1px solid black;" />
    <p className="centrado" style="text-align: center; align-content: center; font-size: 12px;">
        Pago con Efectivo
    </p>
    <p className="centrado" style="text-align: center; align-content: center; font-size: 12px;">
        ¡GRACIAS POR SU COMPRA!
    </p>
    </div>

Trigerer Code:

 
  let config = qz.configs.create(printerName, {
      margins: { left: 0.1, bottom: 0.1 },
      interpolation: "nearest-neighbor",
      size: {
        width: 58,
        height: 3276
      },
      units: "mm",
      rasterize: true
    });
     qz.print(config, [{
      type: 'pixel',
      format: 'html',
      flavor: 'plain',
      data: stringElement
    }]);

[Tres Finocchiaro]

Which Java and QZ Tray version are you using?

We try to scale the HTML to a scale factor of (e.g. 72 dpi / 180 dpi) so it's pixel-perfect for the printers.

We'll test the code and see how it prints.

- Tres.Fin...@gmail.com

--
You received this message because you are subscribed to the Google Groups "qz-print" group.
To unsubscribe from this group and stop receiving emails from it, send an email to qz-print+u...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/qz-print/bb43eece-5a84-4e72-b147-8e20f4c2a24fo%40googlegroups.com.

[amg....@gmail.com]

qz tray v2.1.2

java 11.0.9.1

El miércoles, 2 de diciembre de 2020, 16:45:33 (UTC-6), Tres Finocchiaro escribió:

Which Java and QZ Tray version are you using?

We try to scale the HTML to a scale factor of (e.g. 72 dpi / 180 dpi) so it's pixel-perfect for the printers.

We'll test the code and see how it prints.

- Tres.Fi...@gmail.com

To unsubscribe from this group and stop receiving emails from it, send an email to qz-p...@googlegroups.com.

[Lite Finocchiaro]

I would recommend modifying your html/css, and possibly using an SVG or smaller logo at the top (the logo is 988x225 pixels).  Even after I removed the logo, it became difficult to print a good result because the width is so much greater than the height.

If you're printing to 58mm wide paper, this forces the scaled text size to be far too small for a 203 or 180 dot-per-inch printhead to print legibly. Screenshot and photo attached.

Kind regards,

Lite Finocchiaro

VP, QZ Industries

 

To unsubscribe from this group and stop receiving emails from it, send an email to qz-print+u...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/qz-print/ccd18ac2-dbb2-41a1-908a-f6e9eea74eb1o%40googlegroups.com.