100% Free JavaScript Library for Manipulating PowerPoint Presentations

Product Page | [Documentation] | [Examples] | Forum | Temporary License | Customized Demo

Free Spire.Presentation for JavaScript is a robust library for handling presentations, tailored for developers working with JavaScript applications. It seamlessly integrates with popular frameworks like Vue, React, and Angular, making it easy for developers to embed Spire.Presentation into their projects. This integration facilitates the creation, editing, conversion, and sharing of PowerPoint presentations directly within web applications, offering a smooth and efficient experience.

Free Spire.Presentation for JavaScript is a standalone API that doesn't require Microsoft PowerPoint, offering high efficiency and flexibility. It supports PPTX, PPSX formats from PowerPoint 97-2003 through 2019.

With a wide range of features, it lets you create, edit, and customize presentations in JavaScript. You can easily manage text, images, shapes, tables, animations, and multimedia. It also supports exporting slides to various formats, including PNG, JPG, TIFF, PDF, XPS, and HTML, making it a versatile tool for developers creating dynamic presentations.

Friendly Reminder: Free version is limited to 10 presentation slides. This limitation is enforced during writing PPT, PPTX. When converting PowerPoint files to PDF, Image, XPS, you can only get the first 3 pages of file. Upgrade to Commercial Edition of Spire.Presentation for JavaScript. We don't provide technical or any other support to the users of the free versions.

Core Features & Functionality

Installation

pip install Spire.Presentation

Rich PowerPoint Version Support

• PPT - PowerPoint Presentation 97-2003
• PPS - PowerPoint SlideShow 97-2003
• PPTX - PowerPoint Presentation 2007/2010/2013/2016/2019
• PPSX – PowerPoint SlideShow 2006, 2010

100% Standalone JavaScript API - No Microsoft Office Required

Free Spire.Presentation for JavaScript is a fully independent PowerPoint API that doesn’t require Microsoft Office. It’s optimized for speed and performance, enabling fast creation and manipulation of presentations, making it a more efficient alternative to traditional Microsoft Office automation methods.

High-Quality & Efficient PowerPoint File Conversion

Free Spire.Presentation for JavaScript enables high-quality conversion of PowerPoint files to various formats, including PDF, HTML, XPS, and image formats (PNG, JPG, BMP, SVG). It also supports seamless conversion between different PowerPoint presentation formats.

Comprehensive Presentation Processing Features

It offers extensive features for PowerPoint processing, such as creating slides, adding text, images, shapes, tables, charts, watermarks, headers and footers, comments, notes, SmartArt, hyperlinks, OLE objects, as well as animations, audio, and video.

Seamless Cross-Platform Compatibility

Free Spire.Presentation for JavaScript works seamlessly across various browsers and platforms, ensuring smooth operation in different frameworks and web environments, thus enhancing accessibility for end users.

Code Examples

Convert PowerPoint Presentation to PDF

<template>
  <span>The following example demonstrates how to convert a PPT document to PDF</span>
  <el-button @click="startProcessing">Start</el-button>
  <a v-if="downloadUrl" :href="downloadUrl" :download="downloadName">
    Click here to download the generated file
  </a>
</template>

<script>
import { ref } from "vue";

export default {
  setup() {
    const downloadUrl = ref(null);
    const downloadName = ref("");

    const startProcessing = async () => {
      wasmModule = window.wasmModule;
      if (wasmModule) {
        // Load the ARIALUNI.TTF font file into the virtual file system (VFS)
        await wasmModule.FetchFileToVFS("ARIALUNI.TTF", "/Library/Fonts/", `${import.meta.env.BASE_URL}static/font/`);
        
        // Load the input file into the virtual file system (VFS)
        const inputFileName = "ToPDF.pptx";
        await wasmModule.FetchFileToVFS(inputFileName, "", `${import.meta.env.BASE_URL}static/data/`);

        //Create a PPT document
        let ppt =wasmModule.Presentation.Create();

        //Load PPT file from disk
        ppt.LoadFromFile(inputFileName);

        // Define the output file name
        const outputFileName = "ToPDF.pdf";

        // Save the document 
        ppt.SaveToFile({ file: outputFileName, fileFormat: wasmModule.FileFormat.PDF });

        // Read the saved file and convert to a Blob object
        const modifiedFileArray = wasmModule.FS.readFile(outputFileName);
        const modifiedFile = new Blob([modifiedFileArray], { type: "application/pdf" });

        // Clean up resources
        ppt.Dispose();

        // Download the file
        downloadName.value = outputFileName;
        downloadUrl.value = URL.createObjectURL(modifiedFile);
      }
    };

    return {
      startProcessing,
      downloadName,
      downloadUrl,
    };
  },
};
</script>

Create Slides

<template>
  <span>Click the following button to create slides.</span>
  <el-button @click="startProcessing">Start</el-button>
  <a v-if="downloadUrl" :href="downloadUrl" :download="downloadName">
    Click here to download the generated file
  </a>
</template>

<script>
import { ref } from "vue";

export default {
  setup() {
    const downloadUrl = ref(null);
    const downloadName = ref("");

    const startProcessing = async () => {
      wasmModule = window.wasmModule;
      if (wasmModule) {
        // Load the ARIALUNI.TTF font file into the virtual file system (VFS)
        await wasmModule.FetchFileToVFS("ARIALUNI.TTF", "/Library/Fonts/", `${import.meta.env.BASE_URL}static/font/`);

        // Load the sample file into the virtual file system (VFS)
        let ImageFileName = "bg.png";
        await wasmModule.FetchFileToVFS(ImageFileName, "", `${import.meta.env.BASE_URL}static/data/`);

        // Create a PPT document
        let ppt = wasmModule.Presentation.Create();

        // Add new slide
        ppt.Slides.Append();

        // Set the background image
        for (let i = 0; i < 2; i++) {
          let rect = wasmModule.RectangleF.FromLTRB(0, 0, ppt.SlideSize.Size.Width, ppt.SlideSize.Size.Height);
          ppt.Slides.get_Item(i).Shapes.AppendEmbedImage({ shapeType: wasmModule.ShapeType.Rectangle, fileName: ImageFileName, rectangle: rect });
          ppt.Slides.get_Item(i).Shapes.get_Item(0).Line.FillFormat.SolidFillColor.Color = wasmModule.Color.get_FloralWhite();
        }

        // Add title
        let rec_title = wasmModule.RectangleF.FromLTRB(ppt.SlideSize.Size.Width / 2 - 200, 70, (400 + ppt.SlideSize.Size.Width / 2 - 200), 120);
        let shape_title = ppt.Slides.get_Item(0).Shapes.AppendShape({ shapeType: wasmModule.ShapeType.Rectangle, rectangle: rec_title });
        shape_title.ShapeStyle.LineColor.Color = wasmModule.Color.get_White();
        shape_title.Fill.FillType = wasmModule.FillFormatType.None;
        let para_title = wasmModule.TextParagraph.Create();
        para_title.Text = "E-iceblue";
        para_title.Alignment = wasmModule.TextAlignmentType.Center;
        para_title.TextRanges.get_Item(0).LatinFont = wasmModule.TextFont.Create("Myriad Pro Light");
        para_title.TextRanges.get_Item(0).FontHeight = 36;
        para_title.TextRanges.get_Item(0).Fill.FillType = wasmModule.FillFormatType.Solid;
        para_title.TextRanges.get_Item(0).Fill.SolidColor.Color = wasmModule.Color.get_Black();
        shape_title.TextFrame.Paragraphs._Append(para_title);

        // Append new shape
        let shape = ppt.Slides.get_Item(0).Shapes.AppendShape({ shapeType: wasmModule.ShapeType.Rectangle, rectangle: wasmModule.RectangleF.FromLTRB(50, 150, 650, 430) });
        shape.ShapeStyle.LineColor.Color = wasmModule.Color.get_White();
        shape.Fill.FillType = wasmModule.FillFormatType.None;
        shape.Line.FillType = wasmModule.FillFormatType.None;
        // Add text to shape
        shape.AppendTextFrame("Welcome to use Spire.Presentation for JavaScript.");

        //Add new paragraph
        let pare = wasmModule.TextParagraph.Create();
        pare.Text = "";
        shape.TextFrame.Paragraphs._Append(pare);

        //Add new paragraph
        pare = wasmModule.TextParagraph.Create();
        pare.Text = "Spire.Presentation for JavaScript is a powerful presentation processing library designed for developers in JavaScript applications. It is fully compatible with popular JavaScript frameworks like Vue, React, and Angular. This compatibility allows developers to effortlessly integrate Spire.Presentation into their applications, enabling seamless creation, editing, conversion, and distribution of PowerPoint presentations directly within web-based projects.";
        shape.TextFrame.Paragraphs._Append(pare);

        // Set the Font
        for (let i = 0; i < shape.TextFrame.Paragraphs.Count; i++) {
          let para = shape.TextFrame.Paragraphs.get_Item(i);
          para.TextRanges.get_Item({ index: 0 }).LatinFont = wasmModule.TextFont.Create("Myriad Pro");
          para.TextRanges.get_Item({ index: 0 }).FontHeight = 24;
          para.TextRanges.get_Item({ index: 0 }).Fill.FillType = wasmModule.FillFormatType.Solid;
          para.TextRanges.get_Item({ index: 0 }).Fill.SolidColor.Color = wasmModule.Color.get_Black();
          para.Alignment = wasmModule.TextAlignmentType.Left;
        }

        // Append new shape - SixPointedStar
        shape = ppt.Slides.get_Item(1).Shapes.AppendShape({ shapeType: wasmModule.ShapeType.SixPointedStar, rectangle: wasmModule.RectangleF.FromLTRB(100, 100, 200, 200) });
        shape.Fill.FillType = wasmModule.FillFormatType.Solid;
        shape.Fill.SolidColor.Color = wasmModule.Color.get_Orange();
        shape.ShapeStyle.LineColor.Color = wasmModule.Color.get_White();

        // Append new shape
        shape = ppt.Slides.get_Item(1).Shapes.AppendShape({ shapeType: wasmModule.ShapeType.Rectangle, rectangle: wasmModule.RectangleF.FromLTRB(50, 250, 650, 300) });
        shape.ShapeStyle.LineColor.Color = wasmModule.Color.get_White();
        shape.Fill.FillType = wasmModule.FillFormatType.None;

        // Add text to shape
        shape.AppendTextFrame("This is newly added Slide.");

        // Set the Font
        shape.TextFrame.Paragraphs.get_Item(0).TextRanges.get_Item(0).LatinFont = wasmModule.TextFont.Create("Myriad Pro");
        shape.TextFrame.Paragraphs.get_Item(0).TextRanges.get_Item(0).FontHeight = 24;
        shape.TextFrame.Paragraphs.get_Item(0).TextRanges.get_Item(0).Fill.FillType = wasmModule.FillFormatType.Solid;
        shape.TextFrame.Paragraphs.get_Item(0).TextRanges.get_Item(0).Fill.SolidColor.Color = wasmModule.Color.get_Black();
        shape.TextFrame.Paragraphs.get_Item(0).Alignment = wasmModule.TextAlignmentType.Left;
        shape.TextFrame.Paragraphs.get_Item(0).Indent = 35;

        const outputFileName = "CreateSlide.pptx";

        // Save to file
        ppt.SaveToFile({ file: outputFileName, fileFormat: wasmModule.FileFormat.Pptx2013 });

        // Read the saved file and convert to a Blob object
        const modifiedFileArray = wasmModule.FS.readFile(outputFileName);
        const modifiedFile = new Blob([modifiedFileArray], { type: "application/vnd.openxmlformats-officedocument.presentationml.presentation" });

        // Clean up resources
        ppt.Dispose();

        // Download the file
        downloadName.value = outputFileName;
        downloadUrl.value = URL.createObjectURL(modifiedFile);
      }
    };

    return {
      startProcessing,
      downloadName,
      downloadUrl,
    };
  },
};
</script>

Add Hyperlinks to Text

<template>
  <span>Click the following button to add hyperlink to text in PowerPoint document.</span>
  <el-button @click="startProcessing">Start</el-button>
  <a v-if="downloadUrl" :href="downloadUrl" :download="downloadName">
    Click here to download the generated file
  </a>
</template>

<script>
import { ref } from "vue";

export default {
  setup() {
    const downloadUrl = ref(null);
    const downloadName = ref("");

    const startProcessing = async () => {
      wasmModule = window.wasmModule;
      if (wasmModule) {
        // Load the ARIALUNI.TTF font file into the virtual file system (VFS)
        await wasmModule.FetchFileToVFS("ARIALUNI.TTF", "/Library/Fonts/", `${import.meta.env.BASE_URL}static/font/`);

        let inputFileName = "AddHyperlinkToText.pptx";
        await wasmModule.FetchFileToVFS(inputFileName,"",`${import.meta.env.BASE_URL}static/data/`);
        //Create a PPT document
        let ppt = wasmModule.Presentation.Create();

        //Load the file from disk.
        ppt.LoadFromFile(inputFileName);

        //Find the text we want to add link to it.
        let shape = ppt.Slides.get_Item(0).Shapes.get_Item(0);
        let tp = shape.TextFrame.TextRange.Paragraph;
        let temp = tp.Text;

        //Split the original text.
        let textToLink = "Spire.Presentation";
        let strSplit = temp.split(textToLink);

        //Clear all text.
        tp.TextRanges.Clear();

        //Add new text.
        let tr = wasmModule.TextRange.Create(strSplit[0]);
        tp.TextRanges.Append(tr);

        //Add the hyperlink.
        tr = wasmModule.TextRange.Create(textToLink);
        tr.ClickAction.Address = "http://www.e-iceblue.com/Introduce/presentation-for-net-introduce.html";
        tp.TextRanges.Append(tr);


        // Define the output file name
        const outputFileName = "AddHyperlinkToText_out.pptx";

        // Save the document to the specified path
        ppt.SaveToFile({ file: outputFileName, fileFormat: wasmModule.FileFormat.Pptx2013 });

        // Read the saved file and convert to a Blob object
        const modifiedFileArray = wasmModule.FS.readFile(outputFileName);
        const modifiedFile = new Blob([modifiedFileArray], { type: "application/vnd.openxmlformats-officedocument.presentationml.presentation" });

        // Clean up resources
        ppt.Dispose();

        // Download the file
        downloadName.value = outputFileName;
        downloadUrl.value = URL.createObjectURL(modifiedFile);
      }
    };

    return {
      startProcessing,
      downloadName,
      downloadUrl,
    };
  },
};
</script>

Product Page | [Documentation] | [Examples] | Forum | Temporary License | Customized Demo