Reportpage NPM

ReportPage

介绍

ReportPage是Vue的一个插件，以Vue插件的方式引入项目即可。该插件实现了报告自动进行分页的功能。

原理

页面初始渲染完成后，启动handlePage分页功能开始分页
handlePage对渲染后的页面进行计算分析，递归找到落在分界线上的原子节点
分析该原子节点
- 原子节点在当前页占有的高度超过allowSpaceHeight
  - 如果是rp_atomic类的元素，则忽略该元素，继续向下递归查找下一个原子节点
  - 如果是纯文本节点，则按照比例分割该文本，将该节点变成有子元素的节点，然后继续向下递归查找下一个原子节点
- 原子节点在当前页占有的高度不超过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>

事件

注意事项

如果一个父元素下的子元素在一行显示（如，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