HTML Printing to DYMO label printer

2,065 views
Skip to first unread message

jonath...@gmail.com

unread,
Mar 1, 2017, 2:11:55 PM3/1/17
to qz-print
I'm using QZ Tray 2.0.2 with a DYMO printer, and I'm attempting to print HTML to the printer in landscape mode.

Here's the code I'm using to generate the label:

var printerName = qzPrinters[7];
var options = {
orientation: 'landscape'
};
var config = qz.configs.create(printerName, options);
var html = "<!DOCTYPE html><html><body><div><table><tr><td><span style='font-size: 8pt;'>Class:</span><span style='font-size: 12pt;'> {classname}</span></td>></td></tr><tr><td align='center' colspan='2' style='font-size: 26pt;'>{firstname}</td></tr><tr><td align='center' colspan='2' style='font-size: 18pt;'>{lastname}</td></tr><tr><td rowspan='2' style='font-size: 24pt;'>{allergies}</td><td><table><tr><td style='font-size: 8pt;'>Security Code:</td><td style='font-size: 24pt;'>{securitycode}</td></tr><tr><td style='font-size: 8pt;'>Bag Count:</td><td style='font-size: 24pt;'>{bagcount}</td></tr></table></td></tr></table></div></body></html>";

var data = [{
type: 'html',
format: 'plain',
data: html
}];

qz.print(config, data).catch(function (e) { console.error(e); });

I'm not having much luck getting anything more than gibberish to print. Here's a JSFiddle of my desired output: https://jsfiddle.net/wcdjh7a3/. What I'm getting is maybe just the left 20% of the label printed in about .5" of label space; all other label content is cutoff or missing.

Am I missing something here? I just want my html to output to the printer, consuming as much of the 4x2.25 label as possible.

Thanks,

Jonathan Shay

Tres Finocchiaro

unread,
Mar 1, 2017, 5:14:33 PM3/1/17
to jonath...@gmail.com, qz-print
This JSFiddle has some typos.

For sizing, I recommend using the pageWidth and pageHeight parameters as defined here:


You may also want to use strict CSS dimensions as well so that the preview is pixel-perfect.

Lastly, Dymo works best with the grayscale option as mentioned here: https://qz.io/wiki/2.0-Pixel-Printing#dymo-labelwriter



--
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+unsubscribe@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Tres Finocchiaro

unread,
Mar 2, 2017, 9:00:54 PM3/2/17
to Jonathan Shay, qz-p...@googlegroups.com
Sorry, you should also specify the label size in your printer options per:

 ... , size: {width: 4, height: 2.25}, units: 'in', ...


On Thu, Mar 2, 2017 at 6:10 PM, Jonathan Shay <jonath...@gmail.com> wrote:
Tres-

Thank you for your quick reply. I've made the adjustments you suggested, and am still having an issue. I saw the typos you pointed out in the JSFiddle and have corrected the errors in the HTML.Here's my current configuration:

var printerName = qzPrinters[7];
                    var options = {
                        orientation: 'landscape',
                        //margins: 0,
                        //scaleContent: false,
                        colorType: 'grayscale',
                        density: 300,
                        units: 'in'
                    };
                    var config = qz.configs.create(printerName, options);

                    var html = "<!DOCTYPE html><html><body><div>" +
                                    "<table><tr><td><span style='font-size: 8pt;'>Class:</span><span style='font-size: 12pt;'> {classname}</span></td><td></td></tr><tr><td align='center' colspan='2' style='font-size: 26pt;'>{firstname}</td>" +
                                    "</tr><tr><td align='center' colspan='2' style='font-size: 18pt;'>{lastname}</td></tr><tr><td rowspan='2' style='font-size: 24pt;'>{allergies}</td><td><table><tr><td style='font-size: 8pt;'>Security Code:</td><td style='font-size: 24pt;'>{securitycode}</td>" +
                                    "</tr><tr><td style='font-size: 8pt;'>Bag Count:</td><td style='font-size: 24pt;'>{bagcount}</td></tr></table></td></tr></table>" +
                                "</div></body></html>";

                    var data = [{
                        type: 'html',
                        format: 'plain',
                        data: html,
                        options: { pageWidth: 4, pageHeight: 2.25, units: 'in' }
                    }];

                    qz.print(config, data).catch(function (e) { console.error(e); });


I'm trying to print name tags on a 4" x 2.25" label in landscape mode (so it's wider than it is tall).  The above configuration gives me the entire contents of the label, but tucked in what looks to be the bottom left quadrant of the label.

Regarding your suggestion for strict CSS pixel sizing, I assume that I would want to make my table 1200px wide (4" wide label @ 300 dpi). However, when I add "style='width: 1200px;' to the table, then the rendered content is only about the left 1/3 of the label, again tucked in the bottom-left quadrant of the label.

Could you possible provide an example of printing an empty 4"x2.25" table (maybe with a border) to a Dymo printer?

Thanks,

Jonathan

Tres Finocchiaro

unread,
Mar 6, 2017, 10:39:36 AM3/6/17
to Jonathan Shay, qz-p...@googlegroups.com
> If I include the size parameters as you suggest, then a completely blank label is generated.

Ok.

> Could you possible provide the necessary parameters to get a tag to print at 300dpi, using the entire width (or a considerable portion thereof) of the label?

We have a labelwriter 450 and it is 600x300 dpi, we'll put together some test-cases for sending HTML to it.

-Tres 


On Mon, Mar 6, 2017 at 9:07 AM, Jonathan Shay <jonath...@gmail.com> wrote:
Tres-

If I include the size parameters as you suggest, then a completely blank label is generated.

Here's my current configuration:

var printerName = qzPrinters[7];
                    var options = {
                        orientation: 'landscape',

                        colorType: 'grayscale',
                        density: 300,
                        size: { width: 4, height: 2.25 },
                        units: 'in'
                    };

                    var config = qz.configs.create(printerName, options);
 
                    var html = "<!DOCTYPE html><html><body><div>" +

                                    "<table style='width: 1200px;'><tr><td><span style='font-size: 8pt;'>Class:</span><span style='font-size: 12pt;'> {classname}</span></td><td></td></tr><tr><td align='center' colspan='2' style='font-size: 26pt;'>{firstname}</td>" +

                                    "</tr><tr><td align='center' colspan='2' style='font-size: 18pt;'>{lastname}</td></tr><tr><td rowspan='2' style='font-size: 24pt;'>{allergies}</td><td><table><tr><td style='font-size: 8pt;'>Security Code:</td><td style='font-size: 24pt;'>{securitycode}</td>" +
                                    "</tr><tr><td style='font-size: 8pt;'>Bag Count:</td><td style='font-size: 24pt;'>{bagcount}</td></tr></table></td></tr></table>" +
                                "</div></body></html>";
 
                    var data = [{
                        type: 'html',
                        format: 'plain',
                        data: html,
                        options: { pageWidth: 4, pageHeight: 2.25, units: 'in' }
                    }];
 
                    qz.print(config, data).catch(function (e) { console.error(e); });

Could you possible provide the necessary parameters to get a tag to print at 300dpi, using the entire width (or a considerable portion thereof) of the label?

Thanks,

Jonathan Shay
PowerChurch Software
Lite Finocchiaro
unread,
Mar 8, 2017, 4:26:30 PM3/8/17
to Tres Finocchiaro, Jonathan Shay, qz-print
Jonathan:

I'm working with a Dymo Labelwriter 450 Turbo to create some sample code for you.

My first step is to test the label printer with our stock HTML sample (from demo/sample.html), as the hardware is new to me, and I need a baseline to start from.

Using Windows 10 and the Dymo driver with QZ-Tray 2.0.3, I only got half of the label to print (specifially, the "top" half in landscape, or left half in portrait).

Upon further investigation, I found that the driver defaulted to "address label" size, which is only one inch wide by three inches wide.

I changed to paper size (Control Panel> Printers> Dymo > right click, Printing Preferences > Advanced ) "30364 Name Badge Label"

This resulted in a more desirable result, but landscape mode still seemed to cut a small portion off of the left/landscape or top/portrait portion of the image.

I then tried using the driver to change the orientation to landscape and left QZ-Tray orientation at 'default'.

Using 'grayscale' improved the overall quality of the print job and unchecking 'scale Content' and checking 'size': 2.25" wide 4" high has provided an acceptable result for this trial, in my humble opinion. Image attached.

My next step is to create a basic html table that will overflow the bounds of the printable area to see if any discrepancies remain. I will follow-up with my findings.

Kind regards,
IMG_20170308_162534681.jpg
Lite Finocchiaro
unread,
Mar 24, 2017, 4:48:55 PM3/24/17
to Jonathan Shay, qz-print
Jonathan:

I'm afraid I'm still having problems with HTML and the DYMO 450 Turbo in Windows. I created an html table to overflow the printable area of the labels, but I was not able to fill the label. This differs from my experience with my other label printer, a Zebra LP-2844-Z, and my Brother HL-L2380DW (a laser printer intended for use with A4, Letter, and the like paper sizes).

I will work tomorrow to fill the label with our image logic first, then do a side-by-side comparison with the HTML logic to see what the difference is and update you in this thread.  Thanks again for notifying us of this behavior.

Kind regards,

Lite

On Wed, Mar 1, 2017 at 2:11 PM,  <jonath...@gmail.com> wrote:
Tres Finocchiaro
unread,
Jul 6, 2017, 1:31:50 PM7/6/17
to Lite Finocchiaro, Jonathan Shay, qz-print
Jonathan,

Sorry for the delay in response, but here's the best explanation of how to get the label to fit.


The effort involves rendering to pageWidth using a standard web browser, and using those as values to seed the end-result.

It's a bit of work to get right, but should yield the correct results.

-Tres

Reply all
Reply to author
Forward
0 new messages