Membuat Barcode Dari Website Untuk Inventory

Bagaimana caranya agar hasil print sesuai dengan area print, jadi tidak 1 page diproses. Yang terjadi sekarang ketika diprint kluar terus lebih dari kertas thermal.

hasilnya :

berikut codingan setelah ada tambahan.

<?php
    include "../conn/inc_conn_mysqli.php";
    $id             = $_GET['id'];
?>

<!DOCTYPE html>
<html>

    <style type="text/css" media="print">
        @page{
            size: auto;
            margin:0mm;
        }
       /* @page {
           width    : 4.00in;
           height   : 6.01in;
           margin   : 0mm;
        }*/
       @media print {
          html, body {
            width: 100mm;
            height: 10mm;
          }
    </style>

    <head>

        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <title>LOGISTIC DEPARTMENT</title>

        <link href="../css/bootstrap.min.css" rel="stylesheet">
        <link href="../font-awesome/css/font-awesome.css" rel="stylesheet">
        <link href="../css/animate.css" rel="stylesheet">
        <link href="../css/style.css" rel="stylesheet">

        <script src="../js/jquery-2.1.1.js"></script>


        <link rel="stylesheet" type="text/css" href="print.css" media="print">
        <link rel="shortcut icon" href="../img/pickup_van.png">
    </head>
    <body class="white-bg">
        <page size="A4">
            <div class="">
                <div class="ibox-content p-xl">
                    <div class="row">
                        <div class="col-md-12 col-lg-12 col-sm-12 col-xs-12">
                            <div class="form-group">
                                <div id="printable">
                                    <h4 style="margin-bottom: 0; z-index: 999; position: absolute;">                          Test || <?php echo $id; ?></h4>
                                                            <img style="margin-top : 10px; background: none; padding: 0;" src="../barcode.php?f=svg&s=code-128&pl=0&pr=0&d=<?php echo $id; ?>&sx=1&h=60" alt="">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </page>
        <script type="text/javascript">
            jQuery(document).ready(function($) {
                printBarCode();
            });

            function printBarCode(){
                //hide elements
                var allEl = document.body.getElementsByTagName("*")
                for(var i=0; i<allEl.length; i++) {
                    allEl[i].style.display = "none";
                }

                //pilih elemen yang mau diprint
                document.getElementById('printable').style.setProperty("display", "block", "important")
                window.print();
            }

        </script>
    </body>

</html>

Saya menggunakan printer TSC 244 Pro, memakai ribbon dan kertas thermal ukuran 2cm x 6cm. Mohon pencerahannya para mastah.

css javascript html

@rustendi

10 Kontribusi 3 Poin

Diperbarui 6 tahun yang lalu

Tanggapan

coba bikin judul pertanyaan lebih jelas, deskripsikan juga dengan baik apa yang dibuat, terakhir gambarnya diperhatikan

@hilmanski

terima kasih sudah diperbaiki, maksud keluarnya apa ya? terpotong barcodenya?

@hilmanski

3 Jawaban:

jadi yang kosongnya ikut ke proses. keluar dulu beberapa lebel, baru nyetak yang bagian atas.

@rustendi

10 Kontribusi 3 Poin

Dipost 6 tahun yang lalu

Tanggapan

update gambarnya di "edit pertanyaan ya mas" biar rapi, jangan jadi jawaban, jawaban khusus untuk menjawab, terimakasih

@hilmanski

Saya tidak tahu tampilan html kamu saat diprint seperti apa, beberapa hal yang bisa dicoba

Untuk memperbaiki yang pertama bisa coba menambahkan media di tag link <pre> <link rel="stylesheet" type="text/css" href="print.css" media="print"> </pre>

kedua, idenya sembunyikan semua halamann kecuali bagian yang mau diprint, contoh

<pre> <body> <h1>Print</h1> <h2>Tolong diprint</h2> <div id="printable"> Ini aja yang mau diprint </div>

    &amp;lt;button type=&quot;button&quot; name=&quot;button&quot; onclick=&quot;printBarCode()&quot;&amp;gt;Print&amp;lt;/button&amp;gt;

    &amp;lt;script type=&quot;text/javascript&quot;&amp;gt;

    function printBarCode(){
        //hide elements
        var allEl = document.body.getElementsByTagName(&quot;*&quot;)
        for(var i=0; i&amp;lt;allEl.length; i++) {
            allEl[i].style.display = &quot;none&quot;;
        }

        //pilih elemen yang mau diprint
        document.getElementById(&#039;printable&#039;).style.setProperty(&quot;display&quot;, &quot;block&quot;, &quot;important&quot;)
        window.print();
    }

    &amp;lt;/script&amp;gt;

&amp;lt;/body&amp;gt;

</pre>

cara ketiga, coba mengatur ukuran htmlnya

<pre> @media print { html, body { width: 100mm; height: 100mm; } </pre>

@hilmanski

2699 Kontribusi 2140 Poin

Dipost 6 tahun yang lalu

Masih belum ketemu ni kak..

@rustendi

10 Kontribusi 3 Poin

Dipost 6 tahun yang lalu

Kelas Premium! Belajar bikin website dari nol sekarang

Kelas Premium! Belajar Javascript untuk website

Membuat Barcode Dari Website Untuk Inventory

Kelas Premium!
Belajar bikin website dari nol sekarang

Kelas Premium!
Belajar Javascript untuk website