Отдельный стиль таблицы в режиме веб-страницы и в режиме браузера предварительного просмотра печати в Laravel Blade. ⇐ Php

[Anonymous]

Создайте условие из отчета в режиме печати с помощью Laravel Blade:

• В этом отчете используется альбомный размер F4 с полями 1 см. Не меняйте его.
• Цвета таблицы по-прежнему не совпадают на распечатанной странице. Стол на распечатанной странице сделайте белым. Отдельный зигзагообразный стиль таблицы цветов только для веб-страниц. Не увлекайтесь печатной страницей. (Уделяйте этой проблеме приоритетное внимание, поскольку я использую белый фон. Важное значение не решено.)
• В браузере печати CTRL + P стиль зигзагообразной таблицы цветов по-прежнему сохраняется.
• Таблица не заполняется полностью, пока поля бумаги не опускаются (отображаются неполные элементы) на одной напечатанной странице F4 в альбомной ориентации.
• URL-адрес на напечатанной странице имеет не заменяется на «Дичетак Пада» и размещается только в левом нижнем углу последней страницы, как и TTD.
• Подпись на последней странице правильная. Но он все еще «перезаписан» таблицей. Сделайте его пригодным для печати вместо URL-адреса на распечатанной странице, и подпись будет следовать за концом таблицы и обеспечивать аккуратные интервалы. Разместите его в правом нижнем углу таблицы (как и TTD в целом).
• Я предоставлю представление файлового кода, чтобы иметь возможность проанализировать его позже. Пожалуйста, предоставьте полный код изменений и подробные пояснения до и после, чтобы я мог понять.

Код: Выделить всё

@extends('layouts.app_niceadmin_blank')

@section('content')

/* Styling untuk tampilan layar */
.table th, .table td {
text-align: center;
vertical-align: middle;
}

/* Lebar kolom untuk kolom "No", "NISN", dan "Nama" */
.table th.no-col, .table td.no-col {
width: 60px;
}

.table th.nisn-col, .table td.nisn-col {
width: 100px;
}

.table th.nama-col, .table td.nama-col {
width: 250px;
}

.table th.month-col, .table td.month-col {
width: 90px;
padding: 4px;
}

/* Styling khusus untuk mode cetak */
@media print {
body {
margin: 0; /* Pastikan tidak ada margin pada body */
padding: 0; /* Pastikan tidak ada padding pada body */
font-size: 12pt;
color: black; /* Teks hitam */
}

.table {
border-collapse: collapse !important; /* Gabungkan border */
width: 100% !important; /* Pastikan tabel mengisi lebar penuh */
}

th, td {
border: 1px solid black !important; /* Border yang konsisten */
padding: 4px;
background-color: white !important; /* Sel berwarna putih */
color: black !important; /* Teks hitam */
}

tr {
background-color: white !important; /* Semua baris putih */
}

@page {
size: 33cm 21.5cm; /* Ukuran F4 landscape */
margin: 1cm; /* Margin 1 cm */
}

.signature {
position: absolute; /* Posisi absolute untuk fleksibilitas */
bottom: 2cm; /* Jarak dari bawah */
right: 1cm; /* Posisi di kanan */
text-align: right;
font-size: 12pt;
width: 300px;
}

.footer-note {
position: absolute; /* Posisi absolute */
bottom: 1cm; /* Posisi di kiri bawah */
left: 1cm;
font-size: 10pt;
width: auto;
}

body:after {
content: "Dicetak pada: " attr(data-print-date);
position: absolute;
bottom: 1cm;
left: 1cm;
font-size: 10pt;
display: none; /* Sembunyikan di halaman sebelumnya */
}

@page:last {
.signature {
display: block; /* Tampilkan tanda tangan di halaman terakhir */
}

.footer-note {
display: block; /* Tampilkan catatan di halaman terakhir */
}

body:after {
display: block; /* Tampilkan 'Dicetak pada' di halaman terakhir */
}
}
}





@include('kepala_sekolah.laporan_header')
[h4]LAPORAN REKAP PEMBAYARAN[/h4]
{!! $subtitle !!}




No
NISN
Nama
@foreach ($header as $bulan)

{{ ubahNamaBulan($bulan) }}

@endforeach



@php
$totalItems = 0; // Inisialisasi totalItems
@endphp
@forelse ($dataRekap as $item)

{{ ++$totalItems }} 
{{ $item['siswa']['nisn'] }}
{{ $item['siswa']['nama'] }}
@foreach ($item['dataTagihan'] as $itemTagihan)

@if ($itemTagihan['tanggal_lunas'] != '-')
{{ optional($itemTagihan['tanggal_lunas'])->format('d/m/y') }}
@else
-
@endif

@endforeach

@empty


Tidak ada data


@endforelse





@include('components.informasi_pj')



Dicetak pada: {{ \Carbon\Carbon::now()->format('d-m-Y H:i:s') }}







// Menambahkan data cetak tanggal ke body
document.body.setAttribute('data-print-date', new Date().toLocaleString());

@endsection

• Сохранять зигзагообразный макет таблицы цветов при отображении веб-страницы.
• Цвет таблицы на печатной странице — это все белый (в каждой ячейке нет пересекающихся цветов между белым и другими цветами).
• Таблица может заполнить всю печатную страницу F4 в альбомной ориентации.
• подпись следует за концом таблицы, оставляя достаточное расстояние, чтобы она была аккуратной. Даже если, например, на последней странице таблица занимает только половину листа, создайте возможность для подписи следовать за концом таблицы.
• Применяется «Дицетак пада». на последней странице, чтобы заменить URL.

Подробнее здесь: https://stackoverflow.com/questions/790 ... on-laravel