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_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';//应用

添加一张幻灯片

// 添加一张
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;})


---------------------
作者:糟糕的沙漠
来源:CSDN
原文:https://blog.csdn.net/weixin_42412237/article/details/114530819
版权声明:本文为作者原创文章,转载请附上博文链接!
内容解析By:CSDN,CNBLOG博客文章一键转载插件

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/283376.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

记录最近的一些遇到的前端面试题

HTML部分&#xff1a;1.问&#xff1a;DOCTYPE是什么。 答&#xff1a;查看w3school的详细解释http://www.w3school.com.cn/ta...&#xff1a;DTD, SGML) 2.问&#xff1a;有哪些行内元素、有哪些块级元素。margin属性是否对行内元素有所作用。 答&#xff1a;块级元素常用的有…

【mysql】mysql优化

一&#xff0c;表设计   1.1. E-R&#xff08;entity relation&#xff09;实体关系图     长方形 实体 表     椭圆形 属性 字段     菱形 关系 一对一 多对一 属于 多对多   1.2. 三范式标准     原子性       个人信息       省市县乡镇  …

3d数学基础图形与游戏开发 英文版_1850款文字标题字幕条,AE图形预设包,logo生成神器...

2019最新1850款组文字LOGO动画预设&#xff0c;一键生成&#xff01;包含图形元素/字幕/logo/动画转场/背景等所有的元素都支持AE和PR所有元素的颜色、位置、大小、文字、Logo等都可以修改&#xff0c;包含GIF动图预览&#xff0c;方便查找使用&#xff0c;一键生成狂拽炫酷屌炸…

什么?WPF 不支持 SVG ?

什么&#xff1f;WPF 不支持 SVG &#xff1f;控件名&#xff1a;SharpVectors作者&#xff1a;Elinam LLC (Japan)项目地址&#xff1a; https://github.com/ElinamLLC/SharpVectors什么是SVG&#xff1f;SVG 指可伸缩矢量图形 (Scalable Vector Graphics)&#xff1b;SVG 用…

Vue实现pptx在线预览

PPTX在线预览&#xff0c;使用jquery的插件《PPTXjs》&#xff0c;纯前端实现pptx转html进行展示 1.在PPTXjs官网下载插件&#xff0c;并在index.html内引入 <link rel"stylesheet" href"/PPTXjs/css/pptxjs.css"> <link rel"stylesheet&quo…

手写数字识别

深度学习:一、感知器S型神经元sigmoid fuction:1/(1exp(-z)) ![image](https://yqfile.alicdn.com/2e0144aba1df89e4ad5437e51aa21abc052025e5.png)二、神经网路这是一个三层神经网络输入层 隐藏层 输出层三、手写数字识别神经网络一共四层神经网络&#xff0c;第一层是以28*28…

5.1 入门整合案例(SpringBoot+Spring-data-elasticsearch) ---- good

本节讲解SpringBoot与Spring-data-elasticsearch整合的入门案例。 一、环境搭建 新建maven项目&#xff0c;名字随意 pom.xml <parent> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-parent</artifactId> <…

小组是什么意思_生猪期货什么时候上市?相关企业如何参与生猪期货

2020年4月生猪期货已获中国证监会批准&#xff0c;7月份大连商品交易所开展生猪期货仿真交易&#xff0c;这个期待许久的新品种上市脚步声越来越近&#xff0c;而市场各方的关注度也日益提升。同时&#xff0c;期货公司也在积极备战&#xff0c;为需要申请交割库的实体企业提供…

iNeuOS工业互联网操作系统,在航天和军工测控领域的应用

目 录1. 行业概述... 22. 解决方案... 23. 解决的痛点... 61. 行业概述现在国际形势异常严峻&#xff0c;加大了偶发武装斗争的可能性。航天和军工领域的数字化转型和建设正在积极推进&#xff0c;在与航天二院、航天三院、航天六院、航天九院、无线电厂…

[vite] Failed to load source map for */*.css|.js

打开提示的文件&#xff0c;删除 “sourceMappingURL”这一行即可

《工具癖》Mac与Windows获取文件绝对路径的快捷键

对于开发者而言, 快速获取文件的绝对路径,是一件很提升效率的事情, 一般的做法是,右键... 其实是有快捷键的! Mac获取文件绝对路径 mac的快捷键为: commandoptioncWindows获取文件绝对路径 按住shift键, 右键, 会出现复制为路径的选项

PerfView专题 (第九篇):洞察 C# 中的 LOH 内存碎片化

一&#xff1a;背景 在 内存泄漏 的系列问题中&#xff0c;有一类问题是 内存碎片化 导致的&#xff0c;而且这种更容易发生在 LOH 上&#xff0c;因为它默认不开启 对象压缩&#xff0c;一般遇到这种情况&#xff0c;优先让朋友执行下面的代码应急。GCSettings.LargeObjectHea…

HSV色彩空间

转自原文 HSV色彩空间 理解HSV色彩空间&#xff1a; HSV颜色模式是除了RGB颜色模式之外的另一种流行的颜色模式&#xff0c;RGB被广泛运用于计算机中&#xff0c;而HSV则用在电视显示方面。它更符合人们对颜色的描述(什么颜色(H)&#xff0c;深浅度如何(S)&#xff0c;亮度如…

Linux之tomcat日志管理

tomcat 的日志输出catalina.out&#xff0c;变大&#xff0c;可使用下面方式解决。 cronolog. http://blog.csdn.net/huang_xw/article/details/6194232转载于:https://www.cnblogs.com/itdev/p/6103207.html

java随机抽题系统_为什么要使用考试系统的随机组卷功能?

一个考试系统的组卷灵活性&#xff0c;不仅仅在于其题型丰富、设置参数齐全&#xff0c;也在于抽题组卷方式。除了平时我们严肃性的固定题目出卷方式&#xff0c;我们往往也考虑到需要随机组卷的功能。为什么用户会需要随机组卷的功能呢&#xff1f;随机组卷功能有什么用处&…

vue 项目中 splice 删除的不是指定的位置 而是最后一个

问题 就是v-for选择里面 删除数组指定元素 结果splice删除的永远都是最后一个 //html <view class"card ml20 mr20 mt20 c-row"><view class"flex-cover time-main" v-for"(item,index) in tabbar" :key"index"><scr…

常用的git命令

GIT 什么是git 是一个源代码管理工具在一个项目中&#xff0c;凡是由开发人员编写的都是源代码源代码有必要被管理起来吗让源代码可以被追溯&#xff0c;主要记录每次变了什么&#xff0c;谁主导这次变化人为的维护比较麻烦GIT是Linux之父当年为了维护管理Linux源代码写的一个工…

frameset在html5下用什么代替_速速围观!冬至吃货地图来啦~蚌埠的吃货们,你们今天吃什么?...

中国传统二十四节日冬农历十一月初七至冬至&#xff0c;又称日短至、冬节、亚岁等&#xff0c;兼具自然与人文两大内涵&#xff0c;既是二十四节气中一个重要的节气&#xff0c;也是中国民间的传统节日&#xff0c;被视为冬季的大节日。我们迎来了冬至节气&#xff0c;真正的隆…

WinForm(九)UI加载“大”数据

由于WinForm的UI是绘制的&#xff0c;所以在加载大量数据数据时会有一定的延时&#xff0c;本篇就讨论几个减少延时的方法。在加载有规律数据时&#xff0c;可以考虑用递归&#xff0c;简单方便快捷来加载数据&#xff0c;如下&#xff0c;把一个文件夹下的所有文件或文件夹加载…

QuillEditor 图片添加缩放功能

安装插件 npm install --save quill-blot-formatter 使用&#xff1a; 添加 :modules"modules" <template><QuillEditorref"refEditor"theme"snow":toolbar"toolbarOptions"contentType"html"enable:content…