如何使用CSS控制打印时的页眉和页脚显示

mqkwyuun 于 2024-01-09 发布在其他

关注(0)|答案(2)|浏览(126)

我想在每一页上自定义我的页眉和页脚，在某些情况下，我想在print.window（）函数中只在第一页上显示页眉。我使用了size：auto; margin：0.5mm;但它只禁用了打印显示窗口中的页眉和页脚选项。对于此代码，我如何实现这一点：

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

字符串
我也试着设置页眉和页脚显示为无，但它也不工作。

css

来源：https://stackoverflow.com/questions/77735009/how-to-control-header-and-footer-display-on-print-using-css

2条答案

按热度按时间

t9eec4r01#

你可以在CSS中使用@media print查询。
https://sympli.io/blog/a-quick-guide-to-css-for-printable-webpages

赞(0）回复(0）举报 2024-01-09

t5fffqht2#

我在下面添加了打印CSS指南，以便更好地理解工作：

<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';
}

型

赞(0）回复(0）举报 2024-01-09

我来回答

如何使用CSS控制打印时的页眉和页脚显示

2条答案

相关问题

热门标签

最新问答