Skip to content

WebNinjaDeveloper.com

Programming Tutorials




Menu
  • Home
  • Youtube Channel
  • Official Blog
  • Nearby Places Finder
  • Direction Route Finder
  • Distance & Time Calculator
Menu

Javascript PPTXGenJS Example to Add Multiple Images in PPTX File Using HTML5 Form in Browser

Posted on February 12, 2023

 

 

Welcome folks today in this blog post we will be adding multiple images in pptx files as slides using html5 forms in javascript. All the full source code of the application is shown below.

 

 

Get Started

 

 

In order to get started you need to make an index.html file and copy paste the following code

 

 

index.html

 

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Creating Powerpoint Presentations in Browser</title>
    <script src="https://cdn.jsdelivr.net/gh/gitbrent/pptxgenjs@3.8.0/libs/jszip.min.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/gitbrent/pptxgenjs@3.8.0/dist/pptxgen.min.js"></script>
</head>
 
<body>
    <input type="file" multiple id="files" required>
    <button onclick="download()">Download Powerpoint Presentation</button>
</body>
</html>

 

 

As you can see we are including the pptxgenjs library cdn and also we have the simple input field where we allow the users to select multiple image files and then we have the button which adds these images in powerpoint files and downloads it as an attachment. And also we are calling the download() method once the user hits the button.

 

Now we need to add the javascript code for this application as shown below

 

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
function download() {
 
        let files = document.getElementById('files')
        
        let pres = new PptxGenJS();
 
        let slides = []
 
        Array.from(files.files).forEach((f,i) => {
            slides[i+1] = pres.addSlide()
            console.log(f)
            let data = URL.createObjectURL(f)
            console.log(data)
            slides[i+1].addImage({
                path: data,
                x: "0%",
                y: "0%",
                w: "100%",
                h: "100%"
            })
        })
 
 
        // 4. Save the Presentation
        pres.writeFile();
    }

 

 

As you can see we are calling the pptxgenjs constructor and then we are adding the slide using addSlide() method and then we are using the foreach loop to get all the files which are selected by the user and in the loop we are using the addImage() method to add the image inside the powerpoint presentation as a full slide. And lastly we are writing or downloading the pptx file as an attachment using the writeFile() method.

 

 

 

Recent Posts

  • Android Java Project to Download Multiple Images From URL With Progressbar & Save it inside Gallery
  • Android Java Project to Capture Image From Camera & Save it inside Gallery
  • Android Java Project to Crop,Scale & Rotate Images Selected From Gallery and Save it inside SD Card
  • Android Kotlin Project to Load Image From URL into ImageView Widget
  • Android Java Project to Make HTTP Call to JSONPlaceholder API and Display Data in RecyclerView Using GSON & Volley Library
  • Angular
  • Bunjs
  • C#
  • Deno
  • django
  • Electronjs
  • java
  • javascript
  • Koajs
  • kotlin
  • Laravel
  • meteorjs
  • Nestjs
  • Nextjs
  • Nodejs
  • PHP
  • Python
  • React
  • ReactNative
  • Svelte
  • Tutorials
  • Vuejs




©2023 WebNinjaDeveloper.com | Design: Newspaperly WordPress Theme