前端关于pptxgen.js个人使用介绍

官方文档链接:Quick Start Guide | PptxGenJS

git地址：https://github.com/gitbrent/PptxGenJS/

1. 安装命令

npm install pptxgenjs --save

yarn add pptxgenjs

2. 示例demo

import pptxgen from "pptxgenjs"; // 引入pptxgen 

// 1. Create a Presentation 
// 1. 创建ppt
let pptx= new pptxgen();

// 2. Add a Slide to the presentation
// 2. 创建一个ppt页面，每调用一次pres.addSlide() 都可以生成一张新的页面
// 建议把每个页面的构造抽成一个个函数，然后通过函数调用生成新页面。代码不会很乱
 // 关于坐标长度与px的转换 x 1 = 127~128px 左右
let slide = pptx.addSlide();

// 3. Add 1+ objects (Tables, Shapes, etc.) to the Slide
// 3. 调用addText()，在ppt页面中插入文字Hello World from PptxGenJS...
slide.addText("Hello World from PptxGenJS...", {
    x: 1.5,
    y: 1.5,
    color: "363636",
    fill: { color: "F1F1F1" },
    align: pres.AlignH.center,
});

// 4. Save the Presentation
 //导出ppt 配置项： fileName: string 导出pptx的名字， compression：Boolean, 是否为zip导出，导出时间更久，但导出大小节省
pres.writeFile({ fileName: "Sample Presentation.pptx" });

3. 背景布局:

3.1 pptx可以设置多个可选的 PowerPoint 元数据属性,可以使用 ES6 样式的getters/setters

pptx.author = 'Brent Ely';

pptx.company = 'S.T.A.R. Laboratories';

pptx.revision = '15';

pptx.subject = 'Annual Report';

pptx.title = 'PptxGenJS Sample Presentation';

3.2layout设置当前演示文稿中的所有幻灯片板式

pptx.layout = 'LAYOUT_NAME';

也可以使用defineLayout()方法自定义创建任意大小ppt版式

// 定义ppt的布局
pptx.defineLayout({ name: "A3", width: 10, height: 7.0710678 });
// 使用布局
pptx.layout = "A3";

3.2 设置背景

slide.background = { color: "F1F1F1" }; // 设置背景颜色
slide.background = { color: "FF3399", transparency: 50 }; // 设置背景颜色与透明度
slide.background = { data: "image/png;base64,ABC[...]123" }; //设置base64格式背景图片
slide.background = { path: "https://some.url/image.jpg" }; // 设置网络路径背景图片
slide.color = "696969"; // 设置默认字体颜色
// 在给定位置添加幻灯片编号
slide.slideNumber = { x: 1.0, y: "90%" };

// 带样式的幻灯片编号
slide.slideNumber = { x: 1.0, y: "95%", fontFace: "Courier", fontSize: 32, color: "CF0101" }

3.3 导出幻灯片

// fileName 导柱名字, 支持promise
pptx.writeFile({ fileName: 'Browser-PowerPoint-Demo.pptx' });

pptx.writeFile({ fileName: 'Browser-PowerPoint-Demo.pptx' });
    .then(fileName => {
        console.log(`created file: ${fileName}`);
    });

也支持导出其他类型文件

// 导出base64
pptx.write("base64")
    .then((data) => {
        console.log("write as base64: Here are 0-100 chars of `data`:
");
        console.log(data.substring(0, 100));
    })
    .catch((err) => {
        console.error(err);
    });

...

3.4 可以通过循环创建多个ppt

for (let slide of this.list) {
        let pptxSlide = pptx.addSlide();
        if (slide.styles.backgroundImage) {
          const backgroundImage = slide.styles.backgroundImage;
          pptxSlide.background = {
            path: backgroundImage,
          };
        } else {
          const color = rgbaToHex(slide.styles.backgroundColor)
            .color.slice(1)
            .toUpperCase();
          const transparency =
            (1 - rgbaToHex(slide.styles.backgroundColor).transparency) * 100;
          pptxSlide.background = { color, transparency };
        }
  }

.........

4. 模块方法

通过addSlide()创建一个ppt页面,可以插入元素

文字addText()，图片addImage()，表格addTable()，图表addChart(), 形状addShape()，媒体addMedia()

以下配置文字/图片/形状/表格/图表/媒体都需要配置,是元素在页面中的位置信息与宽高

4.1 添加文字元素, 文档地址:Text | PptxGenJS

var pptx = new PptxGenJS();
var slide = pptx.addSlide();

// 使用百分比的动态定位
slide.addText("^ (50%/50%)", { x: "50%", y: "50%" });

// 基本格式
slide.addText("Hello", { x: 0.5, y: 0.7, w: 3, color: "0000FF", fontSize: 64 });
slide.addText("World!", { x: 2.7, y: 1.0, w: 5, color: "DDDD00", fontSize: 90 });
slide.addText("Arial, 32pt, green, bold, underline, 0 inset", {
    x: 0.5,
    y: 5.0,
    w: "90%",
    margin: 0.5,
    fontFace: "Arial",
    fontSize: 32,
    color: "00CC00",
    bold: true,
    underline: true,
    isTextBox: true,
});

// 也可以一次配置多个
slide.addText(
    [
        { text: "word-level", options: { fontSize: 36, color: "99ABCC", align: "right", breakLine: true } },
        { text: "formatting", options: { fontSize: 48, color: "FFFF00", align: "center" } },
    ],
    { x: 0.5, y: 4.1, w: 8.5, h: 2.0, fill: { color: "F1F1F1" } }
);

// 详细示例参考 https://gitbrent.github.io/PptxGenJS/docs/api-text/

详细参数(个人总结,有误的话见谅)Text | PptxGenJS

 // 1磅（pt）等于1/72英寸
// 1英寸 = 25.4毫米
 // 1英寸 = 96像素（默认DPI）
 // 1磅(pt) = 1/72英寸 = 96/72像素 = 4/3像素 ≈ 1.333像素
//  pt = px * dpi / 72 (windows默认为96dpi)
 // 以 Windows 下的 96dpi 来计算，1 pt = px * 96/72 = px * 4/3
 if (el.type === 'text') {
            // 3. 调用addText()，在ppt页面中插入文字
            // https://gitbrent.github.io/PptxGenJS/docs/api-text/ -- 官方配置文档
            pptxSlide.addText(el.styles.value, {
              x: el.pathData.left / 128, // x 轴 number / string(百分比)
              y: el.pathData.top / 128, // y 轴 number / string(百分比)
              w: el.pathData.width / 128, // 宽度 number / string(百分比)
              h: el.pathData.height / 128, // 高度 number / string(百分比)
              zIndex: el.zIndex, // 层级
              color: el.styles.color.slice(1), // 字体颜色
              // fill: { color: "F1F1F1" }, //文本框背景填充
              align: el.styles.justifyContent, // 横向位置 left or center or right
              valign:
                el.styles.alignItems === 'start'
                  ? 'top'
                  : el.styles.alignItems === 'center'
                  ? 'middle'
                  : 'bottom', // 垂直位置， top middle bottom
              fontFace: el.styles.fontFamily, // 字体
              fontSize: el.styles.fontSize * 0.75, // 字号 // TODO  需px转字号
              charSpacing: el.styles.letterSpacing * 0.75, // 字符间距 number 1-256
              bold: el.styles.fontWeight === '700', // 是否加粗
              underline: el.styles.textDecoration === 'underline', // 下划线
              // isTextBox: true, // 文字盒子
              autoFit: true, // 自动适应文本框大小
              // baseline: 0, // pptxgen
              // breakLine: false, // 文本中的空格是否自动换行
              strike: el.styles.textDecoration === 'line-through', // dblStrike（双线） or sngStrike（单线） 删除线
              italic: el.styles.fontStyle === 'italic', // 倾斜 Boolean
              // subscript: true, // 下标 
              // superscript: true, // 上标
              // wrap: false, // 文本环绕
              // vert: 文本方向： 属性值 eaVert or horz or mongolianVert or vert or vert270 or wordArtVert or wordArtVertRtl
              // transparency: 透明度 值：0-100
              // softBreakBefore: Boolean 软换行符
              // shadow： 文本阴影 Ex: shadow:{ type:'outer'， angle:180 .. } 详情参考文档 https://gitbrent.github.io/PptxGenJS/docs/api-text/
              // rtlMode: true, // 启用右排文本 // TODO 不知为何未生效
              rotate: el.styles.rotate, // 旋转，0-360
              // rectRadius: 2, // number 圆角半径，单位英寸， 不知道是啥
              // paraSpaceBefore number 段落间距 - 段前，
              // paraSpaceAfter number 段落间距 - 段后，
              // outline: { size: 1.5, color: "FF0000" }, // 文字外边框，有点类似加粗效果
              // margin: 20, // number 0-99, 相当于html的padding
              lineSpacingMultiple: el.styles.lineHeight / 1.25, // 行距-倍数，number， 0-9.99
              // lineSpacing: ((el.styles.lineHeight - el.styles.fontSize) * 4) / 3, //  行距-点数，number， 1-256 单位 磅 
              // line:{ width:'2', color:'A9A9A9' }, // 边框 
              // lang: "zh-TW", // 使用中文等非英文字体时设置此项，默认为 en-US
              // inset: 200, // 不知道是啥 number 1-256 单位：英寸
              // indentLevel: 30, // 缩进 1-32
              // hyperlink: { url: "https://bz.zzzmh.cn/index" },// 超链接,仅会使文字有下划线
              // highlight: "ff5522", // 高亮显示的颜色（文字填充）
              // glow: { size: 10, opacity: 0.75, color: "0088CC" }, // 文字阴影
            });
          }

4.2 添加图片元素 文档地址:Images | PptxGenJS

// 添加网络图片
slide.addImage({ path: "https://upload.wikimedia.org/wikipedia/en/a/a9/Example.jpg" });

// 添加本地图片
slide.addImage({ path: "images/chart_world_peace_near.png" });

//添加base64格式图片
slide.addImage({ data: "image/png;base64,iVtDafDrBF[...]=" });

// 支持png、jpg、gif 等,
// GIF动画：仅在Microsoft 365 / Office365和最新的桌面版本上显示动画，旧版本将仅在演示模式下对其进行动画处理
// SVG 图像：在最新版本的桌面 PowerPoint 或 Microsoft 365/Office365 中受支持
// 读取和编码图像需要 CPU 时间！包含的图像越多，图像越大，消耗的时间就越多。

参数(个人总结,有误的话见谅,详细请参考文档)

if (el.type === 'image') {
            pptxSlide.addImage({
              path: el.url,
              x: el.pathData.left / 128, // x 轴 number / string(百分比)
              y: el.pathData.top / 128, // y 轴 number / string(百分比)
              w: el.pathData.width / 128, // 宽度 number / string(百分比)
              h: el.pathData.height / 128, // 高度 number / string(百分比)
              zIndex: el.zIndex, // 层级
              rotate: el.styles.rotate,
              // altText: '', // string 替代文本值
              // flipH: false, // boolean 水平翻转
              // flipV: false, // boolean 垂直翻转
              rounding: false, // 将图像塑造成圆形
              // hyperlink: { url: "https://bz.zzzmh.cn/index" }, // 超链接
              // placeholder：'', string  图像占位符
              // sizing: 裁剪图片， object {type: 'crop', 'contain' or 'cover', w: number, h: number, x: number, y: number}
              // transparency： 1-100， 透明度
            });
          }

4.3 添加媒体元素Media | PptxGenJS

// 本地路径与网络路径
slide.addMedia({ type: "video", path: "https://example.com/media/sample.mov" });
slide.addMedia({ type: "video", path: "../media/sample.mov" });

// Base64
slide.addMedia({ type: "audio", data: "audio/mp3;base64,iVtDafDrBF[...]=" });

// 在线视频（Microsoft 365支持）
slide.addMedia({ type: "online", link: "https://www.youtube.com/embed/Dph6ynRVyUc" });

//视频支持mpg、mov、mp4、m4v 等;音频支持mp3、wav 等（请参阅 PowerPoint 中支持的视频和音频文件格式:https://support.microsoft.com/en-us/office/video-and-audio-file-formats-supported-in-powerpoint-d8b12450-26db-4c7b-a5c1-593d3418fb59?ui=en-us&rs=en-us&ad=us）

// 可以使用 Microsoft 365/Office 365 查看在线视频（它们可能会在较旧的桌面 PowerPoint 版本上显示错误）
//并非所有平台都支持所有格式！MacOS 可以显示 MPG 文件，而 Windows 可能不会，有些 AVI 文件可能有效，有些可能无效。视频编解码器就是这样奇怪和痛苦的。

参数示例(有误见谅,详情看文档)

          if (el.type === 'video') {
            pptxSlide.addMedia({
              type: 'video',
              path: el.videoUrl,
              x: el.pathData.left / 128, // x 轴 number / string(百分比)
              y: el.pathData.top / 128, // y 轴 number / string(百分比)
              w: el.pathData.width / 128, // 宽度 number / string(百分比)
              h: el.pathData.height / 128, // 高度 number / string(百分比)
              zIndex: el.zIndex, // 层级
              rotate: el.styles.rotate,
              cover: el.imgUrl,
              // cover: 视频封面，base64格式字符串
              // extn：指定媒体文件的扩展名
              // link: 在线视频url链接
            });
          }

4.4 添加形状Shapes | PptxGenJS

支持形状的类型PptxGenJS/types/index.d.ts at master · gitbrent/PptxGenJS · GitHub

// 不带文本的形状
slide.addShape(pres.ShapeType.rect, { fill: { color: "FF0000" } }); // 矩形
slide.addShape(pres.ShapeType.ellipse, { // 椭圆
  fill: { type: "solid", color: "0088CC" },
});
slide.addShape(pres.ShapeType.line, { line: { color: "FF0000", width: 1 } });

// 带文本的形状
slide.addText("ShapeType.rect", {
  shape: pres.ShapeType.rect,
  fill: { color: "FF0000" },
});
slide.addText("ShapeType.ellipse", {
  shape: pres.ShapeType.ellipse,
  fill: { color: "FF0000" },
});
slide.addText("ShapeType.line", {
  shape: pres.ShapeType.line,
  line: { color: "FF0000", width: 1, dashType: "lgDash" },
});

示例(有误见谅)

 if (el.type === 'rect') { // 矩形
            pptxSlide.addShape(
              el.isUse.radius
                ? pres.shapes.ROUNDED_RECTANGLE
                : pres.ShapeType.rect,
              {
                x: el.pathData.left / 128, // x 轴 number / string(百分比)
                y: el.pathData.top / 128, // y 轴 number / string(百分比)
                w: el.pathData.width / 128, // 宽度 number / string(百分比)
                h: el.pathData.height / 128, // 高度 number / string(百分比)
                zIndex: el.zIndex, // 层级
                fill: {
                  color: rgbaToHex(el.styles.backgroundColor)
                    .color.slice(1)
                    .toUpperCase(),
                  transparency:
                    (1 - rgbaToHex(el.styles.backgroundColor).transparency) *
                    100, // 0-100
                },
                align: 'center',
                flipH: false, // boolean 水平翻转
                flipV: false, // boolean 垂直翻转
                // hyperlink: { url: "https://bz.zzzmh.cn/index" }, // 超链接,仅会使文字有下划线

                line: {
                  width: el.styles.border.width * 0.75, // 单位 磅 points
                  color: el.styles.border.color.slice(1).toUpperCase(),
                  dashType:
                    el.styles.border.style === 'solid'
                      ? 'solid'
                      : el.styles.border.style === 'dashed'
                      ? 'sysDot'
                      : 'sysDot', // dashType: dash 虚线, dashDot 虚线点, lgDash--长虚线, lgDashDot-长虚线点, lgDashDotDot--长虚线点点, solid, sysDash-系统虚线 or sysDot 系统点线
                  // beginArrowType: "oval", // 起始箭头，arrow 箭头, diamond 菱形, oval 椭圆, stealth 隐形箭头, triangle 三角 or none
                  // endArrowType: "diamond",// 结束箭头	arrow, diamond, oval, stealth, triangle or none
                }, // width: 1-256
                // shadow: {
                //   type: "outer", // outer 外阴影 or  inner 内阴影 or none
                //   blur: 100, // 模糊度 0-100 磅
                //   angle: 200, // 0-359 旋转度数
                //   offset: 100, // y 0-200 磅
                //   color: "000000",
                //   opacity: ".3", // 透明度
                //   rotateWithShape: true,
                // },

                rotate: el.styles.rotate, // -360 to 360
                rectRadius:
                  convertRangeTo100(
                    el.styles.radius,
                    el.pathData.height,
                    el.pathData.width
                  ) / 100,
              }
            );
          }
if (el.type === 'round') { // 圆
            pptxSlide.addShape(pres.ShapeType.ellipse, {
              x: el.pathData.left / 128, // x 轴 number / string(百分比)
              y: el.pathData.top / 128, // y 轴 number / string(百分比)
              w: el.pathData.width / 128, // 宽度 number / string(百分比)
              h: el.pathData.height / 128, // 高度 number / string(百分比)
              zIndex: el.zIndex, // 层级
              fill: {
                color: rgbaToHex(el.styles.backgroundColor)
                  .color.slice(1)
                  .toUpperCase(),
                transparency:
                  (1 - rgbaToHex(el.styles.backgroundColor).transparency) * 100, // 0-100
              },
              align: 'center',
              flipH: false, // boolean 水平翻转
              flipV: false, // boolean 垂直翻转
              // hyperlink: { url: "https://bz.zzzmh.cn/index" }, // 超链接,会使文字有下划线

              line: {
                width: el.styles.border.width * 0.75, // 单位 磅 points
                color: el.styles.border.color.slice(1).toUpperCase(),
                dashType:
                  el.styles.border.style === 'solid'
                    ? 'solid'
                    : el.styles.border.style === 'dashed'
                    ? 'sysDot'
                    : 'sysDot', // dashType: dash 虚线, dashDot 虚线点, lgDash--长虚线, lgDashDot-长虚线点, lgDashDotDot--长虚线点点, solid, sysDash-系统虚线 or sysDot 系统点线
                // beginArrowType: "oval", // 起始箭头，arrow 箭头, diamond 菱形, oval 椭圆, stealth 隐形箭头, triangle 三角 or none
                // endArrowType: "diamond",// 结束箭头	arrow, diamond, oval, stealth, triangle or none
              }, // width: 1-256
              // shadow: {
              //   type: "outer", // outer 外阴影 or  inner 内阴影 or none
              //   blur: 100, // 模糊度 0-100 磅
              //   angle: 200, // 0-359 旋转度数
              //   offset: 100, // y 0-200 磅
              //   color: "000000",
              //   opacity: ".3", // 透明度
              //   rotateWithShape: true,
              // },

              rotate: el.styles.rotate, // -360 to 360
              rectRadius:
                convertRangeTo100(
                  el.styles.radius,
                  el.pathData.height,
                  el.pathData.width
                ) / 100,
            });
          }
        });

4.5 图表与表格(我没写.详情参考文档)

图表地址:Charts | PptxGenJS

表格地址:Tables | PptxGenJS

4.5.1 图表

let pres = new pptxgen();
let dataChartAreaLine = [
  {
    name: "Actual Sales",
    labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
    values: [1500, 4600, 5156, 3167, 8510, 8009, 6006, 7855, 12102, 12789, 10123, 15121],
  },
  {
    name: "Projected Sales",
    labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
    values: [1000, 2600, 3456, 4567, 5010, 6009, 7006, 8855, 9102, 10789, 11123, 12121],
  },
];

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

4.5.2 表格

// TABLE 1: Single-row table
let rows = [["Cell 1", "Cell 2", "Cell 3"]];
slide.addTable(rows, { w: 9 });

// TABLE 2: Multi-row table
// - each row's array element is an array of cells
let rows = [["A1", "B1", "C1"]];
slide.addTable(rows, { align: "left", fontFace: "Arial" });

// TABLE 3: Formatting at a cell level
// - use this to selectively override the table's cell options
let rows = [
    [
        { text: "Top Lft", options: { align: "left", fontFace: "Arial" } },
        { text: "Top Ctr", options: { align: "center", fontFace: "Verdana" } },
        { text: "Top Rgt", options: { align: "right", fontFace: "Courier" } },
    ],
];
slide.addTable(rows, { w: 9, rowH: 1, align: "left", fontFace: "Arial" });