Export Labels to HTML

PrintJob.ExportToHtml() renders a ThermalLabel to an HTML document, in a file or in a Stream. Every label is rendered to an image (PNG by default) that is embedded in the HTML as a Base64 data URI, so the result is a single self-contained HTML file with no external resources. The HTML lays the labels out with CSS (one label after another, or in rows for multi-column labels and sheets of labels).

How Export to HTML works

The object in charge of the exportation is PrintJob. These are the overloads:

Method Output
ExportToHtml(string pathFile, double dpi, string title) File. Exports PrintJob.ThermalLabel.
ExportToHtml(string pathFile, ImageSettings imgSettings, double dpi, string title) File, with image settings.
ExportToHtml(ThermalLabel thermalLabel, string pathFile, double dpi, string title) File.
ExportToHtml(ThermalLabel thermalLabel, string pathFile, ImageSettings imgSettings, double dpi, string title) File, with image settings.
ExportToHtml(Stream stream, double dpi, string title) Stream. Exports PrintJob.ThermalLabel.
ExportToHtml(Stream stream, ImageSettings imgSettings, double dpi, string title) Stream, with image settings.
ExportToHtml(ThermalLabel thermalLabel, Stream stream, double dpi, string title) Stream.
ExportToHtml(ThermalLabel thermalLabel, Stream stream, ImageSettings imgSettings, double dpi, string title) Stream, with image settings.
Important

The title argument is required in every overload. Pass an empty string to get the BODY content only.

  • dpi is the resolution of the label images (values lower than 96 are raised to 96). The labels are displayed at their real size in inches whatever the dpi, so a higher value only makes the images sharper and the HTML larger. For HTML, 96 to 150 dpi is usually enough; the whole job (all the images and the Base64 text) is built in memory.
  • The output is written as UTF-8 (without BOM). With a stream, the stream is not rewound or closed.
  • Image format. By default the labels are PNG images with anti-aliasing. To change it, use the overloads with ImageSettings (see Export Labels to Image): Png, Jpeg and Svg can be displayed by any browser; Pcx is generated (MIME type image/vnd.zbrush.pcx) but browsers can't show it. The imgSettings argument can't be Nothing/null.
  • Scenarios. Counters, Data Masking, Data Binding, multi-column labels and sheets of labels work the same as in the image and PDF exports. Expressions are evaluated for every label, and the PrintJob.LabelProgress event is raised for every label (LabelImage contains the label image) and can cancel the export: the HTML file is written with the labels generated so far, and then a PrintJobCanceledException is thrown.

Full document or BODY content only

title Output
Not empty A complete HTML document: <!DOCTYPE html>, <head> with the <title>, a <style> block with the layout classes and the <body> with the labels. Each label is shown with a dotted outline on screen (not when printing).
Empty or whitespace Only the labels (<div> elements with inline styles), ready to be inserted into an existing page or e-mail. There is no outline.

When you insert the BODY content in your own page:

  • The labels are float:left boxes, so the container decides how many labels fit per row. Give the container a width, and overflow:auto (or add a clear:both element after it) so it contains the floats.
  • title is written as HTML. Encode it yourself (WebUtility.HtmlEncode) if it comes from user input.

Layout

The size of each label is the real label size in inches (ThermalLabel.Width and Height). The gaps of the media are translated to CSS margins:

  • ThermalLabel.LabelsHorizontalGapLength is the right margin of every label.
  • ThermalLabel.GapLength is the bottom margin of every label.
  • The page body is as wide as the labels of one row (LabelsPerRow), so with multi-column labels and sheets of labels the labels wrap in rows of LabelsPerRow.
Scenario Result
Single label One label. PrintJob.Copies is ignored.
Counters, Data Masking, Data Binding One label per generated label, in order. See Counters, Data Masking and Data Binding.
Multi-column labels Labels in rows of LabelsPerRow. With Copies > 1 and no DataSource, Copies labels are generated.
Sheet of labels (IsSheetOfLabels) The labels of each sheet in rows of LabelsPerRow, and a page break after every sheet (visible when printing).

For the other scenarios there are no page breaks: the browser paginates the labels when printing.

Labels to HTML samples

  • Example #1: The following code exports a single ThermalLabel object to a complete HTML document at 300 dpi.

VB

'Define a ThermalLabel object and set unit to inch and label size
Dim tLabel As New ThermalLabel(UnitType.Inch, 4, 3)
tLabel.GapLength = 0.2

'Define a TextItem object
Dim txtItem As New TextItem(0.2, 0.2, 1, 0.5, "Thermal Label Test")

'Define a BarcodeItem object
Dim bcItem As New BarcodeItem(0.2, 1, 2, 1, BarcodeSymbology.Code128, "ABC 12345")
'Set bars height to .75inch
bcItem.BarHeight = 0.75
'Set bars width to 0.0104inch
bcItem.BarWidth = 0.0104

'Add items to ThermalLabel object...
tLabel.Items.Add(txtItem)
tLabel.Items.Add(bcItem)

'Create a PrintJob object
Using pj As New PrintJob()
    'Save output to HTML (the 4th argument is the HTML title)...
    pj.ExportToHtml(tLabel, "c:\temp\myLabel.html", 300, "My Label")
End Using

CS

//Define a ThermalLabel object and set unit to inch and label size
ThermalLabel tLabel = new ThermalLabel(UnitType.Inch, 4, 3);
tLabel.GapLength = 0.2;

//Define a TextItem object
TextItem txtItem = new TextItem(0.2, 0.2, 1, 0.5, "Thermal Label Test");

//Define a BarcodeItem object
BarcodeItem bcItem = new BarcodeItem(0.2, 1, 2, 1, BarcodeSymbology.Code128, "ABC 12345");
//Set bars height to .75inch
bcItem.BarHeight = 0.75;
//Set bars width to 0.0104inch
bcItem.BarWidth = 0.0104;

//Add items to ThermalLabel object...
tLabel.Items.Add(txtItem);
tLabel.Items.Add(bcItem);

//Create a PrintJob object
using (PrintJob pj = new PrintJob())
{
    //Save output to HTML (the 4th argument is the HTML title)...
    pj.ExportToHtml(tLabel, @"c:\temp\myLabel.html", 300, "My Label");
}
  • Example #2: The following code exports a ThermalLabel object that uses Counters to an HTML file with 5 labels at 300 dpi. The text goes from This is a Counter: 0 to This is a Counter: 4 and the barcode from ABC 12345 to ABC 12349.

VB

'Define a ThermalLabel object and set unit to inch and label size
Dim tLabel As New ThermalLabel(UnitType.Inch, 4, 3)
tLabel.GapLength = 0.2

'Define a TextItem object
Dim txtItem As New TextItem(0.2, 0.2, 2, 0.5, "This is a Counter: 0")
'Set counter
txtItem.CounterStep = 1

'Define a BarcodeItem object
Dim bcItem As New BarcodeItem(0.2, 1, 2, 1, BarcodeSymbology.Code128, "ABC 12345")
'Set counter
bcItem.CounterStep = 1
'Set bars height to .75inch
bcItem.BarHeight = 0.75
'Set bars width to 0.0104inch
bcItem.BarWidth = 0.0104

'Add items to ThermalLabel object...
tLabel.Items.Add(txtItem)
tLabel.Items.Add(bcItem)

'Create a PrintJob object
Using pj As New PrintJob()
    'Set number of labels to generate
    pj.Copies = 5
    'Save output to HTML...
    pj.ExportToHtml(tLabel, "c:\temp\myLabels.html", 300, "My Labels")
End Using

CS

//Define a ThermalLabel object and set unit to inch and label size
ThermalLabel tLabel = new ThermalLabel(UnitType.Inch, 4, 3);
tLabel.GapLength = 0.2;

//Define a TextItem object
TextItem txtItem = new TextItem(0.2, 0.2, 2, 0.5, "This is a Counter: 0");
//Set counter
txtItem.CounterStep = 1;

//Define a BarcodeItem object
BarcodeItem bcItem = new BarcodeItem(0.2, 1, 2, 1, BarcodeSymbology.Code128, "ABC 12345");
//Set counter
bcItem.CounterStep = 1;
//Set bars height to .75inch
bcItem.BarHeight = 0.75;
//Set bars width to 0.0104inch
bcItem.BarWidth = 0.0104;

//Add items to ThermalLabel object...
tLabel.Items.Add(txtItem);
tLabel.Items.Add(bcItem);

//Create a PrintJob object
using (PrintJob pj = new PrintJob())
{
    //Set number of labels to generate
    pj.Copies = 5;
    //Save output to HTML...
    pj.ExportToHtml(tLabel, @"c:\temp\myLabels.html", 300, "My Labels");
}
  • Example #3: BODY content only (empty title) as a string, to insert in your own page, using SVG images.
using (PrintJob pj = new PrintJob())
using (var ms = new MemoryStream())
{
    pj.Copies = 5;

    // SVG labels (vector), anti-aliasing is not needed
    var imgSettings = new ImageSettings(ImageFormat.Svg);

    // empty title => BODY content only
    pj.ExportToHtml(tLabel, ms, imgSettings, 96, "");

    string labelsHtml = Encoding.UTF8.GetString(ms.ToArray());

    // wrap the floating labels in a container
    string page = "<div style=\"width:8.5in;overflow:auto\">" + labelsHtml + "</div>";
}

Common mistakes

  • Calling ExportToHtml with an empty title argument. Output will be the BODY content only.
  • Using Copies to repeat a plain single label. It is ignored; use Counters, a DataSource or Replicates.
  • Expecting several HTML files or a ZIP. There is always one HTML document.
  • Choosing PCX. Browsers can't display PCX images.
  • Using a very high dpi for large jobs. The result is not bigger on screen, only heavier: every label is embedded as Base64 text.
  • Inserting the BODY content in a narrow or unbounded container. The labels float: define the container width so you get the labels per row you expect.