Xây dựng chức năng xuất biểu mẫu và In ấn trực tiếp trên web

Thiết kế web với framework Laravel

NenTang.vn

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	Ngày đăng: 3 năm trước

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ề Khóa học

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

Sản phẩm của Nền tảng