Sử dụng css đinh dạng trang in + php tạo nội dung (in hóa đơn)


Tạo mẫu in cho những sản phẩn đã chọn từ giỏ hàng như sau:

Giỏ hàng
Giỏ hàng

Khi nhấn vào IN HÓA ĐƠN sẽ cho phép in với mẫu như sau

Biên lai thanh toán
Biên lai thanh toán

Với mẫu code CSS sau sẽ giúp chúng ta định dạng mẫu giấy in theo mẫu A4.

body {
	margin: 0;
	padding: 0;
	background-color: #FAFAFA;
	font: 12pt "Tohoma";
}
* {
	box-sizing: border-box;
	-moz-box-sizing: border-box;
}
.page {
	width: 21cm;
	overflow:hidden;
	min-height:297mm;
	padding: 2.5cm;
	margin-left:auto;
	margin-right:auto;
	background: white;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
.subpage {
	padding: 1cm;
	border: 5px red solid;
	height: 237mm;
	outline: 2cm #FFEAEA solid;
}
 @page {
 size: A4;
 margin: 0;
}
button {
	width:100px;
	height: 24px;
}
.header {
	overflow:hidden;
}
.logo {
	background-color:#FFFFFF;
	text-align:left;
	float:left;
}
.company {
	padding-top:24px;
	text-transform:uppercase;
	background-color:#FFFFFF;
	text-align:right;
	float:right;
	font-size:16px;
}
.title {
	text-align:center;
	position:relative;
	color:#0000FF;
	font-size: 24px;
	top:1px;
}
.footer-left {
	text-align:center;
	text-transform:uppercase;
	padding-top:24px;
	position:relative;
	height: 150px;
	width:50%;
	color:#000;
	float:left;
	font-size: 12px;
	bottom:1px;
}
.footer-right {
	text-align:center;
	text-transform:uppercase;
	padding-top:24px;
	position:relative;
	height: 150px;
	width:50%;
	color:#000;
	font-size: 12px;
	float:right;
	bottom:1px;
}
.TableData {
	background:#ffffff;
	font: 11px;
	width:100%;
	border-collapse:collapse;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:12px;
	border:thin solid #d3d3d3;
}
.TableData TH {
	background: rgba(0,0,255,0.1);
	text-align: center;
	font-weight: bold;
	color: #000;
	border: solid 1px #ccc;
	height: 24px;
}
.TableData TR {
	height: 24px;
	border:thin solid #d3d3d3;
}
.TableData TR TD {
	padding-right: 2px;
	padding-left: 2px;
	border:thin solid #d3d3d3;
}
.TableData TR:hover {
	background: rgba(0,0,0,0.05);
}
.TableData .cotSTT {
	text-align:center;
	width: 10%;
}
.TableData .cotTenSanPham {
	text-align:left;
	width: 40%;
}
.TableData .cotHangSanXuat {
	text-align:left;
	width: 20%;
}
.TableData .cotGia {
	text-align:right;
	width: 120px;
}
.TableData .cotSoLuong {
	text-align: center;
	width: 50px;
}
.TableData .cotSo {
	text-align: right;
	width: 120px;
}
.TableData .tong {
	text-align: right;
	font-weight:bold;
	text-transform:uppercase;
	padding-right: 4px;
}
.TableData .cotSoLuong input {
	text-align: center;
}
@media print {
 @page {
 margin: 0;
 border: initial;
 border-radius: initial;
 width: initial;
 min-height: initial;
 box-shadow: initial;
 background: initial;
 page-break-after: always;
}
}

Và để có thể có được nội dung in chúng ta sẽ sử dụng PHP để phát sinh nội dung như sau:

<body onload="window.print();">
<div id="page" class="page">
	<div class="header">
 	 	<div class="logo"><img src="../images/logo.jpg"/></div>
        <div class="company">C.Ty TNHH Salomon</div>
  	</div>
  <br/>
  <div class="title">
  		HÓA ĐƠN THANH TOÁN
        <br/>
        -------oOo-------
  </div>
  <br/>
  <br/>
  <table class="TableData">
    <tr>
      <th>STT</th>
      <th>Tên</th>
      <th>Đơn giá</th>
      <th>Số</th>
      <th>Thành tiền</th>
    </tr>
    <?php
session_start();
$tongsotien = 0;
if(isset($_SESSION['giohang'])){
	$pos = 1;
	$tongsotien = 0;
	foreach($_SESSION['giohang'] as $i => $row)
	{
		$tongsotien += $row['sp_soluong']*$row['sp_dongia'];
		echo "<tr>";
		echo "<td class=\"cotSTT\">".$pos++."</td>";
		echo "<td class=\"cotTenSanPham\">".$row['sp_ten']."</td>";
		echo "<td class=\"cotGia\"><div id='giasp".$row['sp_id']."' name='giasp".$row['sp_id']."' value='".$row['sp_dongia']."'>".number_format($row['sp_dongia'],0,",",".")."</div></td>";
		echo "<td class=\"cotSoLuong\" align='center'>".$row['sp_soluong']."</td>";
		echo "<td class=\"cotSo\">".number_format(($row['sp_soluong']*$row['sp_dongia']),0,",",".")."</td>";
		echo "</tr>";
	}		
}
?>
    <tr>
      <td colspan="4" class="tong">Tổng cộng</td>
      <td class="cotSo"><?php echo number_format(($tongsotien),0,",",".")?></td>
    </tr>
  </table>
  <div class="footer-left"> Cần thơ, ngày 16 tháng 12 năm 2014<br/>
    Khách hàng </div>
  <div class="footer-right"> Cần thơ, ngày 16 tháng 12 năm 2014<br/>
    Nhân viên </div>
</div>
</body>

Chạy thử trang web chúng ta sẽ có hình như bên trên.

Advertisements

Phản hồi

Mời bạn điền thông tin vào ô dưới đây hoặc kích vào một biểu tượng để đăng nhập:

WordPress.com Logo

Bạn đang bình luận bằng tài khoản WordPress.com Log Out / Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Log Out / Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Log Out / Thay đổi )

Google+ photo

Bạn đang bình luận bằng tài khoản Google+ Log Out / Thay đổi )

Connecting to %s