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
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.