开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第4天，点击查看活动详情

今天接到一个需求，客户希望公司的系统可以按照模板，自动生成一份PPT出来。说的详细点就是，页面上有个按钮，点击之后，前端请求接口获取数据，然后根据拿到的数据，用JS书写出一份PPT，然后下载下来让用户打开。

经过一番对比，最终选择了 PptxGenJS 这个库，看了一下它的官网，确实可以实现需求，但是有几个美中不足的地方，首先是没有中文版的官方文档，不过这个问题不大，英文版的也很简单，另一个不足就是，提供的功能都是较为基础的，比如说是文本，表格，图表，形状这些，但是从另一个角度来看，它的可塑性更高，所以我打算在它的基础上对它进行一次封装，增加一些组件（PPT中的组合），减少以后类似需求的开发时间。

PptxGenJS库的安装与使用

安装

npm install pptxgenjs --save

使用

我的项目是Vue2的项目，引入的方法如下：
在需要引入的组件的script标签开头使用import语句进行导入。

import pptxgenjs from 'pptxgenjs'

然后创建一个实例，一个实例代表一个PPT。

 const ppt = new pptxgenjs()

然后添加一个页面，调用实例的addSlide方法。

let slide = ppt.addSlide()

每次调用addSlide方法都会往PPT中新增一页。

let slide = ppt.addSlide() // 新增一页PPT（第一页）
// ... 执行一些操作，比如在这一页上添加一些文字啊，图片之类的
slide = ppt.addSlide() // 再新增一页PPT（第二页）
// ... 执行一些操作，往第二页上添加一些内容

生成PPT。

ppt.writeFile('PPT的名称')

比如我写了一个button组件，点击就会生成一个名为demo的PPT，代码如下

<script>
/* eslint-disable */
import pptxgenjs from 'pptxgenjs'
const getPPTx = () => {
    const ppt = new pptxgenjs()
    const slide = ppt.addSlide()
    slide.addText('hello', { x: 1, y: 1 })
    ppt.writeFile('demo')
}
export default {
    name: 'JS2PPTX',
    render() {
        return (
            <button onClick={getPPTx}>生成PPT</button>
        )
    }
};
</script>

除了在浏览器环境中使用，在Node环境中也可以使用，而且只用开头引入的方式不一样，其他部分都是大同小异。

const pptxGenjs = require('pptxgenjs') // 引入
const ppt = new pptxGenjs() // 创建一个实例
// .... 执行一些操作
ppt.writeFile("demo");// 生成ppt

直接执行相应的js文件即可在当前目录下生成一个名为demo的ppt。

基本功能

添加文本框

slide.addText([{ text: "TEXT", options: { OPTIONS } }]);

添加表格

slide.addTable(rows, OPTIONS);

添加图形

slide.addShape(pres.ShapeType.rect, OPTIONS);

添加媒体

slide.addMedia({ type: "video", path: "https://example.com/media/sample.mov" });

添加图表

slide.addChart(pres.ChartType.line, dataChartAreaLine, { x: 1, y: 1, w: 8, h: 4 });

添加图片

slide.addImage({ path: "https://upload.wikimedia.org/wikipedia/en/a/a9/Example.jpg" });

后面打算围绕上面的基本功能，进行一个系列更文，涉及到PptxGenJS库的文档翻译，使用，封装等。

【PptxGenJS】用JS写PPT