Chương 9-Bài 13. Xây dựng chức năng xuất biểu mẫu và In ấn trực tiếp trên web

Tác giả: Dương Nguyễn Phú Cường
Số phút học: 132 phút

Ngày đăng: 24/10/2025, 12:51

Lượt xem: 626

Thực hiện chức năng xuất biểu mẫu và In ấn trực tiếp trên web Danh sách sản phẩm (print)

Step 1: cài đặt các thư viện CSS

Cài đặt thư viện CSS để chuẩn hóa các lề, padding, margin khi in

Ta sẽ sử dụng thư viện định dạng kích thước khổ giấy NormalizeCSS.
Trang chủ: https://github.com/necolas/normalize.css/
Download file normalize.min.css
Chép vào thư mục public/vendor/normalize

Cài đặt thư viện CSS để quy định kích thước khổ giấy khi in PaperCSS

Ta sẽ sử dụng thư viện định dạng kích thước khổ giấy ParerCSS.
Trang chủ: https://github.com/cognitom/paper-css
Download file paper.css hoặc paper.min.css
Chép vào thư mục public/vendor/paper-css

Tối ưu CSS khi xuất nhiều trang cùng lúc

Tạo file public/vendor/paper-css/custom-paper.css
Nội dung file

/* --- Hacking multi pages sheet --- */
.sheet {
    overflow: visible;
    height: auto !important;
}

.paper-toolbar {
    margin: auto;
    background: #0d8a05;
    padding: 5px;
    z-index: 999;
}

.paper-toolbar-top {
    position: fixed;
    top: 0;
    left: 0;
}

.paper-toolbar-bottom {
    position: fixed;
    bottom: 0;
    left: 0;
}

.paper-toolbar.paper-toolbar-A3 {
    width: 297mm;
}

.paper-toolbar.paper-toolbar-A3.landscape {
    width: 420mm;
}

.paper-toolbar.paper-toolbar-A4  {
    width: 210mm;
}

.paper-toolbar.paper-toolbar-A4.landscape  {
    width: 297mm;
}

.paper-toolbar.paper-toolbar-A5  {
    width: 148mm;
}

.paper-toolbar.paper-toolbar-A5.landscape  {
    width: 210mm;
}

.paper-toolbar.letter.sheet {
    width: 216mm;
}

.paper-toolbar.letter.landscape.sheet {
    width: 280mm;
}

.paper-toolbar.legal.sheet {
    width: 216mm;
}

.paper-toolbar.legal.landscape.sheet {
    width: 357mm;
}

@media print {
    .paper-show-when-print {
        display: block !important;
    }

    .paper-hide-when-print {
        display: none !important;
    }

    .no-print, .no-print *
    {
        display: none !important;
    }

    h2 { 
        page-break-before: always;
    }

    h3, h4 {
        page-break-after: avoid;
    }

    pre, blockquote {
        page-break-inside: avoid;
    }

    .page-break-inside-avoid {
        page-break-inside: avoid;
    }

    tbody {
        page-break-inside: avoid;
    }
    
    thead {
        display: table-header-group;
        margin-top: 100px;
    }

    table.report-container {
        page-break-after:always;
    }

    thead.report-header {
        display:table-header-group;
    }

    tfoot.report-footer {
        display:table-footer-group;
    } 
}

Step 2: tạo bố cục (layout) dành riêng cho các chức năng in ấn

Tạo cấu trúc folder layouts như sau:

views
---print
------layouts
---------paper.blade.php
------partials
---------paper-toolbar.blade.php

Nội dung file paper.blade.php

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>@yield('title')</title>

  <!-- Normalize or reset CSS with your favorite library -->
  <link rel="stylesheet" href="{{ asset('vendor/normalize/normalize.min.css') }}">

  <!-- Load paper.css for happy printing -->
  <link rel="stylesheet" href="{{ asset('vendor/paper-css/paper.min.css') }}">
  <link rel="stylesheet" href="{{ asset('vendor/paper-css/custom-paper.css') }}">

  <!-- Set page size here: A5, A4 or A3 -->
  <!-- Set also "landscape" if you need -->
  <style>@page { size: @yield('paper-size') }</style>

  @yield('custom-css')
</head>

<!-- Set "A5", "A4" or "A3" for class name -->
<!-- Set also "landscape" if you need -->
<body class="@yield('paper-class')">
  @include('print.partials.paper-toolbar')
  @yield('content')
</body>

</html>

Nội dung file paper-toolbar.blade.php

<section class="paper-toolbar paper-toolbar-top no-print">
    <form>
        <input type="button" value="In trang này" onClick="window.print()" />
    </form>

    @yield('paper-toolbar-top')
</section>

<section class="paper-toolbar paper-toolbar-bottom no-print">
    <form>
        <input type="button" value="In trang này" onClick="window.print()" />
    </form>

    @yield('paper-toolbar-bottom')
</section>

Mô hình hoạt động của print:

Step 1: tạo route xuất Biểu mẫu và In ấn Danh mục sản phẩm

Hiệu chỉnh file routes/web.php

Route::get('/admin/sanpham/print', 'Backend\SanPhamController@print')->name('admin.sanpham.print');

Step 2: tạo nút nhấn `In ấn` trên giao diện index:

Hiệu chỉnh file resources/views/backend/sanpham/index.blade.php

<!-- Tạo nút xem biểu mẫu khi in trên web
- Theo quy ước, các route đã được đăng ký trong file `web.php` đều phải được đặt tên để dễ dàng bảo trì code sau này.
- Đường dẫn URL là đường dẫn được tạo ra bằng route có tên `admin.sanpham.print`
- Sẽ có dạng http://tenmiencuaban.com/admin/sanpham/print
-->
<a href="{{ route('admin.sanpham.print') }}" class="btn btn-primary">In ấn</a>

Step 3: viết code action

Viết code cho action `print()`:

Action print() dùng để lấy danh sách sản phẩm có trong table sanpham và hiển thị ra màn hình với các định dạng CSS in ấn.

Hiệu chỉnh file `app/Http/Controllers/Backend/SanphamController.php`

/**
 * Action hiển thị biểu mẫu xem trước khi in trên Web
 */
public function print()
{
    $ds_sanpham = Sanpham::all();
    $ds_loai    = Loai::all();

    return view('backend.sanpham.print')
        ->with('danhsachsanpham', $ds_sanpham)
        ->with('danhsachloai', $ds_loai);
}

Tạo view `print.blade.php`

Để dễ dàng quản lý các view, ta sẽ tạo 1 thư mục tương ứng với tên Controller, mỗi action sẽ tương ứng với tên view.
Tạo folder resources/views/sanpham
Tạo file resources/views/sanpham/print.blade.php

@extends('print.layouts.paper')

@section('title')
Biểu mẫu Phiếu in danh sách sản phẩm
@endsection

@section('paper-size') A4 @endsection
@section('paper-class') A4 @endsection

@section('custom-css')
@endsection

@section('content')
<section class="sheet padding-10mm">
    <article>
        <table border="0" align="center">
            <tr>
                <td class="companyInfo" align="center">
                    Công ty TNHH Sunshine<br />
                    http://sunshine.com/<br />
                    (0292)3.888.999 # 01.222.888.999<br />
                    <img src="{{ asset('assets/storage/sunshine_wm64.png') }}" />
                </td>
            </tr>
        </table>
        <br />
        <br />
        <?php 
        $tongSoTrang = ceil(count($danhsachsanpham)/5);
        ?>
        <table border="1" align="center" cellpadding="5">
            <caption>Danh sách sản phẩm</caption>
            <tr>
                <th colspan="6" align="center">Trang 1 / {{ $tongSoTrang }}</th>
            </tr>
            <tr>
                <th>STT</th>
                <th>Hình sản phẩm</th>
                <th>Tên sản phẩm</th>
                <th>Giá gốc</th>
                <th>Giá bán</th>
                <th>Loại sản phẩm</th>
            </tr>
            @foreach ($danhsachsanpham as $sp)
            <tr>
                <td align="center">{{ $loop->index + 1 }}</td>
                <td align="center">
                    <img class="hinhSanPham" src="{{ asset('assets/storage/photos/' . $sp->sp_hinh) }}" />
                </td>
                <td align="left">{{ $sp->sp_ten }}</td>
                <td align="right">{{ $sp->sp_giaGoc }}</td>
                <td align="right">{{ $sp->sp_giaBan }}</td>
                @foreach ($danhsachloai as $l)
                @if ($sp->l_ma == $l->l_ma)
                <td align="left">{{ $l->l_ten }}</td>
                @endif
                @endforeach
            </tr>
            @if (($loop->index + 1) % 5 == 0)
        </table>
        <div class="page-break"></div>
        <table border="1" align="center" cellpadding="5">
            <tr>
                <th colspan="6" align="center">Trang {{ 1 + floor(($loop->index + 1) / 5) }} / {{ $tongSoTrang }}</th>
            </tr>
            <tr>
                <th>STT</th>
                <th>Hình sản phẩm</th>
                <th>Tên sản phẩm</th>
                <th>Giá gốc</th>
                <th>Giá bán</th>
                <th>Loại sản phẩm</th>
            </tr>
            @endif
            @endforeach
        </table>
    </article>
</section>
@endsection

Về trang chủ Về Chương trình học

Bài học trước Bài học tiếp theo

Ủng hộ tác giả

Bình luận

Bình luận của bạn

Vui lòng đăng nhập để gởi bình luận!

Đăng nhập

Danh sách bình luận

Chưa có bình luận nào!

Chương 9-Bài 13. Xây dựng chức năng xuất biểu mẫu và In ấn trực tiếp trên web

Thực hiện chức năng xuất biểu mẫu và In ấn trực tiếp trên web Danh sách sản phẩm (print)

Step 1: cài đặt các thư viện CSS

Cài đặt thư viện CSS để chuẩn hóa các lề, padding, margin khi in

Cài đặt thư viện CSS để quy định kích thước khổ giấy khi in PaperCSS

Step 2: tạo bố cục (layout) dành riêng cho các chức năng in ấn

Mô hình hoạt động của print:

Step 1: tạo route xuất Biểu mẫu và In ấn Danh mục sản phẩm

Step 2: tạo nút nhấn `In ấn` trên giao diện index:

Step 3: viết code action

Viết code cho action `print()`:

Hiệu chỉnh file `app/Http/Controllers/Backend/SanphamController.php`

Tạo view `print.blade.php`

Ủng hộ tác giả

Bình luận

Mục lục

Chương trình học

Menu Hướng dẫn Học tập

❤🧡💛💚💙💜 Học là phải THỰC HÀNH ❤🧡💛💚💙💜

Nền tảng các kiến thức học tập

CÁC CHÍNH SÁCH

Chương 9-Bài 13. Xây dựng chức năng xuất biểu mẫu và In ấn trực tiếp trên web

Thực hiện chức năng xuất biểu mẫu và In ấn trực tiếp trên web Danh sách sản phẩm (print)

Step 1: cài đặt các thư viện CSS

Cài đặt thư viện CSS để chuẩn hóa các lề, padding, margin khi in

Cài đặt thư viện CSS để quy định kích thước khổ giấy khi in PaperCSS

Step 2: tạo bố cục (layout) dành riêng cho các chức năng in ấn

Mô hình hoạt động của print:

Step 1: tạo route xuất Biểu mẫu và In ấn Danh mục sản phẩm

Step 2: tạo nút nhấn In ấn trên giao diện index:

Step 3: viết code action

Viết code cho action print():

Hiệu chỉnh file app/Http/Controllers/Backend/SanphamController.php

Tạo view print.blade.php

Ủng hộ tác giả

Bình luận

Mục lục

Chương trình học

Menu Tiện ích

Menu Hướng dẫn Học tập

❤🧡💛💚💙💜 Học là phải THỰC HÀNH ❤🧡💛💚💙💜

Nền tảng các kiến thức học tập

Step 2: tạo nút nhấn `In ấn` trên giao diện index:

Viết code cho action `print()`:

Hiệu chỉnh file `app/Http/Controllers/Backend/SanphamController.php`

Tạo view `print.blade.php`