Jun 112010
 

An earlier post showed how simple is to add label printing capabilities into a web application by using DYMO Label Framework JavaScript Library. Now we will explore some advanced features. One such feature is generating a label preview. The complete sample is available on http://labelwriter.com/software/dls/sdk/samples/js/PreviewAndPrintLabel/PreviewAndPrintLabel.html; JavaScript code on http://labelwriter.com/software/dls/sdk/samples/js/PreviewAndPrintLabel/PreviewAndPrintLabel.js. The sample allows previewing an Address label loaded from the server. The content of the address can be edited in a TextArea element. The label preview is dynamically updated using data from the TextArea element. After the address is entered, the label can be printed on a printer selected from a list of available printers.

Loading the Label

Label layout information is stored using xml, so it is simple to operate it in the browser. The sample uses the jQuery library to load xml from the server though any other library can be used to do that. On the server the label is stored as a regular file “Address.label”.

function loadLabelFromWeb()
{
    // use jQuery API to load label
    $.get("Address.label", function(labelXml)
    {
        label = dymo.label.framework.openLabelXml(labelXml);
        // check that label has an address object
        if (label.getAddressObjectCount() == 0)
        {
            alert("Selected label does not have an address object on it. Select another label");
            return;
        }

        updatePreview();
        addressTextArea.value = getAddress();
        printButton.disabled = false;
        addressTextArea.disabled = false;
    }, "text");
}

After label xml is downloaded from the server it is “opened” and stored in label variable by calling dymo.label.framework.openLabelXml() function.

Generating Preview

After the label is loaded its preview is generated by calling render() method. render() method returns preview data as a base64-encoded png stream, so it can be used as a data url for <img>.

function updatePreview()
{
    if (!label)
        return;

    var pngData = label.render();

    var labelImage = document.getElementById('labelImage');
    labelImage.src = "data:image/png;base64," + pngData;
}

Please note that not all browsers support data urls, e.g. IE6 and IE7 do not support them at all, IE8 has a limitation of 32 Kb for an url, so not all labels can fit into this limit. But it is always possible to generate preview on the server if needed.

Getting Address Data

To initialize TextArea element with address information from the label the getAddressText() method can be used. Because we know/assume that our label has only one address object on it we address it as an object with index ‘0’.

function getAddress()
{
    if (!label || label.getAddressObjectCount() == 0)
        return "";

    return label.getAddressText(0);
}

Setting Address Data

To update the label with a new address entered in TextArea element. setAddressText() can be used.

function setAddress(address)
{
    if (!label || label.getAddressObjectCount() == 0)
        return;

    return label.setAddressText(0, address);
}

Printing

Printing is as simple as calling the print() method with the printer name selected from printers combo box.

label.print(printersSelect.value);

Summary

In this post we looked at how label previewing can be added into your web application. In the next post we will see how multiple labels can be printed.

  15 Responses to “DYMO Label Framework JavaScript Library Samples: Label Preview”

  1. I have used ee diff method, since I implemented it on sharepoint site as.
    Its a secure site so put the .js files in a doc lib and also the label layout.

    I added a small HTML webform part pointing to the script locations ( my.sharepoint.sitedoclibprintlabel.js )
    but loading the xml layout from the sharepoint site i used: ( thx to http://jibbering.com/2002/4/httprequest.html )

    var labelXml = false;
    var xmlhttp = false;
    /*@cc_on@*/
    /*@if (@_jscript_version >= 5)
    // JScript gives us Conditional compilation, we can cope with old IE versions.
    // and security blocked creation of the objects.
    try {
    xmlhttp = new ActiveXObject(“Msxml2.XMLHTTP”);
    } catch (e) {
    try {
    xmlhttp = new ActiveXObject(“Microsoft.XMLHTTP”);
    } catch (E) {
    xmlhttp = false;
    }
    }
    @end@*/
    if (!xmlhttp && typeof XMLHttpRequest != ‘undefined’) {
    try {
    xmlhttp = new XMLHttpRequest();
    } catch (e) {
    xmlhttp = false;
    }
    }
    if (!xmlhttp && window.createRequest) {
    try {
    xmlhttp = window.createRequest();
    } catch (e) {
    xmlhttp = false;
    }
    }

    xmlhttp.open(“GET”, “https://mysite/doclib/boxtype.label”, true);
    xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4) {

    // open label

    label = dymo.label.framework.openLabelXml(xmlhttp.responseText);

    etc..

    So all stuff is in sharepoint only nasty part is getting elementsbyID from a form..

    Anyway thx for the help here

  2. I cannot get the example (http://labelwriter.com/software/dls/sdk/samples/js/PreviewAndPrintLabel/PreviewAndPrintLabel.html) to work in IE9. it works fine in chrome. The current address input area is disabled (i can’t type anything in it), the preview label does not have the preview image, and the print button is not green.

    any ideas? i’m using 32bit ie9 on 64bit windows 7. i have dymo label v.8.3.1.14 installed as well as Dymo Label v.8 SDK installed (i got the installer from http://www.labelwriter.com/software/dls/win/DYMO_Label_v.8_SDK_Installer.exe).

  3. Hi All,
    I have realiesed that openLabelFile() method does not really (for me anyway, always errors in Chrome) but OpenLabelXml() works fine.. i have already created the labels using the DLS is there a way i could view them in XML format? so that i can just copy the xml and paste it in my in code?

  4. Hi Abe,
    I assume that your label file is in server side.
    If that is case you could change setting in your server to handle the file with extension for label file.
    Or you could do what you mentioned.

  5. Hi all,
    I’m trying to implement a simple label print mechanism using the above example but I can’t get it to work.
    The links work fine for my printer – it’s detected and prints the labels, but I’ve then tried to create a local version of the html file and this fails. There is no label and the printer isn’t detected.
    I know that it’s going to be all to do with my setup (or lack of) and as I’m new to this I wondered if anyone can point me in the right direction.
    My project involves printing labels with data from a SharePoint list. The javascript solution should work but I’m not even getting past the front door in my testing locally.
    Any pointers would help tremendously.

    Cheers,
    Paul

  6. We are using javascript to print on a LabelWriter 450 Turbo and all has been working fine. We just upgraded to Windows 10 64 bit and now cannot print using Edge, Firefox or Chrome browsers. We get the message “No DYMO printers are installed. Install DYMO printers.”. If we use the same code and IE11 all works perfect. What do we need to change to get this to work on both older and newer browsers?

  7. Preview and print label does not work on Chrome of Edge or Firefox. :(

  8. Still no answer to my June posting???
    I noticed in the js code of http://labelwriter.com/software/dls/sdk/js/DYMO.Label.Framework.latest.js that there is a reference to ActiveX controls and I assume that is why it does not work on Edge, Chrome and Firefox. Is there a more recent version of this javascript?

    • Hi David,

      Sorry, it looks like your issue was missed by our team. What version of DLS are you running on your machine? Have you tried running the latest version?

      Ron

  9. Hello Sir,

    I want to print custom html block of ticket design, how can I? Please Guide me.

    • Hi Dilip,

      Are you writing a custom app to do your printing or are you using DLS? What version of DLS are you using? What operating system are you running?

      Ron

 Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

(required)

(required)