PptxGenJS-Demo

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

by Brent Ely

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/gh/gitbrent/pptxgenjs/dist/pptxgen.bundle.js"></script>
<div class="container bg-light py-3">
  <h1 class="text-primary fw-light">PptxGenJS Demo</h1>
  <h5 class="text-secondary fw-light">Generate PowerPoint from JavaScript</h5>
  <h6 class="bg-white border p-3 mb-4">
    <p>Generate a "Hello World" presentation on any modern desktop or mobile browser.</p>
    <button type="button" class="btn btn-primary" onclick="doDemo()">
      Generate Demo PowerPoint
    </button>
  </h6>

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

CSS

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

JavaScript

let pptx = new PptxGenJS()

document.querySelectorAll("small").forEach((smallEl) => {
  const code = document.createElement("code")
  code.className = "d-block text-black-50 mb-3"
  code.textContent = `(pptxgenjs version: ${pptx.version})`
  smallEl.parentNode.insertBefore(code, smallEl)
})

// Simple Slide
window.doDemo = function do7cells() {
  let pptx = new PptxGenJS()
  let slide = pptx.addSlide()
  let opts = {
    x: 0.0,
    y: 0.25,
    w: "100%",
    h: 1.5,
    align: "center",
    fontSize: 24,
  }
  slide.addText(
    "BONJOUR - CIAO - GUTEN TAG - HELLO - HOLA - NAMASTE - OLÀ - ZDRAS-TVUY-TE - こんにちは - 你好",
    opts,
  )
  pptx.writeFile({ fileName: "jsfiddle_test.pptx" })
}