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 5 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 5 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

2670 Kontribusi 2132 Poin

Dipost 5 tahun yang lalu

Masih belum ketemu ni kak..

@rustendi

10 Kontribusi 3 Poin

Dipost 5 tahun yang lalu

Kelas Premium! Belajar bikin website dari nol sekarang

Membuat Barcode Dari Website Untuk Inventory

Kelas Premium!
Belajar bikin website dari nol sekarang