Knowledgebase (2344)
Children categories
Transforming PowerPoint presentations into image formats such as JPG or PNG is an effective method for enhancing the way you share visual content. By converting slides into images, you maintain the integrity of the design and layout, making it suitable for a wide range of uses, from online sharing to embedding in documents.
In this article, you will discover how to convert PowerPoint slides to images in React using Spire.Presentation for JavaScript. We will guide you through the process step-by-step, ensuring you can effortlessly create high-quality images from your presentations.
Install Spire.Presentation for JavaScript
To get started with converting PowerPoint to images in a React application, you can either download Spire.Presentation for JavaScript from the official website or install it via npm with the following command:
npm i spire.office
The downloaded product package integrates Spire.Doc for JavaScript, Spire.XLS for JavaScript, Spire.PDF for JavaScript, and Spire.Presentation for JavaScript. To use Spire.Presentation for JavaScript functionality, you need to copy the corresponding files (spire.presentation.js, Spire.Presentation.Wasm.zip, spire.common.js, Spire.Common.Wasm.zip, and the _framework folder) to the public folder of your project. Additionally, to ensure proper text rendering, font files can be added to a custom path of your choice. In the following example, the font addition path is: public\static\font.
For more details, refer to the documentation: How to Integrate Spire.Presentation for JavaScript in a React Project.
Convert PowerPoint to PNG or JPG with JavaScript
Using Spire.Presentation for JavaScript, you can access a specific slide with the Presentation.Slides.get_Item() method. Once you have the slide, convert it to image data using ISlide.SaveAsImage(). You can then save the image in PNG or JPG format. To convert each slide into a separate image file, simply iterate through the slides and perform the conversion for each one.
The steps to convert PowerPoint to PNG or JPG using JavaScript are as follows:
- Load required font files into the virtual file system (VFS).
- Instantiate a new document using the wasmModule.Presentation() method
- Load the PowerPoint document using the Presentation.LoadFromFile() method.
- Loop through the slides in the document:
- Get a specific slide using the Presentation.Slides.get_Item() method.
- Convert the slide into image data using the ISlide.SaveAsImage() method.
- Save the image data to a PNG or JPG file using the Save() method of the image data object.
- Create a Blob object from the generated image file.
- Trigger the download of the image file.
- JavaScript
import React, { useState, useEffect } from 'react';
function App() {
const [wasmModule, setWasmModule] = useState(null);
useEffect(() => {
(async () => {
try {
const publicUrl = process.env.PUBLIC_URL || '';
const spireModule = await import(/* webpackIgnore: true */ `${publicUrl}/spire.presentation.js`);
const rawModule = spireModule.default || spireModule;
window.wasmModule = typeof rawModule === 'function'
? await rawModule({ locateFile: p => p.endsWith('.wasm') ? `${publicUrl}/${p}` : p })
: rawModule;
setWasmModule(window.wasmModule);
} catch (error) {
console.error('Failed to load spire.presentation.js:', error);
}
})();
}, []);
const PowerPointToPNG = async () => {
const wasmModule = window.wasmModule.spirepresentation;
if (wasmModule) {
// Specify the input file paths
let inputFileName = "Sample.pptx";
await window.spire.FetchFileToVFS(inputFileName , '', `${process.env.PUBLIC_URL}static/data/`);
await window.spire.FetchFileToVFS("arial.ttf","/Library/Fonts/",`${process.env.PUBLIC_URL}static/font/`);
// Create a Presentation instance and load the PowerPoint file from the virtual file system
const presentation =new wasmModule.Presentation();
presentation.LoadFromFile(inputFileName);
// Iterate through the slides
for (let i = 0; i < presentation.Slides.Count; i++) {
// Convert a specific slide into image data
let image = presentation.Slides.get_Item(i).SaveAsImage();
// Specify the output file name
let outputFileName = `ToImage_img_${i}.png`;
// Save each image in virtual storage
image.Save(outputFileName);
// Read the generated image file from VFS
const imageFileArray = window.dotnetRuntime.Module.FS.readFile(outputFileName);
// Create a Blog object from the image file
const imageBlob = new Blob([imageFileArray], { type: "image/png" });
// Create a URL for the Blob
const url = URL.createObjectURL(imageBlob);
// Create an anchor element to trigger the download
const a = document.createElement('a');
a.href = url;
a.download = outputFileName;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
};
// Clean up resources
presentation.Dispose();
}
};
return (
<div style={{ textAlign: 'center', height: '300px' }}>
<h1>Convert PowerPoint to PNG in React</h1>
<button onClick={PowerPointToPNG} disabled={!wasmModule}>
Generate
</button>
</div>
);
}
export default App;
Run the code to launch the React app at localhost:3000. Click "Generate", and a "Save As" window will appear, prompting you to save the output file in your chosen folder.
Below is a screenshot of the generated PNG image files:
Convert PowerPoint to SVG with JavaScript
Spire.Presentation for JavaScript provides the ISlide.SaveToSVG() method, allowing you to convert a slide into SVG byte data. This byte data can then be saved as an SVG file using the Save() method.
The following are the steps to convert PowerPoint to SVG using JavaScript:
- Load required font files into the virtual file system (VFS).
- Instantiate a new document using the wasmModule.Presentation() method
- Load the PowerPoint document using the Presentation.LoadFromFile() method.
- Loop through the slides in the document:
- Get a specific slide using the Presentation.Slides.get_Item() method.
- Convert the slide into SVG byte data using the ISlide.SaveToSVG() method.
- Save the byte data to an SVG file using the Save() method.
- Create a Blob object from the generated image file.
- Trigger the download of the image file.
- JavaScript
import React, { useState, useEffect } from 'react';
function App() {
const [wasmModule, setWasmModule] = useState(null);
useEffect(() => {
(async () => {
try {
const publicUrl = process.env.PUBLIC_URL || '';
const spireModule = await import(/* webpackIgnore: true */ `${publicUrl}/spire.presentation.js`);
const rawModule = spireModule.default || spireModule;
window.wasmModule = typeof rawModule === 'function'
? await rawModule({ locateFile: p => p.endsWith('.wasm') ? `${publicUrl}/${p}` : p })
: rawModule;
setWasmModule(window.wasmModule);
} catch (error) {
console.error('Failed to load spire.presentation.js:', error);
}
})();
}, []);
const PowerPointToSVG = async () => {
const wasmModule = window.wasmModule.spirepresentation;
if (wasmModule) {
// Specify the input file paths
let inputFileName = "Sample.pptx";
await window.spire.FetchFileToVFS(inputFileName , '', `${process.env.PUBLIC_URL}static/data/`);
await window.spire.FetchFileToVFS("arial.ttf","/Library/Fonts/",`${process.env.PUBLIC_URL}static/font/`);
// Create a Presentation instance and load the PowerPoint file from the virtual file system
const presentation =new wasmModule.Presentation();
presentation.LoadFromFile(inputFileName);
// Iterate through the slides
for (let i = 0; i < presentation.Slides.Count; i++) {
let svgBytes = presentation.Slides.get_Item(i).SaveToSVG();
let outputFileName = `ToSVG-${i}.svg`;
// Save each image in virtual storage
let stream = new wasmModule.Stream(svgBytes);
stream.Save(outputFileName);
const imageFileArray = window.dotnetRuntime.Module.FS.readFile(outputFileName);
const imageBlob = new Blob([imageFileArray], { type: "image/svg" });
// Create a URL for the Blob
const url = URL.createObjectURL(imageBlob);
// Create an anchor element to trigger the download
const a = document.createElement('a');
a.href = url;
a.download = outputFileName;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
stream.Dispose();
}
// Clean up resources
presentation.Dispose();
}
};
return (
<div style={{ textAlign: 'center', height: '300px' }}>
<h1>Convert PowerPoint to SVG in React</h1>
<button onClick={PowerPointToSVG} disabled={!wasmModule}>
Generate
</button>
</div>
);
}
export default App;
Convert PowerPoint to TIFF with JavaScript
Spire.Presentation for JavaScript includes the Presentation.SaveToFile() method, which allows you to convert an entire PowerPoint document into a multi-frame TIFF image seamlessly.
The following are the steps to convert PowerPoint to TIFF using JavaScript:
- Load required font files into the virtual file system (VFS).
- Instantiate a new document using the wasmModule.Presentation() method
- Load the PowerPoint document using the Presentation.LoadFromFile() method.
- Convert the document to a TIFF image file using the Presenatation.SaveToFile() method.
- Create a Blob object from the generated image file.
- Trigger the download of the image file.
- JavaScript
import React, { useState, useEffect } from 'react';
function App() {
const [wasmModule, setWasmModule] = useState(null);
useEffect(() => {
(async () => {
try {
const publicUrl = process.env.PUBLIC_URL || '';
const spireModule = await import(/* webpackIgnore: true */ `${publicUrl}/spire.presentation.js`);
const rawModule = spireModule.default || spireModule;
window.wasmModule = typeof rawModule === 'function'
? await rawModule({ locateFile: p => p.endsWith('.wasm') ? `${publicUrl}/${p}` : p })
: rawModule;
setWasmModule(window.wasmModule);
} catch (error) {
console.error('Failed to load spire.presentation.js:', error);
}
})();
}, []);
const PowerPointToTIFF = async () => {
const wasmModule = window.wasmModule.spirepresentation;
if (wasmModule) {
// Specify the input file paths
let inputFileName = "Sample.pptx";
await window.spire.FetchFileToVFS(inputFileName , '', `${process.env.PUBLIC_URL}static/data/`);
await window.spire.FetchFileToVFS("arial.ttf","/Library/Fonts/",`${process.env.PUBLIC_URL}static/font/`);
// Create a Presentation instance and load the PowerPoint file from the virtual file system
const presentation =new wasmModule.Presentation();
// Load the PowerPoint file
presentation.LoadFromFile(inputFileName);
// Specify the output file name
const outputFileName = "ToTIFF.tiff"
// Save the document to TIFF
presentation.SaveToFile({ file: outputFileName, fileFormat: wasmModule.FileFormat.Tiff });
// Read the generated image file from VFS
const imageFileArray = window.dotnetRuntime.Module.FS.readFile(outputFileName);
// Create a Blog object from the image file
const imageBlob = new Blob([imageFileArray], { type: "image/tiff" });
// Create a URL for the Blob
const url = URL.createObjectURL(imageBlob);
// Create an anchor element to trigger the download
const a = document.createElement('a');
a.href = url;
a.download = outputFileName;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
// Clean up resources
presentation.Dispose();
}
};
return (
<div style={{ textAlign: 'center', height: '300px' }}>
<h1>Convert PowerPoint to TIFF in React</h1>
<button onClick={PowerPointToTIFF} disabled={!wasmModule}>
Generate
</button>
</div>
);
}
export default App;
Get a Free License
To fully experience the capabilities of Spire.Presentation for JavaScript without any evaluation limitations, you can request a free 30-day trial license.
PowerPoint presentations are widely used tools for visual communication, enabling users to effectively present information in an organized and visually engaging manner. They are ideal for business meetings, educational purposes, and project presentations. However, in some cases, converting PowerPoint presentations into a lightweight, text-based format such as Markdown is more practical.
Markdown is a popular markup language that is widely supported across documentation tools, version control systems, and static site generators. It offers a simple way to format text that is easier to read and write. By converting PowerPoint presentations to Markdown, users can integrate their content into text-based workflows more efficiently. This is especially helpful when collaborating on documents, tracking changes, or publishing content online.
In this article, we will walk you through the steps of converting PowerPoint presentations to Markdown format using C# and the Spire.Presentation for .NET library.
Install Spire.Presentation for .NET
To begin with, you need to add the DLL files included in the Spire.Presentation for.NET package as references in your .NET project. The DLL files can be either downloaded from this link or installed via NuGet.
PM> Install-Package Spire.Presentation
Convert a PowerPoint Presentation to Markdown
Spire.Presentation for .NET provides the Presentation.SaveToFile(string, FileFormat) method, allowing you to convert PowerPoint presentations into various file formats, including PDF, HTML, and Markdown. Below are the steps to convert a PowerPoint presentation to Markdown using Spire.Presentation for .NET:
- Initialize an instance of the Presentation class.
- Load a PowerPoint presentation using Presentation.LoadFromFile(string) method.
- Save the PowerPoint presentation to Markdown format using Presentation.SaveToFile(string, FileFormat) method.
- C#
using Spire.Presentation;
namespace PPTToMarkdown
{
internal class Program
{
static void Main(string[] args)
{
//Initialize an instance of the Presentation class
Presentation ppt = new Presentation();
//Load a PowerPoint presentation
ppt.LoadFromFile(@"E:\Program Files\Sample.pptx");
//Specify the file path for the output Markdown file
string result = @"E:\Program Files\PowerPointToMarkdown.md";
//Save the PowerPoint presentation to Markdown format
ppt.SaveToFile(result, FileFormat.Markdown);
}
}
}
Convert a Specific PowerPoint Slide to Markdown
In some cases, you may need to convert a specific slide instead of the whole presentation to Markdown. Spire.Presentation offers the ISlide.SaveToFile(string, FileFormat) method to convert a PowerPoint slide to Markdown. The following are the detailed steps:
- Initialize an instance of the Presentation class.
- Load a PowerPoint presentation using Presentation.LoadFromFile(string) method.
- Get a specific slide in the PowerPoint presentation by its index through Presentation.Slides[int] property.
- Save the PowerPoint slide to Markdown format using ISlide.SaveToFile(string, FileFormat) method.
- C#
using Spire.Presentation;
namespace SlideToMarkdown
{
internal class Program
{
static void Main(string[] args)
{
//Initialize an instance of the Presentation class
Presentation ppt = new Presentation();
//Load a PowerPoint presentation
ppt.LoadFromFile(@"E:\Program Files\Sample.pptx");
//Get the second slide
ISlide slide = ppt.Slides[1];
//Specify the file path for the output Markdown file
string result = @"E:\Program Files\SlideToMarkdown.md";
//Save the slide to a Markdown file
slide.SaveToFile(result, FileFormat.Markdown);
ppt.Dispose();
}
}
}
Apply for a Temporary License
If you'd like to remove the evaluation message from the generated documents, or to get rid of the function limitations, please request a 30-day trial license for yourself.
Retrieving and replacing fonts in Word documents is a key aspect of document design. This process enables users to refresh their text with modern typography, improving both appearance and readability. Mastering font adjustments can enhance the overall impact of your documents, making them more engaging and accessible.
In this article, you will learn how to retrieve and replace fonts in a Word document using Spire.Doc for Java.
Install Spire.Doc for Java
First of all, you're required to add the Spire.Doc.jar file as a dependency in your Java program. The JAR file can be downloaded from this link. If you use Maven, you can easily import the JAR file in your application by adding the following code to your project's pom.xml file.
<repositories>
<repository>
<id>com.e-iceblue</id>
<name>e-iceblue</name>
<url>https://repo.e-iceblue.com/nexus/content/groups/public/</url>
</repository>
</repositories>
<dependencies>
<dependency>
<groupId>e-iceblue</groupId>
<artifactId>spire.doc</artifactId>
<version>14.6.0</version>
</dependency>
</dependencies>
Retrieve Fonts Used in a Word Document
To retrieve font information from a Word document, you'll need to navigate through the document's sections, paragraphs, and their child objects. For each child object, check if it is an instance of TextRange. If a TextRange is detected, you can extract the font details, including the font name and size, using the methods under the TextRange class.
Here are the steps to retrieve font information from a Word document using Java:
- Create a Document object.
- Load the Word document using the Document.loadFromFile() method.
- Iterate through each section, paragraph, and child object.
- For each child object, check if it is an instance of TextRange class.
- If it is, retrieve the font name and size using the TextRange.getCharacterFormat().getFontName() and TextRange.getCharacterFormat().getFontSize() methods.
- Java
import com.spire.doc.*;
import com.spire.doc.documents.*;
import com.spire.doc.fields.TextRange;
import java.io.BufferedWriter;
import java.io.FileWriter;
import java.io.IOException;
import java.util.ArrayList;
import java.util.Arrays;
import java.util.List;
// Customize a FontInfo class to help store font information
class FontInfo {
private String name;
private Float size;
public FontInfo() {
this.name = "";
this.size = null;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public Float getSize() {
return size;
}
public void setSize(Float size) {
this.size = size;
}
@Override
public boolean equals(Object obj) {
if (this == obj) return true;
if (!(obj instanceof FontInfo)) return false;
FontInfo other = (FontInfo) obj;
return name.equals(other.getName()) && size.equals(other.getSize());
}
}
public class RetrieveFonts {
// Function to write string to a txt file
public static void writeAllText(String filename, List<String> text) {
try (BufferedWriter writer = new BufferedWriter(new FileWriter(filename))) {
for (String s : text) {
writer.write(s);
}
} catch (IOException e) {
e.printStackTrace();
}
}
public static void main(String[] args) {
List<FontInfo> fontInfos = new ArrayList<>();
StringBuilder fontInformations = new StringBuilder();
// Create a Document instance
Document document = new Document();
// Load a Word document
document.loadFromFile("C:\\Users\\Administrator\\Desktop\\input.docx");
// Iterate through the sections
for (int i = 0; i < document.getSections().getCount(); i++) {
Section section = document.getSections().get(i);
// Iterate through the paragraphs
for (int j = 0; j < section.getBody().getParagraphs().getCount(); j++) {
Paragraph paragraph = section.getBody().getParagraphs().get(j);
// Iterate through the child objects
for (int k = 0; k < paragraph.getChildObjects().getCount(); k++) {
DocumentObject obj = paragraph.getChildObjects().get(k);
if (obj instanceof TextRange) {
TextRange txtRange = (TextRange) obj;
// Get the font name and size
String fontName = txtRange.getCharacterFormat().getFontName();
Float fontSize = txtRange.getCharacterFormat().getFontSize();
String textColor = txtRange.getCharacterFormat().getTextColor().toString();
// Store the font information
FontInfo fontInfo = new FontInfo();
fontInfo.setName(fontName);
fontInfo.setSize(fontSize);
if (!fontInfos.contains(fontInfo)) {
fontInfos.add(fontInfo);
String str = String.format("Font Name: %s, Size: %.2f, Color: %s%n", fontInfo.getName(), fontInfo.getSize(), textColor);
fontInformations.append(str);
}
}
}
}
}
// Write font information to a txt file
writeAllText("output/GetFonts.txt", Arrays.asList(fontInformations.toString().split("\n")));
// Dispose resources
document.dispose();
}
}
Replace a Specific Font with Another in Word
Once you obtain the font name of a specific text range, you can easily replace it with a different font, by using the TextRange.getCharacterFormat().setFontName() method. Additionally, you can adjust the font size and text color using the appropriate methods in the TextRange class.
Here are the steps to replace a specific font in a Word document using Java:
- Create a Document object.
- Load the Word document using the Document.loadFromFile() method.
- Iterate through each section, paragraph, and child object.
- For each child object, check if it is an instance of TextRange class.
- If it is, get the font name using the TextRange.getCharacterFormat().getFontName() method.
- Check if the font name is the specified font.
- If it is, set a new font name for the text range using the TextRange.getCharacterFormat().setFontName() method.
- Save the document to a different Word file using the Document.saveToFile() method.
- Java
import com.spire.doc.*;
import com.spire.doc.documents.*;
import com.spire.doc.fields.TextRange;
public class ReplaceFont {
public static void main(String[] args) {
// Create a Document instance
Document document = new Document();
// Load a Word document
document.loadFromFile("C:\\Users\\Administrator\\Desktop\\input.docx");
// Iterate through the sections
for (int i = 0; i < document.getSections().getCount(); i++) {
// Get a specific section
Section section = document.getSections().get(i);
// Iterate through the paragraphs
for (int j = 0; j < section.getBody().getParagraphs().getCount(); j++) {
// Get a specific paragraph
Paragraph paragraph = section.getBody().getParagraphs().get(j);
// Iterate through the child objects
for (int k = 0; k < paragraph.getChildObjects().getCount(); k++) {
// Get a specific child object
DocumentObject obj = paragraph.getChildObjects().get(k);
// Determine if a child object is a TextRange
if (obj instanceof TextRange) {
// Get a specific text range
TextRange txtRange = (TextRange) obj;
// Get the font name
String fontName = txtRange.getCharacterFormat().getFontName();
// Determine if the font name is Microsoft JhengHei
if ("Microsoft JhengHei".equals(fontName)) {
// Replace the font with another font
txtRange.getCharacterFormat().setFontName("Segoe Print");
}
}
}
}
}
// Save the document to a different file
document.saveToFile("output/ReplaceFonts.docx", FileFormat.Docx);
// Dispose resources
document.dispose();
}
}
Apply for a Temporary License
If you'd like to remove the evaluation message from the generated documents, or to get rid of the function limitations, please request a 30-day trial license for yourself.
