reportpage
v3.0.2
Published
报告自动分页
Downloads
31
Readme
ReportPage
介绍
ReportPage是Vue的一个插件，以Vue插件的方式引入项目即可。该插件实现了报告自动进行分页的功能。
原理
- 页面初始渲染完成后，启动handlePage分页功能开始分页
- handlePage对渲染后的页面进行计算分析，递归找到落在分界线上的原子节点
- 分析该原子节点
- 原子节点在当前页占有的高度超过allowSpaceHeight
- 如果是rp_atomic类的元素，则忽略该元素，继续向下递归查找下一个原子节点
- 如果是纯文本节点，则按照比例分割该文本，将该节点变成有子元素的节点，然后继续向下递归查找下一个原子节点
- 原子节点在当前页占有的高度不超过allowSpaceHeight，则将该原子节点作为最终的分界元素
- 原子节点在当前页占有的高度超过allowSpaceHeight
- 将该分界元素向上递归进行层层包装，然后放到下一页
- 从下一页继续分析页面，寻找分界线上的原子节点，重复上面步骤
- 直到再也找不到任何一个元素落到页面分界线上，此时整个html文档分页完成
名词解释
原子节点：
- 带有rp_atomic类的元素（业务端控制）
- 纯文本节点
示例
<body>
<div id="app">
<report-page :option="option" @end="onPageEnd">
<div slot="header">
这里是页面的header，每个页面都会有。
</div>
<div slot="module">
此处为业务模块，报告的主要业务内容都在此处。
...
</div>
<div slot="footer">
这里是页面的footer，每个页面都会有。
插槽的内容会显示在页码的上方。
</div>
</report-page>
</div>
</body>
<script>
// 不管以什么方式，请先引入Vue
Vue.use(ReportPage);
var vm = new Vue({
el:'#app',
data:{
option:{
pageWidth: 1190, // 页面的总宽度
pageHeight: 1684, // 页面的总高度
pageBgImg: '', // 页面背景图
pageBgColor: '#F6F6FF', // 页面背景色
pageGap: 50, // 页面之间的间隔
pageIndexColor: 'orange', // 当前页码的颜色
pageExtraClass: '', // 页面额外自定义class
headerHeight: 80, // 页面header的高度
footerHeight: 50, // 页面footer的高度
pageMax: 50, // 分页最大页数限制（默认50，业务端可根据具体情况酌情配置）
allowSpaceHeight: 600, // 页尾允许的空白高度
}
},
methods:{
onPageEnd(){
// 分页完成
}
}
});
</script>
事件
- end
注意事项
如果一个父元素下的子元素在一行显示（如，float），则父元素需要添加rp_atomic类
一个元素下的所有子节点必须都为元素节点
// 这种写法是错误的，“文本2”必须用html元素包裹
<div>
<div>文本1</div>
文本2
<div>文本3</div>
</div>- rp_atomic，元素中如果添加了该class，则该元素尽量不会被分割，但如果该元素在分页时产生的效果与allowSpaceHeight阈值产生冲突，则优先满足allowSpaceHeight产生的效果
- 不允许使用position: relative,该属性会导致页面高度计算错误
- 使用flex布局要谨慎，要确保父元素的高度没有塌陷
- rp_break，元素中如果添加了该class，则从该元素会另起一页，rp_break类在放到下一页后会自动删除
- img标签必须设置height
调试
url中添加dev=1，则会打印必要内容，如：http:xxx.xxx.com?a=xxx&dev=1