首页 > 解决方案 > 使用 Dymo.Label.Framework 将 png 图像打印到 Dymo Labelwriter 450

问题描述

我正在尝试将 png 图像打印到我的 LabelWriter 450。

我尝试结合此处找到的 QR 示例(确实有效):QR 示例 和 Adam 对此处另一个问题的回答: png 示例

当我运行它并单击打印时,我没有收到任何错误,但没有任何反应。Chrome 控制台中没有 js 错误。

这就是我所拥有的:

HTML 文件:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <title>DYMO: Image-code</title> 
        <!-- JQuery -->
        <script src = "http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript" charset="UTF-8"> </script>
        <!-- Dymo Script -->
        <script src="DYMO.Label.Framework.3.0.js" type="text/javascript" charset="UTF-8"></script>
        <!-- Image Code -->
        <script src="ImageCode.js" type="text/javascript" charset="UTF-8"> </script>
        <!-- Bootstrap -->
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.cs"rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    </head>

<body>
    <div class="container">
        <div class="jumbotron">
        <h3>DYMO Label Framework JavaScript Library Samples: Image</h3> 
        <div class="header">
             <div id="sampleDesctiption">
                 <span>
                    Print a label with an image.
                 </span>
            </div>
        </div>
    </div>

    <div class="container">
        <div class="printControls">
            <div class="row">
                <div class="col-md-6">
                    <div id="printersDiv">
                        <label for="printersSelect">Printer:</label><br/>
                        <select class="form-control" id="printersSelect"></select>
                    </div>
                </div>
            </div>

            <div id="printDiv" style="padding-top:20px">
                <button class="btn btn-primary btn-lg" id="printButton">Print Image</button>
            </div>
        </div>
    </div>
</div>

JS 文件:

// stores loaded label info
var barcodeLabel;

// called when the document loaded
function onload() {
    var printersSelect = document.getElementById('printersSelect');
    var printButton = document.getElementById('printButton');



    // loads all supported printers into a combo box 
    function loadPrinters() {
        var printers = dymo.label.framework.getLabelWriterPrinters();
        if (printers.length == 0) {
            alert("No DYMO printers are installed. Install DYMO printers.");
            return;
        }
        console.log("got here: ", printers);

        for (var i = 0; i < printers.length; i++) {
            var printer = printers[i];

            var printerName = printer.name;

            var option = document.createElement('option');
            option.value = printerName;
            option.appendChild(document.createTextNode(printerName));
            printersSelect.appendChild(option);
        }
    }

    printButton.onclick = function() {
        var label_text = 'Code Text Here..';

        barcodeLabel.setObjectText('Image', label_text);

        // Should Be Printer Name, Dymo 450 Turbo..
        console.log("print: ", printersSelect.value);

        barcodeLabel.print(printersSelect.value);

    }

    function getImageLabelXml() {

        var labelXml = '<?xml version="1.0" encoding="utf-8"?>\
                     <DieCutLabel Version="8.0" Units="twips">\
                         <PaperOrientation>Landscape</PaperOrientation>\
                         <Id>LargeAddress</Id>\
                 <IsOutlined>false</IsOutlined>\
                         <PaperName>30321 Large Address</PaperName>\
                         <DrawCommands>\
                             <RoundRectangle X="0" Y="0" Width="2025" Height="5020" Rx="270" Ry="270" />\
                         </DrawCommands>\
                         <ObjectInfo>\
                             <ImageObject>\
                                 <Name>Image</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>False</IsVariable>\
                                 <ImageLocation/>\
                                 <ScaleMode>Uniform</ScaleMode>\
                                 <BorderWidth>0</BorderWidth>\
                                 <BorderColor Alpha="255" Red="0" Green="0" Blue="0" />\
                                 <HorizontalAlignment>Left</HorizontalAlignment>\
                                 <VerticalAlignment>Center</VerticalAlignment>\
                             </ImageObject>\
                             <Bounds X="322" Y="57.9999999999999" Width="4613" Height="1882" />\
                         </ObjectInfo>\
                     </DieCutLabel>';

        return labelXml;
    }



    function loadLabelFromWeb() {
        barcodeLabel = dymo.label.framework.openLabelXml(getImageLabelXml());
        // load image from url and store as Base64
        url = "https://upload.wikimedia.org/wikipedia/en/thumb/5/54/Billboard-music-awards-logo.png/200px-Billboard-music-awards-logo.png"
        barcodeLabel_image = dymo.label.framework.loadImageAsPngBase64(url);
        // overwrite image "Image" from XML label with loaded image
        barcodeLabel.setObjectText('Image', barcodeLabel_image);
    }

    // Load Labels 
    loadLabelFromWeb();

    // load printers list on startup
    loadPrinters();
    };

    dymo.label.framework.init(onload);

标签: javascriptprintingprinting-web-pagedymo

解决方案


推荐阅读