java篇/前端篇——java导出pdf文件2

很久以前写过一篇java导出pdf文件，现在对模板部分做一个补充，也是我自己的备份，使用的是iText+flying sauser将html模板强制转换为pdf文件。

这里的初始文件用的是vm模板，人越来越懒了，只记要点了。

1、目录链接

目录：

 <ul>
   <li><a href="#n1">1  绪言</a></li>
</ul>

内容：

<a class="h1" name="n1">1  绪言</a>

2、分页

.pageNext{page-break-after:always;}
<div class="pageNext"></div>

3、页眉页脚/页码

这里要用到的是关于css控制打印的相关信息，@media print用的css媒体查询，它所包含的样式只在打印的时候起作用，@page可以指定页面的尺寸和页眉页脚等。counter(page)可以获取页码。

 @media print {//下面的样式只在打印的时候起作用
        div.header-left {
            display: block;
            position: running(header-left);
            margin-top: 20px;
            margin-bottom: 5px;
	    margin-left: -25px;
        }
        div.header-right {
            display: block;
            position: running(header-right);
            margin-top: 20px;
            margin-bottom: 5px;
        }
        div.footer-left {
            display: block;
            position: running(footer-left);
        }
        div.footer-right {
            display: block;
            position: running(footer-right);
        }
    }
    @page {//指定页眉页脚
        @top-left{
            content:element(header-left);
        };
        @top-right {
            content: element(header-right);
		};
        @bottom-left {
            content: element(footer-left)
        };
        @bottom-right {
            content: element(footer-right)
        };
    }

    #pagenumber:before {//页码
        content: counter(page);
    }

<div id="header" >
    <!--***************页眉*****************-->
    <div id="header-left" class="header-left" align="left">
        <img src="../../xxx.png" width="100px" height="30px"/>
    </div>
    <div id="header-right" class="header-right" align="right">
		xxxxxx
    </div>
    <!--***************页眉*****************-->
</div>

<div id="footer" >
    <!--***************页脚*****************-->
    <div id="footer-left" class="footer-left" align="left">
		xxxxxx
    </div>
    <div id="footer-right" class="footer-right" align="right">
        <!--***************页脚右侧显示页码*****************-->
        <span id="pagenumber"/>
    </div>
    <!--***************页脚*****************-->
</div>