Html Question posted in
Some basic documentation can be found here.

Html – How to control header and footer display on print using CSS

I want to customize my header and footer on each page, and in some cases I want to display the header only on first page on print.window() function. I used size: auto; margin: 0.5mm;
but it only disables the header and footer option form the print display window.
For this code how can I achieve that:

<!doctype html>
<html lang="en" dir="ltr">

<head>
    
    @include('layouts.styles')
   
    <script>
        const Print = () => {
            let printButton = document.getElementById("printPage");
            printButton.style.visibility = 'hidden';
            window.print();
            printButton.style.visibility = 'visible';
        }
    </script>

</head>
<body class="d-flex justify-content-center align-content-center p-6  flex-column gap-3 mt-3 bg-white">
<header class="d-flex justify-content-evenly align-items-center header">
    <img class="bg-transparent" src="{{ asset('assets/images/media/DAIA.png') }}" style="height: 120px; width: 180px"
         alt="">

    <p class="text-center fs-5 fw-bold align-self-center m-0">د افغانستان اسلامی امارت<br/>د عامی روغتیا وزارت <br/> د
        مالی او حسابی چارو معینیت <br/> د اداری ریاست <br/> د بیومدیکل انجنیری دیپارتمنت آمریت</p>

    <img class="bg-transparent" src="{{ asset('assets/images/media/MoPH.jpeg') }}" style="height: 110px; width: 160px"
         alt="">

</header>
<main>
    <div class=" d-flex justify-content-evenly mt-6 fs-6 fw-bold">

        <p>تاریخ بررسی: {{ $data['master']['assessment_date'] }}</p>
        <p>تمبر مکتوب: {{ $data['master']['maktoob_no'] }}</p>
        <p>تاریخ مکتوب: {{ $data['master']['maktoob_date'] }}</p>
        <p>{{ $data['master']['hospitals']['en_name'] }} :اسم شفاخانه </p>
    </div>


    <div class="table-responsive">
        <table class="table border fc-direction-rtl text-nowrap text-md-nowrap  mb-0" style="background-color: white">


            <thead>
            <tr class="fw-bold">
                <th>#</th>
                <th class="fw-bold">اسم ماشین</th>
                <th class="fw-bold">سریال نمبر</th>

                <th class="fw-bold">تگ نمبر</th>
                <th class="fw-bold">تاریخ تولید</th>
                <th class="fw-bold">تاریخ انقضا</th>
                <th class="fw-bold">حالت</th>
                <th class="fw-bold">مفدار</th>
                <th class="fw-bold">قیمت</th>
                <th class="fw-bold">مجموع</th>
                <th class="fw-bold">توضیحات</th>

            </tr>

            </thead>
            <tbody>
            <tr>
                @foreach($data['details'] as $index=>$dataItem)

                    <td class="align-middle">{{ $index+1  }}</td>
                    <td class="align-middle">{{ $dataItem['machinery']['en_name']  }}</td>
                    <td class="align-middle">{{ $dataItem['serial_no']  }}</td>
                    <td class="align-middle">{{ $dataItem['tag_no']  }}</td>
                    <td class="align-middle">{{ $dataItem['mfg_date']  }}</td>
                    <td class="align-middle">{{ $dataItem['exp_date']  }}</td>
                    <td class="align-middle">{{ $dataItem['machine_status_id']}}</td>
                    <td class="align-middle">{{ $dataItem['qnt'] }}</td>
                    <td class="align-middle">{{ $dataItem['price'] }}</td>
                    <td class="align-middle">{{ $dataItem['total'] }}</td>
                    <td class="align-middle">{{ $dataItem['description'] }}</td>

            </tr>
            @endforeach
            </tbody>
        </table>


    </div>
    </main>
    <footer class="d-flex justify-content-end footer">
        <p>ملاحظات</p>
    </footer>
    <button type="button" id="printPage" onclick="Print()" class="d-block mx-auto btn btn- 
       primary btn-lg col-2">Print
    </button>
    </body>

    </html>

I also tried to set header and footer display to none, but it didn’t work too.

Tags:

2

Answers


  2. 0

    I have added below Print CSS guidelines for better understanding for working:

    <style>
  @media print {
    body {
      margin: 0; /* Reset default margin for printing */
    }

    header, footer {
      display: none; /* Hide header and footer by default */
    }

    header:first-page, footer:first-page {
      display: block; /* Display header and footer on the first page */
    }

    main {
      page-break-before: always; /* Ensure content starts on a new page */
    }
  }
</style>

    JS:

    const Print = () => {
  let printButton = document.getElementById("printPage");
  printButton.style.visibility = 'hidden';
  // Remove the following line, as the CSS rules will handle the printing
  // window.print();
  printButton.style.visibility = 'visible';
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search