• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Google Tabellen Druckerbereich mit CSS oder HTML definieren/einstellen

K

kaysiebke

Mitglied
Guten Tag und schon mal fielen dank an alle die helfen!

Ich habe ein kleines Problem bzw. ich weiß nicht wie ich für den HTML-Print befehle
den Druckerbereich festlegen kann, den ich möchte, nur die Zellen B3 bis D6 mit einem benutzerdefinierten Druckerformat von 3,5 cm (Höhe),10 cm (Breite) als Etikett Format ausdrucken.

Denn leider wird von meinen Kollegen allzu oft die Druckereinstellung zerschossen, weshalb ich diesen Bereich gerne voreinstellen bzw. automatisieren möchte, so das keine Einstellungen mehr vorgenommen werden müssen
Bildschirmfoto vom 2024-07-19 09-52-59.png
 
Guten Tag,

um einen bestimmten Bereich mit benutzerdefinierten Druckerformaten automatisch zu drucken, können Sie HTML, CSS und JavaScript verwenden. Erstellen Sie eine HTML-Datei, die den Bereich in einem div-Container umschließt und durch CSS-Anweisungen für den Druck konfiguriert. Fügen Sie einen Button hinzu, um den Druckvorgang zu starten.

Hier ein Beispiel:

Code: 
<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <title>Etikettendruck</title>
    <style>
        @media print {
            body * {
                visibility: hidden;
            }
            #printableArea, #printableArea * {
                visibility: visible;
            }
            #printableArea {
                position: absolute;
                left: 0;
                top: 0;
                width: 10cm;
                height: 3.5cm;
            }
        }
    </style>
</head>
<body>
    <div id="printableArea">
        <!-- Ihr Tabelleninhalt -->
        <table>
            <tr>
                <td>B3</td><td>C3</td><td>D3</td>
            </tr>
            <tr>
                <td>B4</td><td>C4</td><td>D4</td>
            </tr>
            <tr>
                <td>B5</td><td>C5</td><td>D5</td>
            </tr>
            <tr>
                <td>B6</td><td>C6</td><td>D6</td>
            </tr>
        </table>
    </div>
    <button onclick="window.print();">Drucken</button>
</body>
</html>

Jack
 
Zuletzt bearbeitet von einem Moderator:
JackKingsworth schrieb:
Guten Tag,

um einen bestimmten Bereich mit benutzerdefinierten Druckerformaten automatisch zu drucken, können Sie HTML, CSS und JavaScript verwenden. Erstellen Sie eine HTML-Datei, die den Bereich in einem div-Container umschließt und durch CSS-Anweisungen für den Druck konfiguriert. Fügen Sie einen Button hinzu, um den Druckvorgang zu starten.

Hier ein Beispiel:

Code: 
<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <title>Etikettendruck</title>
    <style>
        @media print {
            body * {
                visibility: hidden;
            }
            #printableArea, #printableArea * {
                visibility: visible;
            }
            #printableArea {
                position: absolute;
                left: 0;
                top: 0;
                width: 10cm;
                height: 3.5cm;
            }
        }
    </style>
</head>
<body>
    <div id="printableArea">
        <!-- Ihr Tabelleninhalt -->
        <table>
            <tr>
                <td>B3</td><td>C3</td><td>D3</td>
            </tr>
            <tr>
                <td>B4</td><td>C4</td><td>D4</td>
            </tr>
            <tr>
                <td>B5</td><td>C5</td><td>D5</td>
            </tr>
            <tr>
                <td>B6</td><td>C6</td><td>D6</td>
            </tr>
        </table>
    </div>
    <button onclick="window.print();">Drucken</button>
</body>
</html>

Jack ;)
Zum Vergrößern anklicken....
Danke für Ihre Hilfe.Sobalt ich Zeit habe werde ich mich ihrer Vorlage annehmen und testen
 
Danke erstmal für Ihre Hilfe.
Aber sorry, wen ich blöd frage, aber wie stelle ich es an mit dem Erstellen des Buttons in meiner Ziele HTML Datei. Da ich neu bin in diesem metje bin ich leider noch Anfänger

Datei Name: Box do wpisywania.html
HTML: 
<!DOCTYPE html>
<html>

<head>
    <base target="_top">
    <style>
        body {
        background: #CE0000;
        background: -webkit-linear-gradient(0deg, #CE0000 10%, #A45C4C 50%, #FFFFFF 100%);
        font-family: Arial, Arial;
        margin: 0px;
        padding: 10px;
        }
        form {
        background-color: #fff;
        width: 260px;
        padding: 10px;
        border-radius: 20px;
        box-shadow: 0px 0px rgba(1,2,0.1);
        margin
        width:auto !important;
        }
        label {
        font-weight: bold;
        text-transform: uppercase;
        }
        input[type="search"] {
        width: 250px;
        padding: 15px;
        height: 50px;
        margin-bottom: 15px;
        border: 1px outset #FF0000;
        border-radius: 7px;
        font-size: 15pt;
        box-sizing: border-box;
        }
        input[type="button"] {
        display: block;
        margin: 0 auto 7px auto;
        cursor: pointer;
        width: 120px;
        padding: 15px 2px;
        background-color: #FF0000;
        color: white;
        text-transform: uppercase;
        font-weight: bold;
        text-align: center;
        text-decoration: none;
        border: 1px solid #FF0000;
        border-radius: 7px;
        transition: background 0.2s ease-out;
        }
        input[type="button1"] {
        display: block;
        margin: 0 auto 7px auto;
        cursor: pointer;
        width: 240px;
        padding: 15px 2px;
        background-color: #FF0000;
        color: white;
        text-transform: uppercase;
        font-weight: bold;
        text-align: center;
        text-decoration: none;
        border: 1px solid #FF0000;
        border-radius: 7px;
        transition: background 0.2s ease-out;
        }
        input[type="button1"]:hover {
        background-color: #19911b;
        }
        input[type="button"]:hover {
        background-color: #19911b;
        }
      
    </style>
  
</head>

<body>
    <form id="itemForm"autocomplete="off">
        <label for="sku">SKU:</label>
        <br>
        <input type="search" id="sku" name="sku">
        <br>
        <label for="description">Description:</label>
        <br>
        <input type="search" id="description" name="description">
        <br>
        <label for="color">Color:</label>
        <br>
        <input type="search" id="color" name="color">
        <br>
        <label for="size">Size:</label>
        <br>
        <input type="search" id="size" name="size">
        <br>
        <input type="button1" value="Drucken" onclick="Etikettendruck.html()">
        <br>
        <div style="display: flex">
            <input type="button" value="Submit" onclick="submitForm()">
            <input type="button" value="Reset" onclick="form.reset()">
          
        </div>
    </form>
  
    <script>
        function submitForm() {
        var form = document.getElementById('itemForm');
        var formData = {
        'sku': form.sku.value,
        'color': form.color.value,
        'size': form.size.value,
        'description': form.description.value
         };
        google.script.run.processForm(formData);
        form.reset()
        }
    </script>
</body>
 
Dies:
Code: 
<input type="button1" value="Drucken" onclick="Etikettendruck.html()">
kann nicht funktionieren, denn in einem onclick kann nur Javascript ausgeführt werden. Was Du machen kannst, ist, den Druck durch Öffnen des Druckdialoges zu beginnen, indem Du die Funktion print aufrufst:
Code: 
<input type="button" value="Drucken" onclick="print()">
Außerdem gibt es keinen Typ "button1".

Das löst jedoch nicht dein Hauptproblem, denn Du möchtest ja die Voreinstellungen für den Druck, Seitengröße, keine Ränder etc. automatisch machen. Und dafür habe ich, wie schon geschrieben, keine Lösung gefunden.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben