上一篇 Puppeteer将动态html页面生成pdf，这篇文章提到的的解决方案，从npm包的下载量看到，还是有不少developer在采用的；上一篇文章分享的是如何将我们用vue/react开发的页面比方便的转成pdf,在销售伙伴展业需求中，除了pdf之外，还有宣讲类的需求，会用到ppt、word等格式；

1.模型数据和模板

2.生成流程

目前我们需要将分析结果页生成pdf/ppt/word场景是非常多的，理财顾问拿针对客户的分析报告展开业务，或pdf打印文件，或pdf链接；

有客户需求，如果提供对应的数据，就可以生成对应的报告（pdf/word/ppt）;

之前生成pdf的开发场景是：前端伙伴先开发联调完对应的分析页面，然后提测，测试bug解决差不多了再开发对应的报告页面，调样式、调下载流程，复用程度比较少；现在流程如果需求对应的模板之前有别的项目实现过，传入模板对应的结构数据，就可以实现生成word/pdf/ppt;

当developer开发的原页直接接入jsdk,解析出来全数据，在生成word/ppt可能识别不到或者不支持，或者是转换出来的和在页面设置的有差异，这个需要抹平；抹平的方式有下面几种：

将两边有差异的部分列出来，写js 脚本，抹平，不同设备可能表现不一样，这块可能需要一直迭代兼容；
用推荐的规则样式写，这样限制了开发同学；
用阶段二根据模型数据来 render 模型组件，这些模型组件都是内置的，解决了css和文件转换两边的样式差异问题；开发者只用提供模型数据，具体的样式和抹平操作模型组件来做；
在满足文件转换规则的基础上可以更方便、快捷、复用程度更好；

这里有个模板的概念，设计思想和java poi 模板有点类似；
- java poi 兼容多变的业务场景，其中有个模板概念，使用者在生成word之前，提前内置好模板，定义好数据结构，在模板内定义每项的字段名，加上对应的样式，生成word时，根据定义好的数据结构传入对应业务数据，即可生成对应的word；
- 但是poi 有个缺陷，是只支持流式布局，没有位置的概念，不支持支持横向布局；
由于组件渲染内部是用js实现的，天然的支持带位置的元素节点，位置信息一般包括x、y、w、h，如果每个节点的信息都需要模型数据往里传的话，使用起来是非常痛苦的；
- 所以需要有 render层把位置信息的获取设置变成程序实现的，使用模型时不用关心这里；
主要功能：
1. 模板概念，聚合此模板内功能；
  1. 模板的颗粒度适中，可方便组合；
2. 设置、获取位置信息和其他信息，满足全数据要求
3. 抹平差异
4. 可接入原来nb-fe-pdf 生成pdf 整套逻辑；

// todo

// todo

页面中所有的模板Tpl(HeaderTpl/FooterTpl/ListTpl) 都是有提前内置的模板实现，使用时：1.关联Tpl名称 2.根据Tpl 数据格式传入对应数据
这样做的好处是在面对各种各样的需求时既可以保证灵活性，又可以简单、快捷接入全量数据