HTML & CSS 打印报表

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

而如今随着浏览器faster, stronger, better, smarter，完全可以通过HTML&CSS的方式提供报表打印。


（一）打印Web Page
基本的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; }

（二）打印设置

设置纸张大小

@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);
}

（三）浏览器设置
各浏览器设置不同，基本都默认输出：标题、URL、页码、打印时间等，比如以下为Firefox的打印设置：


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

评论

1 楼 zenmshuo 2016-11-08  

如果用C1Report，会比这个更简单一点