Thiết kế html report

* Bài viết cùng nhóm:

Thư viện xử lý report
Thanh điều hướng menu report
Cấu trúc html của 1 report

*******************************************

1. Thư viện xử lý report:
<link href="/themes/report/sys/rpt.css" rel="stylesheet" type="text/css">
<link href="/themes/report/sys/menu.css" rel="stylesheet" type="text/css">

2. Thanh điều hướng menu report:
    Nút in và xuất pdf
<div class="menu-report">
<h4 class="title_report"><i class="fa fa-eye"></i> TEST</h4>
<script>
$('.title_report').click(function(){
    alert('Nạp lại dữ liệu báo cáo');
        location.reload();
    });
</script>
<button id="btnExport" style="display:inline" value="Export" title="PDF" class="btn-circle"><img src="xml_lib/image/pdf-icon.png" /></button>
<button id="btnPrint"   onClick="return printRpt();" title="In" class="btn-circle"><img src="xml_lib/image/Printer-icon.png" /></button>
<a id="back-to-top" href="#" class="btn btn-top btn-lg back-to-top" style="padding:5px" role="button" title="Lên đầu trang" data-toggle="tooltip" data-placement="left">
<span class="fa fa-chevron-up"></span> Đầu trang
</a>
</div>

3. Cấu trúc html của 1 report
- 3.1 Hiển thị không cần chia từng trang
(Nhưng khi in sẽ được tự động chia trang theo page size)

Chú ý phần css:

.page_contains {
        padding: 5mm; /* mac dinh la 5mm */
        margin:0;
        border: 0px #CCCCCC solid;
        /* Xóa dòng: height:286mm; để không giao diện tách theo trang */
        outline: 0mm #FFEAEA solid;
        position: relative;
    }

- 3.2 Hiển thị và cần chia từng trang
(Nhưng khi in sẽ được tự động chia lại trang theo page size)

<div id="rptIIF">
    <div class="page">
        <div class="page_contains">
            <div class='page_top'><p style="text-align: center;"><strong>PAGE TOP</strong></p></div>
            <div class="rpt_txt_h"><p style="text-align: center;">REPORT HEARDER</p></div>
                <p>Noi dung trang DAU TIEN</p>
            <p style="text-align: center;"><span style="font-size: 1.5em;">Page_Footer</span></p>
            <div class="page_bottom"></div>
        </div>
    </div>
   <div class="page">
        <div class="page_contains">
            <div class='page_top'><p style="text-align: center;"><strong>PAGE TOP</strong></p></div>
                <p>Noi dung trang ...</p>
            <div class="page_bottom"></div>
        </div>
    </div>
    <div class="page">
        <div class="page_contains">
             <div class='page_top'><p style="text-align: center;"><strong>PAGE TOP</strong></p></div>
             <p>Noi dung trang CUOI CUNG</p>
             <p style="text-align: center;"><span style="font-size: 1.5em;">Page_Footer</span></p>
             <p style="text-align: center;">REPORT FOOTER</p>
            <div class="page_bottom"></div>
        </div>
    </div>

</div>

Chú ý phần css:

.page
    {
        width: 210mm;
        min-height:297mm;
        padding: 5mm;
        margin: 10mm auto;
        border: 1px #D3D3D3 solid;
        border-radius: 5px;
        background: white;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
        position:relative;
        page-break-after: always;

    }

    .page_contains {
        padding: 5mm; /* mac dinh la 5mm */
        margin:0;
        border: 0px #CCCCCC solid;
        /* 297mm - padding 5x2 = 287 */
        outline: 0mm #FFEAEA solid;
        position: relative;
    }

Chú ý:
.pagebreak{page-break-after: always;}

Nếu trang dài sẽ chi trang

Css ghi chú:

* Khi thiết kế html trong report thẻ p sẽ lấy mặc định là
.page_contains p
{
padding:1px;margin:1px;
}

Nếu muốn đổi lại vào cấu hình report Html_Add thêm
<style>
.page_contains p
{
padding:Xpx;margin:Xpx;
}
</style>

* Khi có sử dụng thẻ table muốn quy định độ rộng cột
.table_donhang
{width:100%;}
.col_STT
{
width:10px;
}
.col_Ten
{
width:30px;
}
.col_DVT
{
width:20px;
}
.col_SL
{
width:30px;text-align:right;
}
.col_DG
{
width:40px;text-align:right;
}
.col_TT
{
width:40px;text-align:right;
}

<style>

Một số lỗi hay gặp và cách sửa khi thiết kế in:

1. Khi view chuẩn bị in: không vừa chữ bị ngắt trang

2. Bị dư trang trắng ở giữa, có khi bên firefox đủ nhưng bên chrome lại dư trang trắng
Hạ độ cao của page_contains xuống >1 px.

Thiết kế html report

Mục liên quan: