footer – PlusMagi's Blog By Pitt Phunsanit

PHPExcel : ตั้งค่าหน้ากระดาษ

วันนี้ตอนที่กำลังเขียน code โดยใช้ PHPExcel โดยพยามแต่งรูปแบบไฟล์ excel ให้มันสวยงามอยู่ เพื่อนโปรแกรมเมอร์อีกคน เตือนด้วยความหวังดีว่า จัดไปก็เท่านั้นเดี๋ยว user ก็พิมพ์ให้มันพัง ออกแบบให้พิมพ์แนวนอน แต่พี่แกก็ print ออกมาเป็นแบบแนวตั้ง

กลับมาบ้านลองหาคู่มือดู PHPExcel มันกำหนด page setup ให้เอกสารได้ด้วย ^_^ ก็เลยลองเขียนดู

<?php

include 'vendor/phpoffice/phpexcel/Classes/PHPExcel.php';

$objPHPExcel = new PHPExcel();

/* Set default style */
$defaultStyle = $objPHPExcel->getDefaultStyle();

$defaultStyle->getFont()
    ->setName('Arial')
    ->setSize(11);

$defaultStyle->getNumberFormat()
    ->setFormatCode('yyyy-mm-dd');

/* Set document properties */
$title = 'Exports_Datas_' . date('Y-m-d_H:i');
$objPHPExcel->getProperties()->setCreator('Pitt Phunsanit')
    ->setCategory('Exports Datas')
    ->setDescription($title)
    ->setKeywords('Exports Datas ' . date('Y-m-d'))
    ->setSubject($title)
    ->setTitle($title);

/* create new sheet */
$objWorkSheet = $objPHPExcel->getActiveSheet();
$objWorkSheet->setTitle('Exports Datas');

/*
printer page setup
https://github.com/PHPOffice/PHPExcel/blob/develop/Documentation/markdown/Overview/08-Recipes.md
 */

/* print header and footer of a worksheet */
$objWorkSheet->getHeaderFooter()->setOddFooter('&L&B' . $objPHPExcel->getProperties()->getTitle() . '&RPage &P of &N');
$objWorkSheet->getHeaderFooter()->setOddHeader('&C&HPlease treat this document as confidential!');

/* page margins */
$objWorkSheet->getPageMargins()->setBottom(1);
$objWorkSheet->getPageMargins()->setLeft(0.75);
$objWorkSheet->getPageMargins()->setRight(0.75);
$objWorkSheet->getPageMargins()->setTop(1);

/* Setting a worksheet's page orientation and size */
$objWorkSheet->getPageSetup()->setFitToPage(true);
$objWorkSheet->getPageSetup()->setFitToWidth(true);
$objWorkSheet->getPageSetup()->setHorizontalCentered(true);
$objWorkSheet->getPageSetup()->setOrientation(PHPExcel_Worksheet_PageSetup::ORIENTATION_LANDSCAPE);
$objWorkSheet->getPageSetup()->setPaperSize(PHPExcel_Worksheet_PageSetup::PAPERSIZE_A4);

/* Specify printing area */
$objWorkSheet->getPageSetup()->setPrintArea('A1:E11');

/* add demo data */
for ($rowNo = 1; $rowNo < 10; $rowNo++) {
    for ($colNo = 0; $colNo < 5; $colNo++) {

        $colString = PHPExcel_Cell::stringFromColumnIndex($colNo);

        $coordinate = $colString . $rowNo;

        $objWorkSheet->setCellValue($coordinate, 'Add Data To ' . $coordinate);
    }
}

/* auto width column */
$cellIterator = $objWorkSheet->getRowIterator()->current()->getCellIterator();
$cellIterator->setIterateOnlyExistingCells(true);
foreach ($cellIterator as $cell) {
    $objWorkSheet->getColumnDimension($cell->getColumn())->setAutoSize(true);
}

/* write */
$objWriter = PHPExcel_IOFactory::createWriter($objPHPExcel, 'Excel2007');
header('Content-Type: application/vnd.ms-excel');
header('Content-Disposition: attachment;filename="' . $title . '.xlsx"');
header('Cache-Control: max-age=0');
header('Cache-Control: no-store, no-cache, must-revalidate, max-age=0');
header('Cache-Control: post-check=0, pre-check=0', false);
header('Pragma: no-cache');
$objWriter->save('php://output');

เปิดกับ LibreOffice Writer ก็ใช้ได้จริงๆ (สมัยนี้ใครเค้าใช้ microsoft word กันแล้ว ถ้าต้องจ่ายตัง) การกำหนดรูปแบบอื่นๆ อ่านได้จากตัวอย่าง PHPExcel recipes จัดได้หลากหลายมาก จะเลือกกระดาษ มาร์จิ้น สี เส้น เลขหน้า แนวนอน แนวตั้ง ทำได้หมด

HTML5 IE หน้าเว็บเพี้ยน

อ้ายอีที่ขัดขวางการเจริญเติมโตของเว็บเทคโนโลยีกันมานานคงไม่พ้น internet explorer ไออี ตัวปัญหาเจ้าเก่าเจ้าประจำ ดั้งเดิมนั้นเอง เพราะว่ามันโดนฝั่งมากับ windows และต่างจาก chrome, Firefox, opera ตรงที่เจ้าอื่นๆมันจะ update อัตโนมัติ พยามพัฒนาตัวเองให้เป็นคนใหม่ มีความสามารถมากขึ้นเสมอๆ แต่เจ้าที่ตัวนี้ user ต้องพยามในการอัพเดตมันเอง แถมวินโดวน์เก่าๆ ยังไม่สามารถลงเวอร์ชั่นที่ล่าสุดได้ตามข้อจำกัดของวินโดว์นั้นๆ

ถ้าเราใช่ HTML5 และ tag ใหม่ อย่าง article, aside, footer, header, nav, section, time หวังว่าท่าน google จะทรงโปรด เพราะว่าแบ่งข้อมูลให้ท่านพิจารณาในการทำ SEO อย่างเต็มที่ แต่กลับกลายเป็นว่าหน้าเว็บเละอย่างไม่เคยเป็นมาก่อนใน IE8 ลงไป ลองใช้ compatibility mode ไล่ version ต่ำลงมาเรื่อยๆ ถึงจะเห็นว่าเป็นที่ IE9 ลงมา

เป็นเพราะว่ามันเห็น tag ใหม่ๆ อย่าง article, aside, footer, header, nav, section, time เป็นการเขียนผิด โดนกะลาครอบอยู่กับ HTML4 สมัยเมื่อ 10 ปีที่แล้ว แถมพาลไม่สนใจ css ที่มี tag พวกนี้อยู่ด้วย วิธีแก้คือสร้าง object ใหม่อีกครั้งด้วย JavaScript

'article aside footer header nav section time'.replace(/\w+/g,function(n){document.createElement(n)})

หรือจะใช้ tools อย่าง html5shiv

<!--[if lt IE 9]>
    <script src="bower_components/html5shiv/dist/html5shiv.js"></script>
<![endif]-->

เราก็จะสามารถใช้ css กับเท็กใหม่ๆ พวกนี้ได้และควรใช้ css reset ไว้ด้วยครับ ช่วยได้เยอะเลย เกือบจะต้องเริ่มต้นเขียนกันใหม่

ให้ฟุตเตอร์อยู่ด้านล่างพอดีหน้าจอ (ตาราง)

จากที่เคยเขียน ให้ฟุตเตอร์อยู่ด้านล่างพอดีหน้าจอ
ถ้าหน้าเว็บสั้นกว่าจอโดยใช้ tableless เรามาย้อนยุคโดยใช้ตารางดูบ้าง
note

ใช้ได้กับทุกบราวเซอร์รวมทั้งไอโฟนด้วย แต่ ie ต้องใช้ DOCTYPE เท่านั้น ถ้าเป็นตัวอื่นจะกำหนดความสูงของแถวไม่ได้
ถ้าเนื้อหาน้อยมากๆ ตารางจะพยามชดเชยความสูงของตัวมันเองที่มากกว่าปกติ โดยจะเพิ่มความสูงของ tr ทดแทน ถ้าไม่อยากให้หน้าเว็บดูผิดปกติให้แก้
ที่มีปัญหาเป็น

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>100% table height</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="css3.css">
<style>
html
{
	height:100%;
}
body
{
	height:100%;
	margin: 0px;
	padding: 0px;
	font-family: Helvetica, Arial, "Trebuchet MS", sans-serif;
}
table
{
	border: 0 none;
	height:100%;
}
td
{
	margin: 0px;
	padding: 0px;
	vertical-align:top;
	height:0px;
}
#header
{
	background:#c00000;
	height:20px;
}
#footer
{
	background:#c00000;
	height:20px;
}
</style>
</head>
<body>
<table border="1" class="tablewrapper">
  <tr>
    <td id="header">header</td>
  </tr>
  <tr>
    <td>contents</td>
  </tr>
  <tr>
    <td id="footer">footer</td>
  </tr>
</table>
</body>
</html>

นี่ถ้าเขียนโดยใช้ div จะง่ายและสั้นกว่ามาก
ดูเพิ่มเติม

ให้ฟุตเตอร์อยู่ด้านล่างพอดีหน้าจอ

ปกติฟุตเตอร์ในหน้าเว็บจะอยู่ต่อจากส่วนอื่นๆ ถ้าเนื้อหาสั้นก้จะเห็นหน้าเว็บ สั้นแปลกๆ อย่างหน้าแจ้งสมัครสมาชิคสำเร็จถ้ามีข้อความแค่ สำเร็จแล้ว จะส่งเมล์ไปยืนยัน ถ้าเว็บไม่มีโฆษณา หรือภาพใหญ่ๆ ก็จะเห็นแค่ครึ่งหน้าจอ บางคนบอกว่าตลก แก้ได้โดยวางโครงสร้างตามตัวอย่างครับ

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>CSS Fixed Footer</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
html,
body
{
	margin:0;
	padding:0;
	height:100%;
}
#container
{
	min-height:100%;
	position:relative;
}
#footer
{
	position:absolute;
	bottom:0;
	width:100%;
	height:20px;/* Height of the footer */
	background:#c00000;
	padding-top:5px;
}
#body
{
	display:block;
	background:#CF6;
}
</style>
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="body">
 ใส่เนื้อหาสั้นๆ ตรงนี้นะ
</div>
<hr />
<div id="footer">ฟุตเตอร์นะนายจ๋า</div>
</body>
</html>

ถ้าเนื้อหายาว ก็จะเห็นเหมือนเว็บปกติครับ

PlusMagi's Blog By Pitt Phunsanit

Tag Archive footer

PHPExcel : ตั้งค่าหน้ากระดาษ

HTML5 IE หน้าเว็บเพี้ยน

ให้ฟุตเตอร์อยู่ด้านล่างพอดีหน้าจอ (ตาราง)

ให้ฟุตเตอร์อยู่ด้านล่างพอดีหน้าจอ