[PHP/JS] Specifiek deel pagina printen

[Daantju]

Hallo! Ik zit met het volgende.

Ik heb een pagina gemaakt die automatisch een barcode genereert op basis van de laatste entry in de database. ($reparatieid). Dit gaat goed. De barcode is een PNG image die ik gecentreerd heb in een DIV op mijn paginatemplate.

Nu wil ik deze barcode printen op mijn labelprinter(Dymo labelwriter450), het liefst met 1 druk op een button. het probleem is, dat wanneer ik onclick:window.print gebruik de gehele pagina wordt geprint, terwijl ik dus echt alleen de barcode geprint wil hebben op het kleine labelstickertje.

Zit al dik een dag te zoeken, maar kom er nog niet uit. Iemand ervaringen hiermee?

[Voor 6% gewijzigd door Daantju op 29-11-2014 01:23]

[krvabo]

Css: http://stackoverflow.com/...rint-only-parts-of-a-page
JS: http://stackoverflow.com/...d-html-page-in-javascript

De JS-manier is basicly 'kopieer de content naar een popup, focus, print', en de css-manier is 'met een aparte print-stylesheet alles hiden behalve wat je wil printen'.

De CSS-manier is netter, maar de JS-manier minder foutgevoelig (edoch 'lelijker')

[Daantju]

Thanks!! Hmm, wordt er nog niet heel erg duidelijker van De JS manier lijkt me voor nu het beste, ben namelijk echt geen pro hierin.

Een popup openen lukt me, maar daarna de focus/print ben je me kwijt, hehe.

[P.O. Box]

dit is niet de manier...

je kunt het Dymo framework downloaden van de dymo site... dat is een JS file die je include op je pagina... vervolgens kun je van daaruit een vooraf gedefinieerd label afdrukken waarbij je variabele waarden kan zetten zoals bijvoorbeeld een barcode....

zie: http://developers.dymo.co...ry-samples-print-a-label/

[Daantju]

Oh thanks! Dit ziet er inderdaad goed uit, heeft er iemand ervaring met de implementatie? Ik kan bijvoorbeeld het bestand printlabel.js niet vinden, en ik heb geen label vanuit de Dymo software, maar vanuit een PHP addon.. Het wordt een afbeelding die ik op elke pagina weer kan geven via
<img src="/barcode/barcode.php"> Deze is dan ook direct variabel

[Voor 23% gewijzigd door Daantju op 29-11-2014 14:00]

[P.O. Box]

de implementatie is heel eenvoudig... printlabel.js heb je niet nodig... wel het framework: DYMOLabelFramework.js (zie link in vorige post).

vervolgens ontwerp je in de Dymo software een label (dat is vrij eenvoudig: je neemt jouw labelformaat en sleept daar een barcode op... uiteindelijk sla je het label op als een .label bestand... dit bestand kun je openen met een texteditor, dan zul je zien dat het simpel XML is:

XML:

<?xml version="1.0" encoding="utf-8"?>
<DieCutLabel Version="8.0" Units="twips">
    <PaperOrientation>Landscape</PaperOrientation>
    <Id>LargeAddress</Id>
    <PaperName>30321 Large Address</PaperName>
    <DrawCommands>
        <RoundRectangle X="0" Y="0" Width="2025" Height="5020" Rx="270" Ry="270" />
    </DrawCommands>
    <ObjectInfo>
        <BarcodeObject>
            <Name>STREEPJESCODE</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>
            <Text>12345</Text>
            <Type>Code39</Type>
            <Size>Small</Size>
            <TextPosition>Bottom</TextPosition>
            <TextFont Family="Arial" Size="8" Bold="False" Italic="False" Underline="False" Strikeout="False" />
            <CheckSumFont Family="Arial" Size="8" Bold="False" Italic="False" Underline="False" Strikeout="False" />
            <TextEmbedding>None</TextEmbedding>
            <ECLevel>0</ECLevel>
            <HorizontalAlignment>Center</HorizontalAlignment>
            <QuietZonesPadding Left="0" Top="0" Right="0" Bottom="0" />
        </BarcodeObject>
        <Bounds X="322" Y="135" Width="4463" Height="1620" />
    </ObjectInfo>
</DieCutLabel>

vervolgens kun je d.m.v. javascript de waardes zetten in je label en het label afdrukken (voorbeeld):

JavaScript:

    function printAddressLabel() {
        var labelXmlSTANDARD = '<?xml version="1.0" encoding="utf-8"?>.............[hier de xml van je label]';

        var labelEnvironment = dymo.label.framework.checkEnvironment();
        if (labelEnvironment.isFrameworkInstalled) {
            var labelSTANDARD = dymo.label.framework.openLabelXml(labelXmlSTANDARD);
            var labelsetSTANDARD = new dymo.label.framework.LabelSetBuilder();

            var record = labelsetSTANDARD.addRecord();
            record.setText("STREEPJESCODE", "[jouw streepjescode]");

            var printers = dymo.label.framework.getPrinters();
            if (printers.length == 0) {
                throw "Geen DYMO printer ge&iuml;nstalleerd. Installeer een DYMO printer.";
            }
            var printerName = "DYMO LabelWriter 450";
            for (var i = 0; i < printers.length; ++i) {
                var printer = printers[i];
                if (printer.printerType == "LabelWriterPrinter") {
                    printerName = printer.name;
                    break;
                }
            }

            labelSTANDARD.print(printerName, '', labelsetSTANDARD);
        }
    }

[Daantju]

Okay, duidelijk opzich! Maar dan moet ik op line 10 eigenlijk mijn afbeelding kwijt kunnen toch?

HTML:

<img src="/barcode/barcode.php">

Deze afbeelding bevat de barcode zelf, en is op basis van een ID en dus steeds verschillend.

Dan zou dat worden:
var record = labelsetSTANDARD.addRecord();
record.setText("STREEPJESCODE", "<img src="/barcode/barcode.php">");

right?

De code die de barcode genereert als plaatje:

PHP:

<?php

header('Content-Type: image/png');

//verbinding met de database maken
  $link = mysqli_connect("localhost","root","","dbnaam",330*);
if(!$link){
    exit;
}

//veld selecteren op laatste toegevoegd
$reparatieid = "SELECT reparatieid FROM reparatie ORDER BY toegevoegd DESC LIMIT 1";
$result = $link->query($reparatieid);

//Wanneer gelukt, geef laatst toegevoegd reparatieID weer.
if ($result->num_rows > 0) {
    while ($row = $result->fetch_assoc()) {
           
//Barcode files includen
require_once('class/BCGFontFile.php');
require_once('class/BCGColor.php');
require_once('class/BCGDrawing.php');

//Type barcode selecteren (Type 128)
require_once('class/BCGcode128.barcode.php');

//kleuren van de barcode en tekst
$colorFront = new BCGColor(0, 0, 0);
$colorBack = new BCGColor(255, 255, 255);

//barcode genereren
$code = new BCGcode128(); // Barcode type
$code->setScale(2); // Resolutie afbeelding
$code->setThickness(30); // Dikte van de lijnen
$code->setBackgroundColor($colorBack); // Kleur van de tussenruimte
$code->parse($row ["reparatieid"]); // Het ID

//Barcode weergeven als afbeelding
$drawing = new BCGDrawing('', $colorBack);
$drawing->setBarcode($code);
$drawing->draw();


$drawing->finish(BCGDrawing::IMG_FORMAT_PNG);

    }

 //Wanneer niet gelukt, geef "0 waarden" aan    
    }




?>

 

[Voor 65% gewijzigd door Daantju op 30-11-2014 10:31]

[NNF]

Volgens mij moet je dat zelfgebakken plaatje met die barcode gewoon vergeten en maakt de Dymo-software zélf een barcode aan de hand van text input. Oftewel, je moet op regel 10 het reparatie-ID uit de database hebben. Kun je ophalen met AJAX, of quick and dirty in de JS file echo'en

[Daantju]

Hmm, zo dus? PHP/JS wel door elkaar nu..

JavaScript:

var record = labelsetSTANDARD.addRecord();
            record.setText("STREEPJESCODE", "parse($row ["reparatieid"]);");

[NNF]

Kan Niet zoals het daar staat, maar dan zou je dus je JS file door PHP moeten laten parsen en op de plek waar dat nodig is, dat ID echo'en. Krijg je wel PHP en JS door elkaar heen en dat is niet echt mooi of fijn leesbaar.

Netter is het reparatie-ID ophalen en als parameter meegeven aan de functie printAddressLabel:

PHP:

//verbinding met de database maken
$link = mysqli_connect("localhost","root","","dbnaam",330*);

if(!$link) {
    exit;
}

//veld selecteren op laatste toegevoegd
$reparatieid = "SELECT reparatieid FROM reparatie ORDER BY toegevoegd DESC LIMIT 1";
$result = $link->query($reparatieid);

//Wanneer gelukt, geef laatst toegevoegd reparatieID weer.
if ($result->num_rows > 0) {
    $row = $result->fetch_assoc();
    echo $row['reparatieid'];
} else {
    echo 0;
}

JavaScript:

var barcodeRequest = new XMLHttpRequest();

function printAddressLabel(barcode) {
    var labelXmlSTANDARD = '<?xml version="1.0" encoding="utf-8"?>.............[hier de xml van je label]';

    var labelEnvironment = dymo.label.framework.checkEnvironment();
    if (labelEnvironment.isFrameworkInstalled) {
        var labelSTANDARD = dymo.label.framework.openLabelXml(labelXmlSTANDARD);
        var labelsetSTANDARD = new dymo.label.framework.LabelSetBuilder();

        var record = labelsetSTANDARD.addRecord();
        record.setText("STREEPJESCODE", barcode);

        var printers = dymo.label.framework.getPrinters();
        if (printers.length == 0) {
            throw "Geen DYMO printer ge&iuml;nstalleerd. Installeer een DYMO printer.";
        }
        var printerName = "DYMO LabelWriter 450";
        for (var i = 0; i < printers.length; ++i) {
            var printer = printers[i];
            if (printer.printerType == "LabelWriterPrinter") {
                printerName = printer.name;
                break;
            }
        }

        labelSTANDARD.print(printerName, '', labelsetSTANDARD);
    }
}

barcodeRequest.open('GET', 'barcode.php', true);

barcodeRequest.onload = function () {
    var response;
    if (barcodeRequest.status === 200) { // Succes!
        response = JSON.parse(barcodeRequest.responseText);
        if (response > 0) {
            printAddressLabel(response);
        } else {
            // barcode.php heeft geen record kunnen vinden in DB
        }
    } else {
        // Server gaf foutcode terug - afhandelen
    }
};

barcodeRequest.onerror = function() {
    // Fout opgetreden tijdens AJAX request; afhandelen
};

barcodeRequest.send();

[Voor 3% gewijzigd door NNF op 30-11-2014 17:42]

[Daantju]

Top ik ga het proberen! Moeten beide stukken code in dezelfde file, of verschillende ?

[P.O. Box]

de bovenste is je barcode.php de onderste het javascript op de pagina waar je vandaan moet printen...

overigens vind ik het wel vreemd dat je dat vraagt.. je hebt het immers voor elkaar gekregen een barcode image te genereren in php... dan verwacht ik toch nog wel een beetje basiskennis m.b.t. de hier geposte code

[Daantju]

Het is gelukt! Heel erg bedankt voor de hulp allemaal

Ik heb ook een nieuwe vraag, zal dat maar in hetzelfde topic doen.

Als er een reparatie wordt aangemaakt, moet deze worden gekoppeld aan een klant. Ik heb hiervoor een testbox(form) met daarnaast een knop "Bestaande klant". Als ik hierop klik wordt inderdaad een webpagina met klanten overzicht getoond. maar hoe zorg ik er nou voor, dat ik een klant kan selecteren zodat de textbox uit het formulier ook daadwerkelijk wordt gevuld? Liefst in PHP..

[NMe]

Dan zou ik eens beginnen met een nieuw topic over dat onderwerp waarin je je houdt aan De Quickstart en daarbij dus genoeg informatie geeft over wat je precies wil en waarom je dat zonder hulp niet lukt. Met je vraag in deze vorm is onderhand het enige geschikte antwoord dat we kunnen geven een compleet uitgewerkte testcase en daar is dit forum niet voor bedoeld.