Thiết kế html report

1. Thư viện xử lý report
2. Thanh điều hướng menu report
3. 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)

<div id="rptIIF">
    <div class="page">
        <div class="page_contains"><!-- noi dung in -->
            <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 </p>
            <p style="text-align: center;"><span style="font-size: 1.5em;">Page_Footer</span></p>
            <div class="page_bottom"></div>
        </div><!-- subpage -->
    </div>
</div><!-- rptIIF -->

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"><!-- noi dung in -->
            <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><!-- subpage -->
    </div>
    <div class="page">
        <div class="page_contains"><!-- noi dung in -->
            <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><!-- subpage -->
    </div>
    <div class="page">
        <div class="page_contains"><!-- noi dung in -->
             <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><!-- subpage -->
    </div>
    
</div><!-- rptIIF -->

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.