前端自定义导出PPT

1、背景

        前端导出PPT，刚接触这个需求，还是比较懵逼，然后就在网上查找资料，最终确认是可行的；这个需求也是合理的，我们做了一个可视化数据报表，报表导出成PPT，将在线报表转成文档类型留存；

2、技术方案

        实现这种复杂的功能，都得依赖前辈匠人，还好有一个比较完善好用的库：pptxgenjs

只有英文文档：Quick Start Guide | PptxGenJS，还可以搭配大家比较熟悉的库：html2canvas，更好的实现完善的PPT

3、PptxGenJS运用

引入，生成一个简单的PPT文档

import pptxgen from "pptxgenjs";

let pptx = new pptxgen();

let slide = pptx.addSlide();

slide.addText("React Demo!", { x: 1, y: 1, w: 10, fontSize: 36, fill: { color: "F1F1F1" }, align: "center" });

pptx.writeFile({ fileName: "react-demo.pptx" }

pptx全局属性：

pptx.author = 'Brent Ely';
pptx.company = 'S.T.A.R. Laboratories';
pptx.revision = '15';
pptx.subject = 'Annual Report';
pptx.title = 'PptxGenJS Sample Presentation';
pptx.layout = 'LAYOUT_WIDE'; //13.5 x 7.5

其中最重要的属性，layout，顾名思义，就是设置PPT的slide的大小，默认就下面几种：

还可以自定义。这个x*y，是后面PPT页计算布局必不可少的；

slide master，自定义PPT页模板：

    ppt.defineSlideMaster({
      title: 'DEFAULT_SLIDE',
      objects: [
        { image: { x: 0.25, y: 0.3, w: 0.6, h: 0.6, path: path} },
        { image: { x: 10.8, y: 0.61, w: 1.485, h: 0.166, path: path} },
        { image: { x: 12.3, y: 0.52