登录 - 注册 您好!欢迎来到聊城市宜购网络科技有限公司!
18963548078
技术文档
js导出PPT -- pptxgen使用方法
发表日期:2022-10-23

官方网站
https://gitbrent.github.io/PptxGenJS/
下载地址

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

2. 设置

创建PPT

let pres = new PptxGenJS();1

属性设置

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

版面布局设置

pres.layout = 'LAYOUT_NAME';1
LAYOUT_NAMEDefaultLAYOUT SLIDE SIZE
LAYOUT_16x9Yes10 x 5.625 inches
LAYOUT_16x10No10 x 6.25 inches
LAYOUT_4x3No10 x 7.5 inches
LAYOUT_WIDENo13.3 x 7.5 inches

自定义版面

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

添加一张幻灯片

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

填充背景

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

设置默认字体色

slide.color = "696969";1

图表

// 图形数据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});12345678910111213141516

单类型图支持:
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});1
slide.adImage({data:"image/png;base64,iVtDafDrBF[...]"});1

添加媒体(待实践)

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

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"});123

视频支持 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'(虚线)12345678

表格

简单添加表格

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"});12

添加文本

简单添加

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);123

导出

导出下载PPT

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

导出后打印

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

一次性导出多个

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

简单例子

 // 下載提交 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;        })123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869


上一篇: shapetype形状类型手册 下一篇: (个人)注册公众平台步骤