pptxgen使用方法

下载地址

https://codechina.csdn.net/mirrors/gitbrent/PptxGenJS?utm_source=csdn_github_accelerator ## 1. 文件引入

<script src="../js/pptxgen.bundle.js"></script>
<script src="../js/jszip.min.js"></script>
<script src="../js/pptxgen.min.js"></script>

2. 设置

创建PPT

let pres = new PptxGenJS();

属性设置

pres.author = '作者';
pres.company = '公司';
pres.revision = '1';
pres.subject = 'subject';
pres.title = 'title';

版面布局设置

pres.layout = 'LAYOUT_NAME';

LAYOUT_NAME	Default	LAYOUT SLIDE SIZE
LAYOUT_16x9	Yes	10 x 5.625 inches
LAYOUT_16x10	No	10 x 6.25 inches
LAYOUT_4x3	No	10 x 7.5 inches
LAYOUT_WIDE	No	13.3 x 7.5 inches

自定义版面

pres.defineLayout({name:'A3',width:26.5,height:11.7});//设置名字 宽 高
pres.layout = 'A3';//应用

添加一张幻灯片

// 添加一张
let slide = pres.addSlide(); //let slide = pres.addSlide("MASTER_NAME");
// 新加一张
slide = pres.addSlide();

填充背景

// 纯色
slide.background = {fill:"F1F1F1"};
// 填充背景图片
slide.background = {path:"a.png"};
slide.background = {data:"image/png;base64,ABC[...]123"};// image:base64 data

设置默认字体色

slide.color = "696969";

图表

// 图形数据
let dataChartAreaLine = [{name:"Actual Sales",labels:["Jan", "Feb","Mar","Apr"],values:[1500,4600,5156,3176]},{name:"Projected Sales",labels:["Jan", "Feb","Mar","Apr"],values:[1000,2600,4156,5176]}
];// 折线图设置 x,y:定位;w,h:宽高
slide.addChart(pres.ChartType.line, dataChartAreaLine, {x:1,y:1,w:8,h:4});

单类型图支持：
pres.ChartType.line
pres.ChartType.area
pres.ChartType.bar
pres.ChartType.bar3d
pres.ChartType.bubble
pres.ChartType.doughnut
pres.ChartType.line
pres.ChartType.pie
pres.ChartType.radar
pres.ChartType.scatter

图片添加

slide.addImage([远程/本地]路径,x,y,宽,高) x,y,w,h 类型:string,number（‘n%’）

slide.addImage({path:"a.png",x:0.1,y:0.2,w:10,h:5}).addImage({path:"b.png",x:5,y:3});

slide.adImage({data:"image/png;base64,iVtDafDrBF[...]"});

添加媒体（待实践）

允许添加音频，视频，在线视频

slide.addMedia({type:"video",path:"[绝对/相对路径]"})
slide.addMedia({type:"audio",data:"audio/mp3;base64,iVtDafDrBF[...]="});
slide.addMedia({type:"online",link:"https://www.youtube.com/embed/Dph6ynRVyUc"});

视频支持 mpg, mov, mp4, m4v,等

音频支持 mp3, wav,等

添加图形shapes（待实践）

几乎200种类型可以添加到PPT中

// 无文字
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", {x:0,y:0,w:1,h:1,shape:pres.ShapeType.rect,fill:{color:"FF0000"}});//矩形加文字
slide.addText("ShapeType.ellipse", {x:0,y:3,w:1,h:1,shape:pres.ShapeType.ellipse,fill:{type:"solid",color:"0088CC"}});//圆形加文字
slide.addText("ShapeType.line", {x:0,y:6,w:1,h:1,shape:pres.ShapeType.line,line:{color:"FF0000",width:1,dashType:'lgDash'}});//实/虚线加文字   dashType:'lgDash'(虚线)

表格

简单添加表格

let rows = [["Cell 1", "Cell 2", "Cell 3"],["Cell 21", "Cell 22", "Cell 23"]];
slide.addTable(rows,{w:"100%",rowH:1,align:"left",fontFace:"Arial"});

添加文本

简单添加

let textboxText = "Hello";
let textboxOpts = {x:0,y:0,w:10,h:1,fontFace:"Courier",fontSize:36,color:"000000",fill:{color:"CC0101"},align:'center'};
slide.addText(textboxText, textboxOpts);

导出

导出下载PPT

pres.writeFile("Chart.pptx");//可省略()中文件名

导出后打印

pres.writeFile("YieldChart.pptx").then(fileName=>{console.log(`created file:${fileName}`);});

一次性导出多个

pres = new PptxGenJS();
pres.writeFile("YieldChart1.pptx");
pres = new PptxGenJS();
pres.writeFile("YieldChart2.pptx");

简单例子

 // 下載提交 PPT$("#downppt").click(function(){let pptx = new PptxGenJS();slide = pptx.addSlide({sectionTitle:'Charts'});slide.fontSize = 8;var optsChartLine1 = {x:0, y:0, w:'100%', h:'70%',fill: 'F2F9FC',// 图背景色valAxisMaxVal: 100,// 设置y轴最大值lineDataSymbolSize:5,// 设置节点大小valGridLine: {style:'dash'},// 辅助横向线条showLabel:false, //显示数据标签dataLabelPosition     : 'tr', // Options: 't'|'b'|'l'|'r'|'ctr'dataLabelFormatScatter: 'custom', // Can be set to `custom` (default), `customXY`, or `XY`showValue:false,// 展示节点数值 //节点上右键->资料标签->资料标签格式->数字->类别->数字// lineSmooth:true,//是否平滑线条// chartColors: ['0088CC'],//设置线条颜色title:'折线图1标题',showTitle:true,titleFontFace:'Calibri',titleFontSize:'12',titleAlign: 'right',titlePos:{x:10,y:10},showLegend: true,// 图例legendPos : 'tr', //图例位置legendFontFace:'Calibri',legendFontSize:'10',lineSize:2,//线条粗};var optsChartLine2 = {x:0, y:0, w:'100%', h:'70%',fill: 'F2F9FC',// 图背景色lineDataSymbolSize:5,// 设置节点大小valGridLine: {style:'dash'},// 辅助横向线条title:'折线图2标题',showTitle:true,titleFontFace:'Calibri',titleFontSize:'12',titleAlign: 'right',titlePos:{x:10,y:10},showLegend: true,// 图例legendPos : 'tr', //图例位置legendFontFace:'Calibri',legendFontSize:'10',lineSize:2,//线条粗};// 加折线图slide.addChart( pptx.ChartType.line, chart1ppt, optsChartLine1 );// 添加一个正方形// slide.addShape(pptx.ShapeType.rect, {fill:{color:"FF0000"}});if(typeof(table1ppt)!=="undefined" && table1ppt!=='' && !isEmpty(table1ppt)){slide.addTable(table1ppt, {x:0,y:4,w:10,fontSize:'10',fontFace:'Calibri', border:{pt:'1', color:'BBCCDD'}});}if(typeof(chart2ppt)!=="undefined" && chart2ppt!=='' && !isEmpty(chart2ppt)){slide = pptx.addSlide();slide.addChart( pptx.ChartType.line, chart2ppt, optsChartLine2 );}pptx.writeFile("Yield.pptx");return false;})

js导出PPT -- pptxgen使用方法相关推荐

js 导出excel,设置下载的标题
在网上找到了js导出为excel的方法,可就是找不到如何修改导出的excel标题的方式,找到了如下的网站: 参考国外的网站:http://stackoverflow.com/questions/171 ...
四种利用js导出Excel的方法（兼容IE6+、主流浏览器、支持复杂表头和合并单元格）
因为项目需求变更,最后决定使用做JS导出Excel,网上看了很多的帖子和例子,很多的例子并不能满足需求( 处理复杂表头,兼容主流浏览器,兼容IE等等).所以,自己找了几个比较不错的例子,在其基础上结合 ...
居然可以用 js 写 PPT？
居然可以用 js 写 PPT 用powerpoint或者keynote写演示文稿,对于代码.数学公式等的支持一直是个痛点.而且对于前端同学来说,一身的css功力用不上也是个痛点.对于使用markdow ...
JS导出PDF插件（支持中文、图片使用路径）
JS导出PDF插件(支持中文.图片使用路径) 原文:JS导出PDF插件(支持中文.图片使用路径) 在WEB上想做一个导出PDF的功能,发现jsPDF比较多人推荐,遗憾的是不支持中文,最后找到pdfma ...
js导出的xlsx无法打开_js-xlsx实现文件导出、下载（excel）
记录一下近期使用js-xlsx的一些经验真正的.xls\.xlsx文件,就算是空白的其实是包含了一些内容的所以并不能直接像写入txt一样直接搞一个file往里面把数据写入就完了现在网上查得到导出 ...
面试官问：能否模拟实现JS的call和apply方法
写于2018年11月30日,发布在掘金上阅读量近一万,现在发布到微信公众号申明原创.相对比较基础的知识,虽然日常开发可能用得比较少,各种源码中有很多call和apply,需要掌握. 前言这是面试官问 ...
通过javascript获取sharepoint数据，使用JS导出Excel
通过网页将数据导出到Excel是常见需求,使用服务器端导出,开发周期长,部署麻烦.这里推荐一种客户端导出方法. 客户端导出与Sharepoint无关.这里附带使用场景基于SP,因为SP自带的导出功能比 ...
java中使用poi导出ppt（图片和表格）
java使用POI导出PPT(超简单方法,包含图片和表格) 在做项目中遇到一个需求,将职员的信息导出成一个形式固定的ppt文档,poi有许多方法可以实现,因为我是一名Java小白,于是便想用最简单的方 ...
纯前端JS导出Word包含图片
纯前端JS导出Word包含图片纯前端JS导出Word文档包含图片 Word导出方式依赖实现代码纯前端JS导出Word文档包含图片在做项目中,遇到一个需求,是将后台返回的属性以及URL图片导出 ...

js导出PPT -- pptxgen使用方法