js导出PPT -- pptxgen使用方法
作者：互联网
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;
})
标签：pptx,pptxgen,--,js,color,slide,ChartType,line,pres 来源： https://blog.csdn.net/weixin_42412237/article/details/114530819