自定义报告导出平台：几分钟生成你的汇报ppt

  

本文字数：6277字

预计阅读时间：16分钟

一、背景

1.1 背景

在房地产 2B 业务场景中，有这样一种情况，每个季度或者每个月，甚至每个周，交付侧需要定期产出一份报告向客户开发商汇报各种产品的使用情况，投用效率，收益比率等等，制作这样一份报告通常会耗费掉大量时间，需要排版布局，需要统计数据制作图表，需要分析总结。我们知道报告样式可以直接套用模板，如果更进一步，有这么一份模板，模板包括了所需的文字，图表，你需要做的只是选择数据源，就可以生成对应的报告，这样的模板可以大大提高工作效率，将一天的工作量缩短到简单的1分钟就能够完成。针对这个诉求，自定义报告导出平台应运而生，在需要定期汇报的情况下都可以快捷简单迅速地生成一份完整的汇报 ppt ，从“苦 ppt 久矣”的工作中解放出来。

1.2 主要功能

• 报告模板的自定义编辑平台，实现文字编辑、图片插入、图表插入、字段插入、背景更换等；

• 报告模版的增删改查，实现报告的导出、编辑、预览、删除、复制等功能；

• 报告导出，实现自定义选择数据源导出真实数据生成的最终项目报告。

二、整体思路

可以说，自定义报告导出平台是一个简易的线上 ppt 编辑器和大数据嵌入两个功能的结合，所以主要分为两个大的功能块去实现：模板编辑和报告导出。

2.1 模板编辑

主要用表单提交的方式完成用户编辑 ppt 这一交互。用户可以自由的选择页面布局模板，制定页面背景，可以填充图片，文字，图表等各种内容。其中，在编辑内容的时候，用户选中需要编辑的块，再通过右侧的表单来进行内容填充，编辑的结果会实时展示在画布上，而选中块的已有内容也会回填到表单中，如下图所示：

图2.1-1：自定义报告编辑器-布局配置

图2.1-2：自定义报告编辑器-内容配置

图2.1-3：自定义报告编辑器-功能模块

2.2 报告导出

最终的报告根据用户选择的项目和数据统计区间，嵌入模板中所插入字段和图表的地方，最后再导出填充数据后的pptx格式的报告。该功能主要通过开源库 PptxGenJS[1] 来完成。该库可以根据大量的配置项来生成与 html 页面内容对应的 pptx 文件，所生成的 pptx 文件所有内容都可以自行调整编辑。图表生成的使用方法类似 echarts ，不同的是 echarts 是在页面上进行渲染， PptxGenJS[1] 是导出一个文件。

图2.2：PptxGenJs库

三、数据结构

报告的导出需要每个元素的具体定位，元素内容，元素样式等多种数据，为了方便导出一比一的报告，根据 pptxGen 库导出时所需数据以及页面展示所需内容，每一张幻灯片的数据包含4个部分：layout、content、slideTitle、background。

• layout：slide 模块栅格布局，包括布局宽高以及导出所需位置数据；

• content：slide 包含的内容和样式数据；

• slideTitle：slide 标题和 logo 区域的内容，样式数据；

• background：背景。

图4.2-1：自定义报告组件间通信

每新增一张幻灯片，便会在这个对象里面新生成一套数据——

// 第一张幻灯片
  '0': {
 &nb