前端关于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/3if (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 rightvalign:el.styles.alignItems === 'start'? 'top': el.styles.alignItems === 'center'? 'middle': 'bottom', // 垂直位置， top middle bottomfontFace: el.styles.fontFamily, // 字体fontSize: el.styles.fontSize * 0.75, // 字号 // TODO  需px转字号charSpacing: el.styles.letterSpacing * 0.75, // 字符间距 number 1-256bold: 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的paddinglineSpacingMultiple: 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, // 单位 磅 pointscolor: 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 360rectRadius: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, // 单位 磅 pointscolor: 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 360rectRadius: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" });