Getting Started with JavaScript PowerPoint in Vue app

28 Oct 20264 minutes to read

The JavaScript PowerPoint Library is used to create, read, and edit PowerPoint presentations. The JavaScript PowerPoint Library also offers functionality to insert shapes, images, text, and paragraphs with rich formatting.

This guide explains how to integrate the JavaScript PowerPoint Library into a Vue application that runs in the browser. The sample saves the generated PowerPoint presentation with save('Output.pptx').

Vue 2 reached end-of-life on December 31, 2023. This guide leads with Vue 3 (recommended) and provides a separate Vue 2 path for legacy projects.

Prerequisites

Before you begin, make sure you have the following installed:

  • Node.js 18 or later.
  • npm 9 or later, or Yarn 1.22 or later.
  • Visual Studio Code, Code Studio, or another code editor.
  • A supported browser such as the latest versions of Microsoft Edge, Google Chrome, or Mozilla Firefox.

To verify your Node.js and npm versions, run:

node --version
npm --version

Create a new Vue 3 project using the official scaffolding tool. This guide uses Vite as the bundler.

npm create vue@latest my-pptx-app
cd my-pptx-app
npm install

When prompted, choose the default options (TypeScript is optional; this guide uses plain JavaScript).

The final project structure is:

my-pptx-app/
├── public/
├── src/
│   ├── App.vue
│   ├── main.js
│   └── components/
├── index.html
└── package.json

Install the JavaScript PowerPoint Library

All Syncfusion® JS 2 packages are published in the npmjs.com registry. The npm install command below resolves @syncfusion/ej2-pptx to the latest stable version compatible with Vue 2.7+ or Vue 3.4+.

npm install @syncfusion/ej2-pptx --save
  • If you prefer Yarn, use the following command.
yarn add @syncfusion/ej2-pptx

Create a PowerPoint Document

Step 1: Create the Vue Component

Replace the contents of src/App.vue with the following code. The script imports the PowerPoint classes as named exports from @syncfusion/ej2-pptx and creates a one-slide presentation in a click handler. The same code works for both Vue 2 and Vue 3:

<script>
import { registerLicense } from '@syncfusion/ej2-base';
import {
  Presentation,
  HorizontalAlignmentType
} from '@syncfusion/ej2-pptx';


export default {
  name: 'App',
  methods: {
    async createPptx() {
      // Creates a Presentation instance
      const pptxDoc = Presentation.create();

      // Adds a slide to the presentation
      const slide = pptxDoc.slides.add();

      // Adds a textbox for the title
      const titleShape = slide.shapes.addTextBox({
        bounds: {
          x: 55,
          y: 25,
          width: 850,
          height: 72
        }
      });

      // Adds a paragraph to the textbox
      const paragraph = titleShape.textBody.addParagraph();
      paragraph.horizontalAlignment = HorizontalAlignmentType.Center;

      // Adds text to the paragraph
      const textPart = paragraph.addTextPart('Hello World!!!');
      textPart.font.fontName = 'Calibri';
      textPart.font.bold = true;
      textPart.font.fontSize = 36;

      // Saves the Presentation to the file system.
      await pptxDoc.save('Output.pptx');
    }
  }
};
</script>

<template>
  <div id="app">
    <button @click="createPptx">Create PowerPoint document</button>
  </div>
</template>

This sample uses named imports from the npm package (import { Presentation, ... } from '@syncfusion/ej2-pptx'). The npm package does not expose a global ej namespace; using ej.pptx.Presentation without an import will throw ReferenceError: ej is not defined in a Vite or Vue CLI build. If you prefer the UMD-style global, load ej2.min.js from the Syncfusion CDN in index.html (or public/index.html) instead of importing the npm package.

A click handler is used in this example, so no additional setup is required. The PowerPoint classes load when the import runs at module evaluation time, which happens before any user interaction.

Run the Application

Vue 3 (Vite)

Open a terminal in the project root and start the Vite development server:

npm run dev

Vite serves the application at http://localhost:5173. Open this URL in a browser and click Create PowerPoint document. The sample saves the presentation as Output.pptx.

See Also