PptxGenJS-Demo

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

by pulipuli

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.5/jszip.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/gitbrent/pptxgenjs@latest/dist/pptxgen.min.js"></script>
<div class="container py-3">
  <h1 class="text-primary font-weight-light">PptxGenJS Demo</h1>
  <h5 class="text-secondary font-weight-light">Generate PowerPoint from JavaScript</h5>
  <h6 class="bg-white border p-3 my-5">
    <p>Generate a "Hello World" presentation on any modern desktop or mobile browser.</p>
    <button type="button" class="btn btn-primary px-5" onclick="doDemo()">
      Generate Demo PowerPoint
    </button>
  </h6>

  <div class="mt-5">
    <small>
      GitHub Home2
      <a class="pl-1" href="https://github.com/gitbrent/PptxGenJS/">PptxGenJS</a>
    </small>
  </div>
</div>

CSS

body {
  background: var(--light);
}

JavaScript

let pptx = new PptxGenJS();
$('small').before('<code class="d-block text-black-50 mb-3">(pptxgenjs version: ' + pptx.version + ')</code>');

// Simple Slide
window.doDemo = function do7cells() {
  let pptx = new PptxGenJS();
  
  pptx.defineSlideMaster({
 title: "標題投影片",
 background: { color: "FFFFFF" },
 objects: [
  { line: { x: 3.5, y: 1.0, w: 6.0, line: { color: "0088CC", width: 5 } } },
  { rect: { x: 0.0, y: 5.3, w: "100%", h: 0.75, fill: { color: "F1F1F1" } } },
  { text: { text: "Status Report", options: { x: 3.0, y: 5.3, w: 5.5, h: 0.75 } } },
  { image: { x: 11.3, y: 6.4, w: 1.67, h: 0.75, path: "images/logo.png" } },
 ],
 slideNumber: { x: 0.3, y: "90%" },
});
  
  let slide = pptx.addSlide({ masterName: "標題投影片" });
  let opts = {
    x: 0.0,
    y: 0.25,
    w: '100%',
    h: 1.5,
    align: 'center',
    fontSize: 24,
    color: '0088CC',
    fill: 'F1F1F1'
  };
  slide.addText(
    'BONJOUR - CIAO - GUTEN TAG - HELLO - HOLA - NAMASTE - OLÀ - ZDRAS-TVUY-TE - こんにちは - 你好',
    //opts
  );
  slide.addText(
    'content1',
    //opts
  );
  slide.addText(
    'content2',
    //opts
  );
  pptx.writeFile();
}