Skip to content

Commit c26228e

Browse files
PIKACHUIMPIKACHUIM
committed
add(pptxjs): support PPTX file preview
1 parent 78a7b39 commit c26228e

17 files changed

Lines changed: 16924 additions & 0 deletions

‎ppt.js/LICENSE‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2017 meshesha
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎ppt.js/README.md‎

Lines changed: 175 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,175 @@
1+
PPTXjs
2+
==========
3+
[![MIT License][license-image]][license-url]
4+
5+
[license-image]: http://img.shields.io/badge/license-MIT-blue.svg?style=flat
6+
[license-url]: LICENSE
7+
8+
### jQuery plugin for convertation pptx to html using pure javascript.
9+
### Demo: https://pptx.js.org/pages/demos.html
10+
11+
# environment
12+
### browsers:
13+
- IE11
14+
- Edge
15+
- FireFox
16+
- chrome
17+
### Support:
18+
----
19+
* Text
20+
* Font size
21+
* Font family
22+
* Font style: bold, italic, underline, stoke
23+
* Color
24+
* hyperlink
25+
* bullets (include numeric)
26+
* Text block (convert to Div)
27+
* Align (Horizontal and Vertical)
28+
* Background color (single color)
29+
* Border (borderColor, borderWidth, borderType, strokeDasharray)
30+
* Shapes (support most of shapes)
31+
* Background color (single color, gradient colors)
32+
* Background image
33+
* Rotations
34+
* Align
35+
* Border
36+
* Custom shape
37+
* Media
38+
* Picture (jpg/jpeg,png,gif,svg)
39+
* Video (html5 video player: mp4,ogg,WebM)
40+
* IE:MP4.
41+
* Chrome:MP4, WebM,Ogg.
42+
* Firefox:MP4,WebM,Ogg.
43+
* YouTube (v1.11.0)
44+
* vimeo (v1.11.0)
45+
* Audio (html5 audio player:mp3,ogg,Wav)
46+
* IE:mp3.
47+
* Chrome:mp3,Wav,Ogg.
48+
* Firefox:mp3,Wav,Ogg
49+
* Graph
50+
* Bar chart
51+
* Line chart
52+
* Pie chart
53+
* Scatter chart
54+
* SmartArt diagrams
55+
* Tables
56+
* Custom table
57+
* Theme table
58+
* Theme
59+
* Equations and formulas
60+
* display Equations and formulas as image
61+
* and more ...
62+
63+
### usage:
64+
----
65+
include necessary css files:
66+
```
67+
<link rel="stylesheet" href="./css/pptxjs.css">
68+
<link rel="stylesheet" href="./css/nv.d3.min.css"> <!-- for charts graphs -->
69+
```
70+
include necessary js files:
71+
```
72+
<script type="text/javascript" src="./js/jquery-1.11.3.min.js"></script>
73+
<script type="text/javascript" src="./js/jszip.min.js"></script> <!-- v2.. , NOT v.3.. -->
74+
<script type="text/javascript" src="./js/filereader.js"></script> <!--https://github.com/meshesha/filereader.js -->
75+
<script type="text/javascript" src="./js/d3.min.js"></script> <!-- for charts graphs -->
76+
<script type="text/javascript" src="./js/nv.d3.min.js"></script> <!-- for charts graphs -->
77+
<script type="text/javascript" src="./js/dingbat.js"></script> <!--for bullets -->
78+
<script type="text/javascript" src="./js/pptxjs.js"></script>
79+
<script type="text/javascript" src="./js/divs2slides.js"></script> <!-- for slide show -->
80+
```
81+
html body :
82+
```
83+
...
84+
<div id="your_div_id_result"></div>
85+
optional:
86+
<input id="upload_pptx_fiile" type="file" />
87+
...
88+
```
89+
add javascript:
90+
```
91+
<script type="text/javascript">
92+
$("#your_div_id_result").pptxToHtml({
93+
pptxFileUrl: "path/to/yore_pptx_file.pptx",
94+
fileInputId: "upload_pptx_fiile",
95+
slidesScale: "", //Change Slides scale by percent
96+
slideMode: false,
97+
keyBoardShortCut: false,
98+
mediaProcess: true, /** true,false: if true then process video and audio files */
99+
jsZipV2: "./js/jszip.min.js", /*flase or 'path/to/jsZip.V2.js' */
100+
themeProcess: true, /*true (default) , false, "colorsAndImageOnly"*/
101+
incSlide:{height: 2,width:2 }, /*increase height or/and width by 2 px*/
102+
slideType: "divs2slidesjs", /*'divs2slidesjs' (default) , 'revealjs'(https://revealjs.com)
103+
slideModeConfig: { //divs2slidesjs - on slide mode (slideMode: true)
104+
first: 1,
105+
nav: false, /** true,false : show or not nav buttons*/
106+
navTxtColor: "white", /** color */
107+
showPlayPauseBtn: false,/** true,false */
108+
keyBoardShortCut: false, /** true,false */
109+
showSlideNum: false, /** true,false */
110+
showTotalSlideNum: false, /** true,false */
111+
autoSlide: false, /** false or seconds (the pause time between slides) , F8 to active(keyBoardShortCut: true) */
112+
randomAutoSlide: false, /** true,false ,autoSlide:true */
113+
loop: false, /** true,false */
114+
background: "black", /** false or color*/
115+
transition: "default", /** transition type: "slid","fade","default","random" , to show transition efects :transitionTime > 0.5 */
116+
transitionTime: 1 /** transition time in seconds */
117+
},
118+
revealjsConfig: { /* for 'revealjs' settings (https://revealjs.com) */
119+
transition: 'zoom',
120+
// backgroundTransition: 'zoom',
121+
// autoSlide: 5000,
122+
// loop: true
123+
slideNumber: true
124+
}
125+
});
126+
</script>
127+
```
128+
# Changelog
129+
* v1.21.1
130+
* fixed issues:
131+
- [#16](https://github.com/meshesha/PPTXjs/issues/16)
132+
133+
* v1.21.00
134+
* add theme (background) support
135+
* improved tables
136+
* improved bullets (add ./js/dingbat.js)
137+
* fixed issues:
138+
- [#5](https://github.com/meshesha/PPTXjs/issues/5)
139+
- [#7](https://github.com/meshesha/PPTXjs/issues/7)
140+
- [#8](https://github.com/meshesha/PPTXjs/issues/8)
141+
- [#9](https://github.com/meshesha/PPTXjs/issues/9)
142+
- [#10](https://github.com/meshesha/PPTXjs/issues/10)
143+
- [#11](https://github.com/meshesha/PPTXjs/issues/11)
144+
- [#13](https://github.com/meshesha/PPTXjs/issues/13)
145+
- [#15](https://github.com/meshesha/PPTXjs/issues/15)
146+
* more documentation coming soon ...
147+
148+
* v1.11.0
149+
* Support for embedding video from a link (tested youtube and vimeo links)
150+
* support 'revealjs'(https://revealjs.com) (It is not recommended to add a theme because it distorts some of the elements like tables )
151+
* I think i fix issue [officetohtml/issues/7](https://github.com/meshesha/officetohtml/issues/7) (not tested)
152+
* Change loading view
153+
* Fix center slides in fullscreen mode - (https://github.com/meshesha/divs2slides v1.3.3)
154+
* Support emf and wmf files - microsoft files, supported only in Internet Explorer (test in IE11)
155+
156+
* V.1.10.4
157+
* fixed security issue : [#3](https://github.com/meshesha/PPTXjs/issues/3)
158+
159+
* V.1.10.3
160+
* new divs2slides (v.1.3.2)
161+
* fixed div width issue
162+
* V.1.10.2
163+
* new divs2slides v.1.3.1
164+
* fixed some issues
165+
* V.1.10.0
166+
* added the ability to load jsZip v.2 in case jsZip v.3 is loaded for another use.
167+
* (note: using this method will reload the page)
168+
* and fixed some errors issue.
169+
* V.1.9.3
170+
* support Equations and formulas as Image
171+
* Added an ability to scale Slides in percent
172+
* and fixed background color issue.
173+
# License
174+
- Copyright © 2017 Meshesha
175+
- MIT

‎ppt.js/css/nv.d3.min.css‎

Lines changed: 2 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎ppt.js/css/pptxjs.css‎

Lines changed: 161 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,161 @@
1+
2+
3+
.slide {
4+
position: relative;
5+
border: 1px solid #333;
6+
border-radius: 10px;
7+
overflow: hidden;
8+
margin-bottom: 50px;
9+
margin-left: auto;
10+
margin-right: auto;
11+
}
12+
13+
.slide div.block {
14+
position: absolute;
15+
top: 0px;
16+
left: 0px;
17+
width: 100%;
18+
line-height: 1;
19+
}
20+
21+
.slide div.content {
22+
display: flex;
23+
flex-direction: column;
24+
}
25+
.slide div.diagram-content{
26+
display: flex;
27+
flex-direction: column;
28+
}
29+
30+
.slide div.content-rtl {
31+
display: flex;
32+
flex-direction: column;
33+
direction: rtl;
34+
}
35+
.slide .pregraph-rtl{
36+
direction: rtl;
37+
}
38+
.slide .pregraph-ltr{
39+
direction: ltr;
40+
}
41+
.slide .pregraph-inherit{
42+
direction: inherit;
43+
}
44+
.slide .slide-prgrph{
45+
width: 100%;
46+
/* overflow-wrap:break-word;
47+
word-wrap: break-word; */
48+
49+
/* word-break: break-word; */
50+
/* unicode-bidi: bidi-override; */
51+
/* hyphens: auto;
52+
overflow-wrap: break-word; */
53+
54+
}
55+
56+
.slide .line-break-br::before{
57+
content: "\A";
58+
white-space: pre;
59+
}
60+
.slide div.v-up {
61+
justify-content: flex-start;
62+
}
63+
.slide div.v-mid {
64+
justify-content: center;
65+
}
66+
.slide div.v-down {
67+
justify-content: flex-end;
68+
}
69+
70+
.slide div.h-left {
71+
justify-content: flex-start;
72+
align-items: flex-start;
73+
text-align: left;
74+
}
75+
.slide div.h-left-rtl {
76+
justify-content: flex-end;
77+
align-items: flex-end;
78+
text-align: left;
79+
}
80+
.slide div.h-mid {
81+
justify-content: center;
82+
align-items: center;
83+
text-align: center;
84+
}
85+
.slide div.h-right {
86+
justify-content: flex-end;
87+
align-items: flex-end;
88+
text-align: right;
89+
}
90+
.slide div.h-right-rtl {
91+
justify-content: flex-start;
92+
align-items: flex-start;
93+
text-align: right;
94+
}
95+
96+
.slide div.h-just,
97+
.slide div.h-dist {
98+
text-align: justify;
99+
}
100+
101+
102+
.slide div.up-left {
103+
justify-content: flex-start;
104+
align-items: flex-start;
105+
text-align: left;
106+
}
107+
.slide div.up-center {
108+
justify-content: flex-start;
109+
align-items: center;
110+
}
111+
.slide div.up-right {
112+
justify-content: flex-start;
113+
align-items: flex-end;
114+
}
115+
.slide div.center-left {
116+
justify-content: center;
117+
align-items: flex-start;
118+
text-align: left;
119+
}
120+
.slide div.center-center {
121+
justify-content: center;
122+
align-items: center;
123+
}
124+
.slide div.center-right {
125+
justify-content: center;
126+
align-items: flex-end;
127+
}
128+
.slide div.down-left {
129+
justify-content: flex-end;
130+
align-items: flex-start;
131+
text-align: left;
132+
}
133+
.slide div.down-center {
134+
justify-content: flex-end;
135+
align-items: center;
136+
}
137+
.slide div.down-right {
138+
justify-content: flex-end;
139+
align-items: flex-end;
140+
}
141+
142+
143+
.slide li.slide {
144+
margin: 10px 0px;
145+
font-size: 18px;
146+
}
147+
148+
.slide table {
149+
position: absolute;
150+
}
151+
152+
.slide svg.drawing {
153+
position: absolute;
154+
overflow: visible;
155+
}
156+
/*
157+
#pptx-thumb {
158+
min-width: 240px;
159+
height: 180px;
160+
}
161+
*/

0 commit comments

Comments
 (0)