DYMO - Javascript voorbeeld uitprinten label (bestand)

Uit de Framework voorbeelden is een klein beetje te achterhalen hoe de “DYMO label framework” werkt, ik probeer het hier uit te leggen en te vereenvoudigen.

In dit specifieke voorbeeld kan je ook zelf een .label bestand inladen en uitprinten met een Javascript daarvoor heb je de jQuery bibliotheek nodig.

Je kan zelf labels maken in de DYMO software:

Wat heb je nodig?
1) DYMO label framework (javascript)
2) jQuery bibliotheek

Het index.html bestand laad de 3 Javascript bibliotheken in en bevat een knop om de label te printen:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Print een DYMO label</title>
<script src = "DYMO.Label.Framework.latest.js" type="text/javascript" charset="UTF-8"> </script>
<script src = "PrintLabel.js" type="text/javascript" charset="UTF-8"> </script>
<script src = "jquery-2.2.4.min.js" type="text/javascript" charset="UTF-8"> </script>
</head>

<body>
<h2>Print een DYMO label (vanuit bestand)</h2>

<div id="printDiv">
    <button id="printKnop">Print LABEL</button>
</div>

</body>
</html>

<html>

<head>

<title>Print een DYMO label</title>

</head>

<body>

<h2>Print een DYMO label (vanuit bestand)</h2>

<button id="printKnop">Print LABEL</button>

</div>

</body>

</html>

Hieronder vind je een .label bestand, noem deze “HalloWereld.label” ,met de volgende inhoud:

<?xml version="1.0" encoding="utf-8"?>
<DieCutLabel Version="8.0" Units="twips">
	<PaperOrientation>Landscape</PaperOrientation>
	<Id>WhiteNameBadge11356</Id>
	<IsOutlined>false</IsOutlined>
	<PaperName>11356 White Name Badge - virtual</PaperName>
	<DrawCommands>
		<RoundRectangle X="0" Y="0" Width="2340" Height="5040" Rx="270" Ry="270" />
	</DrawCommands>
	<ObjectInfo>
		<TextObject>
			<Name>TEKST</Name>
			<ForeColor Alpha="255" Red="0" Green="0" Blue="0" />
			<BackColor Alpha="0" Red="255" Green="255" Blue="255" />
			<LinkedObjectName />
			<Rotation>Rotation0</Rotation>
			<IsMirrored>False</IsMirrored>
			<IsVariable>False</IsVariable>
			<GroupID>-1</GroupID>
			<IsOutlined>False</IsOutlined>
			<HorizontalAlignment>Center</HorizontalAlignment>
			<VerticalAlignment>Middle</VerticalAlignment>
			<TextFitMode>ShrinkToFit</TextFitMode>
			<UseFullFontHeight>True</UseFullFontHeight>
			<Verticalized>False</Verticalized>
			<StyledText>
				<Element>
					<String xml:space="preserve">Hallo Wereld!</String>
					<Attributes>
						<Font Family="Arial" Size="28" Bold="True" Italic="False" Underline="False" Strikeout="False" />
						<ForeColor Alpha="255" Red="0" Green="0" Blue="0" HueScale="100" />
					</Attributes>
				</Element>
			</StyledText>
		</TextObject>
		<Bounds X="331.200012207031" Y="278" Width="4439.79998779297" Height="1800" />
	</ObjectInfo>
</DieCutLabel>

<?xml version="1.0" encoding="utf-8"?>

<PaperOrientation>Landscape</PaperOrientation>

<Id>WhiteNameBadge11356</Id>

<IsOutlined>false</IsOutlined>

<PaperName>11356 White Name Badge - virtual</PaperName>

</DrawCommands>

<Name>TEKST</Name>

<Rotation>Rotation0</Rotation>

<IsMirrored>False</IsMirrored>

<IsVariable>False</IsVariable>

<IsOutlined>False</IsOutlined>

<HorizontalAlignment>Center</HorizontalAlignment>

<VerticalAlignment>Middle</VerticalAlignment>

<TextFitMode>ShrinkToFit</TextFitMode>

<Verticalized>False</Verticalized>

<String xml:space="preserve">Hallo Wereld!</String>

</Attributes>

</Element>

</StyledText>

</TextObject>

</ObjectInfo>

</DieCutLabel>

Hieronder vind je een Javascript genaamd “PrintLabel.js” om de label te “in te laden“, en uit te printen, je kan het bestand aanpassen door de variabele “BestandTePrinten” aan te passen:

//----------------------------------------------------------------------------
//  DYMO Label Framework JavaScript Library Samples: Print label
//  Copyright (c), 2010, Sanford, L.P. All Rights Reserved.
//----------------------------------------------------------------------------

(function()
{
    // called when the document completly loaded
    function onload()
    {
		var BestandTePrinten = "HalloWereld.label"
		//var BestandTePrinten = "HalloWereld_grafisch.label"
		var labelXml;
        var printKnop = document.getElementById('printKnop');

        // prints the label
        printKnop.onclick = function()
        {
            try
            {
                // open label
				$.get(BestandTePrinten, function(labelXml){

                    var label = dymo.label.framework.openLabelXml(labelXml);

                    // select printer to print on
                    // for simplicity sake just use 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;
                        }
                    }

                    if (printerName == "")
						throw "No LabelWriter printers found. Install LabelWriter printer";

                    // finally print the label
                    label.print(printerName);
                });
            }
                catch(e)
            {
                alert(e.message || e);
            }
        }
    };

    // register onload event
    if (window.addEventListener)
        window.addEventListener("load", onload, false);
    else if (window.attachEvent)
        window.attachEvent("onload", onload);
    else
        window.onload = onload;

} ());

//----------------------------------------------------------------------------

// DYMO Label Framework JavaScript Library Samples: Print label

//----------------------------------------------------------------------------

(function()

{

// called when the document completly loaded

function onload()

{

var BestandTePrinten = "HalloWereld.label"

//var BestandTePrinten = "HalloWereld_grafisch.label"

var labelXml;

var printKnop = document.getElementById('printKnop');

// prints the label

printKnop.onclick = function()

{

try

{

// open label

$.get(BestandTePrinten, function(labelXml){

var label = dymo.label.framework.openLabelXml(labelXml);

// select printer to print on

// for simplicity sake just use 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;

}

if (printerName == "")

throw "No LabelWriter printers found. Install LabelWriter printer";

// finally print the label

label.print(printerName);

});

}

catch(e)

{

alert(e.message || e);

}

};

// register onload event

if (window.addEventListener)

window.addEventListener("load", onload, false);

else if (window.attachEvent)

window.attachEvent("onload", onload);

else

window.onload = onload;

} ());

Als je index.html in een browser opent en op de knop drukt wordt de label uitgeprint!

LET OP: Lokaal openen om te printen wil niet lukken, via een webserver wel! (iemand een oplossing?)

Hieronder is het pakketje in zijn geheel te downloaden.

Zoeken

DYMO – Javascript voorbeeld uitprinten label (bestand)