qzind / tray

Browser plugin for sending documents and raw commands to a printer or attached device.
https://qz.io
Other
851 stars 276 forks source link

Trying to figure out HTML printing #385

Closed lorro closed 5 years ago

lorro commented 5 years ago

Hi,

I'm in the phase of figuring out if QZ Tray would work for me before actually buying a license. I'm trying to print out some basic html, but it isn't quite working out.

I can print raw text without a problem but when I try printing some plain HTML, I see a small java popup for about a second before it disappears again. Nothing is printed.

This is how my printing function looks like:

sendToPrinter () {
    const config = qz.configs.create('Labelprinter')
    const data = [{
      type: 'html',
      format: 'plain',
      data: '<html><h1>Testing HTML</h1></html>'
    }]

    return qz.print(config, data)
      .catch((data) => {
        console.log(data)
      })
  }

This is what the logs tell me:

    Message: {"call":"print","promise":{},"params":{"printer":{"name":"Labelprinter"},"options":{"colorType":"color","copies":1,"density":0,"duplex":false,"fallbackDensity":null,"interpolation":"bicubic","jobName":null,"legacy":false,"margins":0,"orientation":null,"paperThickness":null,"printerTray":null,"rasterize":true,"rotation":0,"scaleContent":true,"size":null,"units":"in","altPrinting":false,"encoding":null,"endOfDoc":null,"perSpool":1},"data":[{"type":"html","format":"plain","data":"<html><h1>Testing HTML</h1></html>"}]},"timestamp":1543242557960,"uid":"ank1cg","position":{"x":2880,"y":520}}
[DEBUG] 2018-11-26 15:29:17,974 @ qz.common.TrayManager:?
    Calculated dialog centered at: java.awt.Point[x=2714,y=437]
[INFO] 2018-11-26 15:29:18,661 @ qz.common.TrayManager:?
    Allowed An anonymous request to print to Labelprinter
[TRACE] 2018-11-26 15:29:18,665 @ qz.utils.PrintingUtilities:?
    Waiting for processor, 0/7 already in use
[DEBUG] 2018-11-26 15:29:18,666 @ qz.utils.PrintingUtilities:?
    Using qz.printer.action.PrintHTML to print
[DEBUG] 2018-11-26 15:29:18,666 @ qz.printer.PrintServiceMatcher:?
    Searching for PrintService matching Labelprinter
[DEBUG] 2018-11-26 15:29:18,667 @ qz.printer.PrintServiceMatcher:?
    Found 10 printers
[DEBUG] 2018-11-26 15:29:18,668 @ qz.printer.PrintServiceMatcher:?
    Found match: Labelprinter
[DEBUG] 2018-11-26 15:29:18,668 @ qz.utils.PrintingUtilities:?
    Found Resolution: 60000x60000 dphi
[DEBUG] 2018-11-26 15:29:18,685 @ qz.printer.action.PrintHTML:?
    Parsed 1 html records
[TRACE] 2018-11-26 15:29:18,686 @ qz.printer.action.WebApp:?
    Waiting on capture..
[TRACE] 2018-11-26 15:29:18,721 @ qz.printer.action.WebApp:?
    Done: 100.0 > -1.0
[TRACE] 2018-11-26 15:29:18,722 @ qz.printer.action.WebApp:?
    New state: SUCCEEDED > READY
[TRACE] 2018-11-26 15:29:18,723 @ qz.printer.action.WebApp:?
    Done: -1.0 > 0.0
[TRACE] 2018-11-26 15:29:18,723 @ qz.printer.action.WebApp:?
    New state: READY > SCHEDULED
[TRACE] 2018-11-26 15:29:18,724 @ qz.printer.action.WebApp:?
    New state: SCHEDULED > RUNNING
[TRACE] 2018-11-26 15:29:18,733 @ qz.printer.action.WebApp:?
    Done: 0.0 > 100.0
[TRACE] 2018-11-26 15:29:18,733 @ qz.printer.action.WebApp:?
    New state: RUNNING > SUCCEEDED
[TRACE] 2018-11-26 15:29:18,735 @ qz.printer.action.WebApp:?
    Zooming in by x8.333333333333334 for increased quality
[TRACE] 2018-11-26 15:29:18,735 @ qz.printer.action.WebApp:?
    Setting HTML page width to 6613.2283464566935
[TRACE] 2018-11-26 15:29:18,843 @ qz.printer.action.WebApp:?
    Setting HTML page height to 550.0
[DEBUG] 2018-11-26 15:29:18,955 @ qz.printer.action.WebApp:?
    Attempting image capture
[TRACE] 2018-11-26 15:29:19,714 @ qz.printer.action.PrintPixel:?
    DPI: 600.0  CNV: 72.0
[TRACE] 2018-11-26 15:29:19,715 @ qz.printer.action.PrintPixel:?
    Drawable area: 0.0,0.0:8.266536,11.691732
[TRACE] 2018-11-26 15:29:19,716 @ qz.printer.action.PrintPixel:?
    [(0.0,0.0)->(209.97,296.97)mm, color, 60000x60000 dphi]
[INFO] 2018-11-26 15:29:19,717 @ qz.printer.action.PrintPixel:?
    Starting printing (1 copies)
[TRACE] 2018-11-26 15:29:19,755 @ qz.printer.action.PrintImage:?
    Requested page 0 for printing
[TRACE] 2018-11-26 15:29:19,762 @ qz.printer.action.PrintImage:?
    Requested page 0 for printing
[DEBUG] 2018-11-26 15:29:19,765 @ qz.printer.action.PrintImage:?
    Scaling image up by x1.0
[DEBUG] 2018-11-26 15:29:19,781 @ qz.printer.action.PrintImage:?
    Paper area: 0,0:595,840
[TRACE] 2018-11-26 15:29:19,781 @ qz.printer.action.PrintImage:?
    Image size: 595.2,49.49501058361053
[TRACE] 2018-11-26 15:29:19,782 @ qz.printer.action.PrintImage:?
    {Text-specific LCD contrast key=140, Global antialiasing enable key=Antialiased rendering mode, Stroke normalization control key=Pure stroke conversion for accurate paths, Image interpolation method key=Bicubic image interpolation mode, Alpha blending interpolation method key=Highest quality alpha blending methods, Global rendering quality key=Highest quality rendering methods, Fractional metrics enable key=Integer text metrics mode, Text-specific antialiasing enable key=Default antialiasing text mode, Color rendering quality key=Highest quality color rendering mode}
[DEBUG] 2018-11-26 15:29:19,784 @ qz.printer.action.PrintImage:?
    Memory: 898m/3991m
[INFO] 2018-11-26 15:29:19,847 @ qz.utils.PrintingUtilities:?
    Printing complete
[TRACE] 2018-11-26 15:29:19,848 @ qz.utils.PrintingUtilities:?
    Returning processor back to pool

Any idea what I could be doing wrongly? Or is this not possible in the free version? I'm using version 2.0.8 by the way.

Thanks

lite1979 commented 5 years ago

@lorro

Can you share some more information about your environment?

What Operating System?

If raw text works fine and HTML does not, this can occur on MacOS or Linux, where the driver for HTML is normally different from the raw driver.

What make/model printer?

I.E.: Some printers use Epson drivers or Zebra drivers, even though they are not manufactured by Epson or Zebra. Alternately, you may print to PDF in MacOS or Linux, or use Microsoft's XPS Document Writer to test functionality.

What version of Java?

QZ-Tray requires Java 8 for HTML printing, and JavaFX must be installed to generate the HTML content. We recommend using the off-line 64-bit installer.

All of this being said, it is worth noting that the 2.1 branch will soon be stable, and its HTML printing quality is much better than 2.0.8.

lorro commented 5 years ago

I'm working on a Win10 installation as OS. Developing an app on localhost. My label printer is a Citizen TZ30-M01 JRE is 1.8 (Java SE 11, JavaFX should be included according to the oracle site)

Is there a windows executable available of this 2.1 version perhaps?

lorro commented 5 years ago

By the way, I just tried compiling this 2.1 branch but get the following error. error: package com.sun.javafx.print does not exist

So I guess it has something to do with JavaFX, perhaps you can supply a direct link to the download of the correct Java package? I only find links to the latest Java SE (which states JavaFX is included)

Thanks

lite1979 commented 5 years ago

https://java.com/en/download/manual.jsp

The Off-line installer should be the third link in the page linked above :)

If JavaFX is not installed or the current installation is corrupted, you will not be successful with HTML printing in either 2.0 or 2.1

Can you confirm that the Windows Test Print to this printer is successful?

tresf commented 5 years ago

I just tried compiling this 2.1 branch but get the following error.

Please use Java JDK 8. Java's trying to push newer JDK's and they're abandoning JavaFX from the default runtime.

I can print raw text without a problem but when I try printing some plain HTML, I see a small java popup for about a second before it disappears again. Nothing is printed.

If you're using "Generic/Text" driver, you can't print HTML. Which driver are you using?

Is there a windows executable available of this 2.1 version perhaps?

You shouldn't have to compile, use this version of 2.1: https://github.com/tresf/tray/releases/tag/v2.1.0-RC5

lorro commented 5 years ago

If you're using "Generic/Text" driver, you can't print HTML. Which driver are you using?

Which driver should it be instead? I'm indeed using this Generic/Text driver for the labelprinter.

tresf commented 5 years ago

alright nevermind. I got the correct drivers for this specific printer from someone and now it does print some html (though quite pixelated). But for some reason it opens the cash drawer automatically ^^

The pixelation should be fixed by using the beta of 2.1 and using { rasterize: false } configuration option. This option is new for HTML starting with 2.1.

2.1 beta can be downloaded here: https://github.com/tresf/tray/releases/tag/v2.1.0-RC5

Note 2.1 is not compatible with the latest version of Firefox. This will be fixed in a future release.

The cash drawer opening automatically is a driver setting. The driver is sending a pulse to the cash drawer by default. You can turn this off if undesired. We're not yet familiar with the Citizen drivers so you'll have to locate this in the driver preferences. Feel free to share screenshots here so others can learn.

lorro commented 5 years ago

image

That's correct :-) I found the setting in the advanced settings of the Citizen drivers.

lorro commented 5 years ago

I still do have some issues with HTML printing quality apparently.

image This is printed using

{
          type: 'pixel',
          format: 'html',
          flavor: 'plain',
          data: '<img src="static/images/vaporshop-logo.jpg" />'
        }

image

This is printed using

{
          type: 'raw',
          format: 'image',
          data: 'static/images/vaporshop-logo.jpg',
          options: {
            language: 'ESCPOS',
            dotDensity: 'double'
          }
        }

You see it's far more sharper. But yeah, not all the visuals of the logo are shown. Just to illustrate the difference in print quality :)

Printing it with 'image' as type gives the same blurry quality, only the image is displayed a bit larger than in the first image.

tresf commented 5 years ago

The title of this issue mentions HTML, not images. If printing images, special consideration should be made to:

  1. Match the DPI of the printer so that you don't get aliasing. I wouldn't recommend images for anything except logos.
  2. Ensure all images are pure black or white. We don't use any dithering techniques and there generally is no "grayscale" on thermal, our logic simply transfers black pixels to the paper and nothing else. Gimp has a 1-bit palette mode you can use as a proof of concept.

If using HTML, you'll have the luxury of allowing the driver to do the dithering, etc. Raw and Pixel are two completely different underlying technologies. In 2.1 we do have a technique for transferring HTML and PDFs directly to raw -- eliminating the need to switch technologies -- but it's not well documented. Note that with RAW, no driver is needed and to that point -- with raw -- you shouldn't need to touch the cash drawer settings, you'd be using a pulse code instead. https://qz.io/wiki/2.0-Raw-Printing#escpos

lorro commented 5 years ago

Ok, i'll try that :) We'll only have to use an image for the logo. Almost getting there I think. Still one small issue with printing html. The quality good is good when settings 'rasterize' to false, but it messes a bit with the margin

image The receipt on top is with 'rasterize' set to false, but has some text cut off. The default one (pixelated) do have correct margin.

tresf commented 5 years ago

Can you please share your HTML with us and we'll provide a working example with correct margins for our receipt printers?

lorro commented 5 years ago

Hi,

It's this quite basic html snippet

{
  type: 'pixel',
  format: 'html',
  flavor: 'plain',
  data: 
    `<p>Hi, I'm some HTML text</p>
     <p>Second line of HTML text</p>
     <p>Third line of html text</p>
    ` 
  }
tresf commented 5 years ago

Thanks for sharing. We recommend using <html> tags around your content for proper markup. We'll test on our equipment and let you know.

lite1979 commented 5 years ago

@lorro Are you using 2.0.8 or 2.1 beta?

I have a variety of thermal printers to test on:

Epson TM-T88V, TM-T88VM, TM-T88VI Citizen CBM 1000 Star TSP 650II Fukun POS80

I'll be happy to test on another model if you wish, but I will proceed with the TM-T88V otherwise.

I will note that in the Epson driver, I have my page size set to 80x3276mm

lorro commented 5 years ago

I'm using the beta :)

lorro commented 5 years ago

I've set the left margin to 0.10 and now all the printing fine! margins: { top: 0.25, right: 0.10, bottom: 0.25, left: 0.10 }

Thanks for all the kind support! ;-)

lite1979 commented 5 years ago

Thanks for the update!