CODEWITHSUNDEEP
htmliframeoffice365powerpointoffice-online-server
July
July

Reputation: 558

Embed a PowerPoint presentation into HTML with localhost

I want to use this method to upload a powerpoint presentation:

<iframe src='https://view.officeapps.live.com/op/embed.aspx?src=[https://www.your_website/file_name.pptx]' width='100%' height='600px' frameborder='0'>

but i'm using XAMMP to use localhost server so i need something like this

 <iframe src='https://view.officeapps.live.com/op/embed.aspx?src=[/file_name.pptx]' width='100%' height='600px' frameborder='0'>

Is this possible? Thank you in advance.

Upvotes: 0

Views: 2017

Answers (1)

julianm
julianm

Reputation: 879

You can use ngrok to expose a local web server to the internet (the free version should be enough).

These are the actions I followed to run this in my localhost. I tested it with a dummy presentation.

1. Create an ngrok account

Go to ngrok website and create a free account. Then, grab your authtoken.

2. Install ngrok in your computer

Run the following commands in your command line (Linux or Windows using WLS):

sudo apt-get install ngrok-client
ngrok authtoken [enter_your_authtoken_here]
ngrok http 80

The last command will expose your local web server to a public URL. This assumes that you are already running a webserver in localhost (port 80).

3. Prepare the Embed code

Save an .html file with the embed code, replace the src attribute to include the new URL provided by ngrok. Make sure your file_name.pptx is also accessible in localhost.

<iframe src='https://view.officeapps.live.com/op/embed.aspx?src=[https://www.your_website/file_name.pptx]' width='100%' height='600px' frameborder='0'>

Replace https://www.your_website accordingly, with the URL generated by ngrok. (You can grab the exposed URL from the command line, see picture below).

Example: Shows ngrok running in the console

That's all. Here is an example showing the results I got when I tested a dummy presentation using this approach.

enter image description here

Upvotes: 1

Related Questions