网页模板文件,支持输出PDF, Word和Excel,或者可进行动态创建的其他标准格式,制作模板与制作网页没有过大的差别,仅需遵循以下几点:
从网页模板定义,转化为PDF或者Word文档,并不能完全匹配一样的输出效果,细微的差别在所难免。
GET或者POST控制参数
页面通用对象
Meta标签控制的参数,如 <meta name="author" content="ETSOO" />
页眉、页脚和页码
页眉、页脚通过 table 标签定义,通过属性 data-role="header/footer" 来区分,页码通过 template 标签定义,通过属性 class=“page/pages” 来区分,输出页码繁琐的地方在于控制显示位置,通过样式 right 从当前输出位置右移,需要调试设置恰当的尺寸。以下示例定义了页脚并显示当前页和所有页页码:
<table style="width: 100%" data-role="footer">
<tr>
<td style="vertical-align: top; text-align: right">青岛 ∙ 上海 ∙ 深圳 ∙ 香港 ∙ 北京<br /> <template class="page" style="right: 86px; font-size: 9pt">第 {0} 页</template><template class="pages" style="right: 36px; font-size: 9pt"> / {0} 页</template></td>
</tr>
</table>
绝对或者相对定义
通过定义一个 div 元素,设置绝对或者相对定位,实现在页面中控制图片浮动或者文本框位置定位,示例表示定位签名图片:
<div style="position: relative; left: -156px; top: -56px;"><img src="/fileManager/home/documents/signature.png" style="width: 200px;" /></div>
水印
支持文字和图片水印,支持旋转和定位,支持样式控制,仅支持绝对定位的 div 标签,示例代码和效果如下:
<div style="position: absolute; left: 20%; top: 23%; rotation: 45deg; font-size: 4em; letter-spacing: 0.2em; opacity: 0.4; color: #ff0000; z-index: 1" data-waltermark="true">ETSOO</div>
分栏显示
以下代码,显示一段内容的分栏效果:
<div style="column-count: 2; column-gap: 1em; height: 150px; margin: 1em 0; padding: 1em; border: 1px solid #ff0000;">
<p>绿色发展理念是中国当前和今后一个时期始终坚持的发展理念。回应时代命题,党的十八届五中全会提出创新、协调、绿色、开放、共享的发展理念。<a href="http://www.etsoo.com"><b>习</b><i>近</i>平</a>指出:“这五大发展理念,是‘十三五’乃至更长时期我国发展思路、发展方向、发展着力点的集中体现,也是改革开放30多年来我国发展经验的集中体现,反映出我们党对我国发展规律的新认识。” 绿色发展是当今世界共同的、先进的发展理念,也是我们破解发展难题、厚植发展优势的必由之路。“十三五”规划纲要提出:“必须坚持节约资源和保护环境的基本国策,坚持可持续发展,坚定走生产发展、生活富裕、生态良好的文明发展道路,加快建设资源节约型、环境友好型社会,形成人与自然和谐发展现代化建设新格局,推进美丽中国建设,为全球生态安全作出新贡献。”</p>
</div>
输出条形码
定义标签:span,特殊属性:data-barcode="true",data-type="102",102代表条形码类型,了解条形码类型含义请点击这里。
输出QRCode示例代码:<span data-barcode="true" data-type="102" style="width: 200px; height: 200px">123456789</span>
输出Code39示例代码:<span data-barcode="true" data-type="0">123456789</span>
对于普通条形码,可以对最小的条码宽度(data-x),宽条码宽度(data-n),条码高度(data-barheight),是否创建验证码(data-checksum),是否显示验证码(data-checksumtext),是否显示开始结束标签(data-startstoptext),进行设置控制。
使用的外部资源: