Coding Shiksha Watch on YouTube

Javascript PPTXGenJS Library Example to Generate Powerpoint (.PPTX) Presentations in Browser

3 min read 10 hours ago
Published on Dec 21, 2024 This response is partially generated with the help of AI. It may contain inaccuracies.

Table of Contents

Introduction

In this tutorial, we will learn how to use the PPTXGenJS library in JavaScript to generate PowerPoint presentations directly in the browser. This library is useful for creating presentations dynamically without needing server-side processing. By the end of this guide, you'll be able to create a basic PowerPoint file and download it to your computer.

Step 1: Set Up Your Project

  1. Create a New HTML File

    • Open your code editor and create a new HTML file (e.g., index.html).

  2. Include the PPTXGenJS Library

    • Add the following script tag in the <head> section of your HTML file to include the PPTXGenJS library:
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pptxgenjs/3.8.0/pptxgen.min.js"></script>

  3. Set Up Basic HTML Structure

    • Create a simple HTML structure with a button to trigger the PowerPoint generation:
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PPTXGenJS Example</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pptxgenjs/3.8.0/pptxgen.min.js"></script>
</head>
<body>
    <button id="generate">Generate PowerPoint</button>
    <script src="script.js"></script>
</body>
</html>

Step 2: Create the PowerPoint Generation Script

  1. Create a JavaScript File

    • In your project directory, create a new JavaScript file (e.g., script.js).

  2. Add Button Click Event Listener

    • In script.js, add an event listener for the button click that will trigger the PowerPoint creation:
    document.getElementById('generate').addEventListener('click', generatePPT);

  3. Define the generatePPT Function

    • Create the generatePPT function where you will define the slides and content:
    function generatePPT() {
    let pptx = new PptxGenJS();
    let slide = pptx.addSlide();

    slide.addText('Hello World!', { x: 1, y: 1, fontSize: 18 });
    slide.addText('This is a sample presentation.', { x: 1, y: 2, fontSize: 14 });

    pptx.writeFile({ fileName: 'SamplePresentation.pptx' });
}

Step 3: Test Your PowerPoint Generation

  1. Open the HTML File in a Browser

    • Open index.html in your web browser.

  2. Click the Generate Button

    • Click on the "Generate PowerPoint" button to create and download the presentation.

  3. Check the Downloaded File

    • Locate the downloaded SamplePresentation.pptx file on your computer and open it to verify the content.

Conclusion

You have successfully created a simple PowerPoint presentation using the PPTXGenJS library in JavaScript. This tutorial covered setting up a basic project, writing the code to generate a PowerPoint file, and testing the functionality in the browser.

Next Steps

  • Experiment with adding more slides and different types of content (e.g., images, tables).
  • Explore the PPTXGenJS documentation for advanced features like animations and slide transitions.
  • Consider integrating this functionality into a larger web application for dynamic content creation.

Table of Contents

Recent