This blog post will show how easy is to add label printing capabilities to your web application. This is possible because of the JavaScript library that is a part of new DYMO Label Framework.

Prerequisites

To be able to use the library DYMO Label software should be installed on the client machines. On Windows version 8.3 or later is required.  Version 8.3.1.1332 is available on http://download.dymo.com/download/Win/DLS8Setup.8.3.1.1332.exe On Mac version 8.2.2.1173 or later is required. Version 8.2.2.1173 is available on http://www.labelwriter.com/software/dls/mac/DLS8Setup.8.2.2.1173.dmg

The Sample

The complete sample is available on http://www.labelwriter.com/software/dls/sdk/samples/js/PrintLabel/PrintLabel.html

The code in the sample is in http://www.labelwriter.com/software/dls/sdk/samples/js/PrintLabel/PrintLabel.js

The sample is minimalistic. It just contains a text area element to specify a text to be printed on a label and a button that triggers printing.

DYMOLabelFramework.js

The first thing should be done for any web project that uses the Framework is to include the library’s code, so it is available for scripts on the page. It is done like this:

<script src="http://labelwriter.com/software/dls/sdk/js/DYMO.Label.Framework.latest.js"
        type="text/javascript" charset="UTF-8"> </script>

This will include the latest version of the library. The only other hosted version for now is http://labelwriter.com/software/dls/sdk/js/DYMO.Label.Framework.1.0.beta.js

In the future other versions will be available as well. It is OK to host the file on your own web-server.

Print a Label

All printing code is in the printButton.onclick event handler assigned in PrintLabel.js. The print task contains three major steps: specifying label layout to print, setting data to print, selecting printer to print on, and actual printing.

Specify Label Layout to Print

Before a label can be printed we should specify what is the label, what objects it contains, what are their positions, etc. It is done by “opening” a label. The easiest way is to put the xml string describing the label right into openLabelXml() function. The easiest way to obtain the xml is to design the label using DYMO Label software, saving it into a file, then pasting file content into the js code.

var labelXml = '
 <DieCutLabel Version="8.0" Units="twips">
 <PaperOrientation>Landscape</PaperOrientation>
 <Id>Address</Id>
 <PaperName>30252 Address</PaperName>
 <DrawCommands/>
 <ObjectInfo>
 <TextObject>
 <Name>Text</Name>
 <ForeColor Alpha="255" Red="0" Green="0" Blue="0" />
 <BackColor Alpha="0" Red="255" Green="255" Blue="255" />
 <LinkedObjectName></LinkedObjectName>
 <Rotation>Rotation0</Rotation>
 <IsMirrored>False</IsMirrored>
 <IsVariable>True</IsVariable>
 <HorizontalAlignment>Left</HorizontalAlignment>
 <VerticalAlignment>Middle</VerticalAlignment>
 <TextFitMode>ShrinkToFit</TextFitMode>
 <UseFullFontHeight>True</UseFullFontHeight>
 <Verticalized>False</Verticalized>
 <StyledText/>
 </TextObject>
 <Bounds X="332" Y="150" Width="4455" Height="1260" />
 </ObjectInfo>
 </DieCutLabel>';
var label = dymo.label.framework.openLabelXml(labelXml);

In a real web application you would probably load the label definition xml from the server using some AJAX library instead of specifying it directly in a js file.

Setting Data to Print

The next step is to specify data to print on the label. This is easy:

label.setObjectText("Text", textTextArea.value);

The code sets the content for the object named “Text” to whatever is typed in the text area field on the page. Note: the library supports setting formatted/styled text as well. This ability will be reviewed in a different blog post.

Selecting the Printer to Print on

The printer should be selected from a list of installed printers. For this sample we choose the first LabelWriter printer:

var printers = dymo.label.framework.getPrinters();
if (printers.length == 0)
    throw "No DYMO printers are installed. Install DYMO printers.";

var printerName = "";
for (var i = 0; i < printers.length; ++i)
{
    var printer = printers[i];
    if (printer.printerType == "LabelWriterPrinter")
    {
        printerName = printer.name;
        break;
    }
}

Actual Printing

If the printer name is known the printing is simple:

label.print(printerName);

Conclusion

As you can see, label printing is not hard if DYMO Label Framework is being used. The Framework has a lot of other useful features, like multiple label printing, specifying image data for a label, specifying text styles, etc. These features will be reviewed in later posts.