Search code examples
htmliframeoffice365powerpointoffice-online-server

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.


Solution

  • 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