PptxGenJS-Demo

Home: https://github.com/gitbrent/PptxGenJS/

by Brent Ely

HTML

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.min.js"></script>
<script src="https://rawgit.com/gitbrent/PptxGenJS/master/dist/pptxgen.js"></script>
<h1>PptxGenJS - Demo</h1>
<h3>Generate PowerPoint from JavaScript</h3>
<div id="checks">Library Check:<br>==============<br></div>

<button id="btnDemo" type="button" onclick="doDemo()">Generate Demo PowerPoint</button>
<div id="console"></div>

<div style="margin-top:50px; font-size:.75em">
	<a href="https://github.com/gitbrent/PptxGenJS/">PptxGenJS Project</a>
</div>

CSS

body { font-family:'Helvetica','Arial'; }
#checks {
	margin: 10px 0; padding:5px;
	background: #fffccc;
	font-family: monospace;
}
#btnDemo {
    font-family: Arial,Verdana,sans-serif;
    font-size: 12px !important;
    color: #ffffff !important;
	background-color: #3498DB;
    border: 0 !important;
    padding: 8px 30px;
    margin: 10px 0;
    white-space: nowrap;
    text-decoration: none;
    text-transform: uppercase;
    border-radius: 4px;
    box-sizing: border-box;
    cursor: pointer;
}

JavaScript

// Lets make sure were setup correctly
$('#checks').append('<div>jQuery... = pass</div>');
$('#checks').append('<div>jszip.... = '+ (typeof JSZip || 'fail') +'</div>');
$('#checks').append('<div>FileSaver = '+ (typeof saveAs || 'fail') +'</div>');
$('#checks').append('<div>PptxGenJS = '+ (typeof PptxGenJS || 'fail') +'</div>');
var pptx = new PptxGenJS();
$('#checks').append('<div>PptxGenJS version: '+ pptx.getVersion() +'</div>');

// Simple Slide
window.doDemo = function do7cells() {
	var pptx = new PptxGenJS();
	var slide = pptx.addNewSlide();
	var opts = { x:1.0, y:1.0, font_size:42, color:'00FF00' };
	slide.addText('Hello World!', opts);
	pptx.save();
}