HTML & CSS 打印报表

通常打印报表的时候，需要在服务器端生成PDF, Excel, Word 或者其他文件后，下载到本地后打印。可以参考这里：
Java操作PDF之iText超入门 ： [url=http://rensanning.iteye.com/blog/1538689]http://rensanning.iteye.com/blog/1538689[/url]
Java读写Excel之POI超入门 ： [url=http://rensanning.iteye.com/blog/1538591]http://rensanning.iteye.com/blog/1538591[/url]

而如今随着浏览器faster, stronger, better, smarter，完全可以通过HTML&CSS的方式提供报表打印。
[img]http://dl2.iteye.com/upload/attachment/0112/6890/17de3cd9-4d0f-36a3-ab3c-d6b6aa96c654.png[/img]

[b]（一）打印Web Page[/b]
基本的HTML打印知识

1）Media types
media属性

<link rel="stylesheet" type="text/css" href="print.css" media="print">
<style type="text/css" media="print"></style>

@media规则

@media print {
 body { margin: 0; background-image: none; font-size: 12pt; }
}

2) Print Style Sheets
隐藏导航（navigation/sidebar）

#nav, #sidebar { display: none; }

隐藏不必要的内容

#comments { display: none; }

加宽Body区域

#content { width: auto; border: 0; margin: 0 5%; padding: 0; float: none !important; }

设置背景，文字颜色

body { background: white; } #content { background: transparent; } 
#author { color: #111; }

显示链接URL

a:link:after { content: " (" attr(href) ") "; font-size: 90%; }
a[href^="/"]:after {  content: " (http://www.sample.com" attr(href) ") "; }

区分链接和一般文字

a:link { font-weight: bold; text-decoration: underline; color: #06c; }

设置字体

body { font-family: Georgia, ‘Times New Roman’, serif; font-size: 12pt; }

打印提示

@media screen { #printMsg { display: none; } }
@media print { #printMsg { display: block; } }

分页显示

.sheet {  page-break-after: always; }

表格边框

table { border: 1px solid black; }

[b]（二）打印设置[/b]

设置纸张大小

@page { size: A4 }
@page { size: 210mm 297mm }

设置纸张方向

@page { size: A4 landscape }

设置边距

@page { size: A4; margin: 10mm; }
@page :left {
   margin-left: 4cm;
   margin-right: 3cm;
}
@page :right {
   margin-left: 3cm;
   margin-right: 4cm;
}
@page :first {
   margin-top: 10cm
}

Chrome需要特殊设置

@page { size: A4; margin: 10mm; }
@media print {
  body {
    width: 190mm; /* needed for Chrome */
  }
}

输出页码

body {
  counter-reset: sheet; 
}
.sheet::after {
  position: absolute;
  bottom: 0;
  right: 0;
  counter-increment: sheet;
  content: "Page " counter(sheet);
}

[b]（三）浏览器设置[/b]
各浏览器设置不同，基本都默认输出：标题、URL、页码、打印时间等，比如以下为Firefox的打印设置：
[img]http://dl2.iteye.com/upload/attachment/0112/6892/40348b87-2165-3933-a47c-1252a853da0c.png[/img]

参考：
http://www.smashingmagazine.com/2007/02/printing-the-web-solutions-and-techniques/
http://qiita.com/cognitom/items/d39d5f19054c8c8fd592