65

Is it possible to embed a PowerPoint presentation (.ppt) into a webpage (.xhtml)?

This will be used on a local intranet where there is a mix of Internet Explorer 6 and Internet Explorer 7 only, so no need to consider other browsers.


I've given up... I guess Flash is the way forward.

1
  • Is there any way to embed a pptx file in HTML?
    – Himanshu
    Jul 18, 2013 at 6:41

23 Answers 23

96

Google Docs can serve up PowerPoint (and PDF) documents in it's document viewer. You don't have to sign up for Google Docs, just upload it to your website, and call it from your page:

<iframe src="//docs.google.com/gview?url=https://www.yourwebsite.com/powerpoint.ppt&embedded=true" style="width:600px; height:500px;" frameborder="0"></iframe>
7
  • 2
    Wouldn't have worked for my purpose, but given that the question states it is for a local intranet, this has to be the way to do it! +1
    – Steg
    Nov 7, 2009 at 23:18
  • 4
    I tried this and all I get is a "Sorry, we are unable to generate a view of the document at this time. Please try again later. "
    – David Yell
    Aug 8, 2011 at 13:10
  • There's some way to customize this viewer? I want to avoid the fullscreen option...
    – adripanico
    Oct 16, 2012 at 7:30
  • Not pretty but very useful... Thanks Jun 6, 2014 at 18:05
  • 3
    This solution isn't working anymore, because Google restricted the access with the X-Frame-Options to sameorigin Jul 27, 2017 at 12:48
11

I got so sick of trying all of the different options to web host a power point that were flaky or required flash so I rolled my own.

My solution uses a very simple javascript function to simply scroll / replace a image tag with GIFs that I saved from the Power Point presentation itself.

  1. In the power point presentation click Save As and select GIF. Pick the quality you want to display the presentation at. Power Point will save one GIF image for each slide and name them Slide1.GIF, Slide2.GIF, etc.....

  2. Create a HTML page and add a image tag to display the Power point GIF images.

    <img src="Slide1.GIF" id="mainImage" name="mainImage" width="100%" height="100%" alt="">
    
  3. Add some first, previous, next and last clickable objects with the onClick action as below:

    <a href="#" onclick="swapImage(0);"><img src="/images/first.png" border=0 alt="First"></a>
    <a href="#" onclick="swapImage(currentIndex-1);"><img src="/images/left.png" border=0 alt="Back"></a>
    <a href="#" onclick="swapImage(currentIndex+1);"><img src="/images/right.png" border=0 alt="Next"></a>
    <a href="#" onclick="swapImage(maxIndex);"><img src="/images/last.png" border=0 alt="Last"></a>
    
  4. Finally, add the below javascript function that when called grabs the next Slide.GIF image and displays it to the img tag.

    <script type="text/javascript">
        //Initilize start value to 1 'For Slide1.GIF'
        var currentIndex = 1;
    
        //NOTE: Set this value to the number of slides you have in the presentation.
        var maxIndex=12;
    
        function swapImage(imageIndex){
            //Check if we are at the last image already, return if we are.
            if(imageIndex>maxIndex){
                currentIndex=maxIndex;
                return;
            }
    
            //Check if we are at the first image already, return if we are.
            if(imageIndex<1){
                currentIndex=1;
                return;
            }
    
            currentIndex=imageIndex;
            //Otherwise update mainImage
            document.getElementById("mainImage").src='Slide' +  currentIndex  + '.GIF';
            return;
        }
    </script>
    

Make sure the GIFs are reachable from the HTMl page. They are by default expected to be in the same directory but you should be able to see the logic and how to set to a image directory if required

I have training material up for my company that uses this technique at http://www.vanguarddata.com.au so before you spend any time trying it out you are welcome to look at in action.

I hope this helps someone else out there who is having as much headaches with this as I did.....

4
  • Very creative way. Good job. Jul 24, 2014 at 19:41
  • can you please put a license on it? it would be nice to be able to reuse it. maybe a CC0 license: wiki.creativecommons.org/wiki/CC0 Dec 9, 2015 at 19:43
  • Would you have any idea how to deal with slides with animations?
    – Zane
    Jun 6, 2017 at 20:46
  • Thanks for showing me this way of implementing a powerpoint on a web page. From the code you pasted above I think the first button should be swapImage(1) instead of swapImage(0) right? Also how would I implement a simple text that would let the user know which slide they are on for example like "Slide 3 of 16" or "Slide 1 of 16".
    – Makuza
    Sep 30, 2020 at 1:10
11

Id recommend the official View Office documents online

link

for embeding you can simply use

<iframe src='https://view.officeapps.live.com/op/embed.aspx?src={urlencode(site-to-ppt)}' width='962px' height='565px' frameborder='0'></iframe>
4
  • This works really nicely for one file at a time ... do you know if they have an API that you could hit returning the URLs for multiple files?
    – K7Buoy
    Feb 17, 2017 at 16:57
  • Hi @K7Buoy, did you ever find an API solution? I am also interested in an official API for displaying powerpoint slides. Thanks! Mar 21, 2018 at 2:11
  • Hi @JackCollins ... unfortunately not ... I hunted for quite sometime.
    – K7Buoy
    Mar 21, 2018 at 16:27
  • Hi @K7Buoy Have tried to look for licencing for commercial use for this, can't find any clarity. Do you know if there are restrictions using this in a commercial aspect?
    – etchypap
    May 26, 2020 at 20:24
5

DocStoc.com and Scribd.com both work well with Internet Explorer 6 and Internet Explorer 7. They'll show a variety of document types, including PowerPoint files (.ppt). I use these services for my intranet here at work. Of course, just remember to mark your documents as 'private' after you upload them.

4

besides, if you save ppt as .pps format using microsoft powerpoint, you can use the following code:

<iframe src="file.pps" width="800px" heigt="600px"></iframe>

Another common way to do it is to convert ppt/doc to pdf,

then use swftool(http://www.swftools.org) to convert it to swf

finally, take FlexPaper(http://flexpaper.devaldi.com) as document viewer.

3

I don't know of a way to embed PowerPoint slides directly into HTML. However, there are a number of solutions online for converting a PPT file into a SWF, which can be embedded into HTML just like any other Flash movie.

Googling for 'ppt to swf' seems to give a lot of hits. Some are free, others aren't. Some handle things like animations, others just do still images. There's got to be one out there that does what you need. :)

3

You can use Microsoft Office Web Apps to embed PowerPoint and Excel Files. See Say more in your blog with embedded PowerPoint and Excel files.

3
  • 1
    The embedded PPT app isn't very high quality. It translates your slides to medium-quality jpegs and adds a toggle button. (You'd do better exporting the slides from Powerpoint yourself and then using a jQuery slider.) The full-screen pop-out works a bit better (it has animations, though they're not great), but it also relies on the Silverlight plugin--which doesn't work on mobile devices. Dec 24, 2011 at 16:52
  • @BrandonLebedev, the embedded PPT's are actually better quality than the Google Docs rendering of PowerPoints from what I've seen. But as you rightly point out, it's not much use to mobile users, nor anyone who doesn't have the Silverlight plugin installed. May 28, 2013 at 23:55
  • The blog link is broke. Jul 24, 2014 at 19:36
3

I ended up going for screenshooting each slide, and using two different tabs to navigate, this was put into an . this gives high-res, but you sacrifice animations and interactivity, the only thing the user can do is read and change slide. heres an example off my website: http://deepschool.jaberwokkee.kodingen.com/~/Miss%20Necchi%27s%20powerpoints/Volume%20of%20prisms%20powerpoint/slide1.htm

2

Google Docs allows you to upload a PowerPoint document, you can then 'Share' it with everyone then you can 'Publish' it and this will provide code to embed it in your site or you can use a direct link which runs at the full size of the browser window. The conversion is pretty good and scales well because the text is retained rather than converted to an image. The conversion is pretty good and the whole thing is free. Definitely worth a go.

2

Tried all of the options in this stack and couldn't reach something that loaded swiftly, used PPT. file directly, and scaled easily. Saved out my ppt. as .gif and opted for "Infinite Carousel" (javascript) that I can drop images into easily. Has left right controls, play option, all the same stuff you find in ppt. presenter mode...

http://www.catchmyfame.com/2009/12/30/huge-updates-to-jquery-infinite-carousel-version-2-released/

1

The 'actual answer' is that you cannot do it directly. You have to convert your PowerPoint presentation to something that the browser can process. You can save each page of the PowerPoint presentation as a JPEG image and then display as a series of images. You can save the PowerPoint presentation as HTML. Both of these solutions will render only static pages, without any of the animations of PowerPoint. You can use a tool to convert your PowerPoint presentation to Flash (.swf) and embed it that way. This will preserve any animations and presumably allow you to do an automatic slideshow without the need for writing special code to change the images.

1

Power point supports converting to mp4 which can be posted using a html5 video tag.

Save As > MPEG-4 Video (*.mp4)

<video controls autoplay reload="none" style="width:1000px;">
<source src="my_power_point.mp4" type="video/mp4" />
</video>
1

As an alternate solution, you can convert PPT/PPTX to JPG/SVG images and display them with revealjs. See example code here.

PS. I am working as SW developer at Aspose.

0

The first few results on Google all sound like good options:

http://www.pptfaq.com/FAQ00708.htm

http://www.webdeveloper.com/forum/showthread.php?t=86212

0

Some Flash tool that can convert the PowerPoint file to Flash could be helpful. Slide share is also helpful. For me, I will take something like PPT2Flash Pro or things like that.

0

Well, I think you get to convert the powerpoint to flash first. PowerPoint is not a sharable format on Internet. Some tool like PowerPoint to Flash could be helpful for you.

0

Try PowerPoint ActiveX 2.4. This is an ActiveX component that embeds PowerPoint into an OCX.

Since you are using just Internet Explorer 6 and Internet Explorer 7 you can embed this component into the HTML.

0

As a side note: If your intranet users also have access to the Internet, you can use the SlideShare widget to embed your PowerPoint presentations in your website.

(Remember to mark your presentation as private!)

0

I spent a while looking into this and pretty much all of the freeware and shareware on the web sucked. This included software to directly convert the .ppt file to Flash or some sort of video format and also software to record your desktop screen. Software was clunky, and the quality was poor.

The solution we eventually came up with is a little bit manual, but it gave by far the best quality results:

  1. Export the .ppt file into some sort of image format (.bmp, .jpeg, .png, .tif) - it writes out one file per slide
  2. Import all the slide image files into Google Picasa and use them to create a video. You can add in some nice simple transitions (it hasn't got some of the horrific .ppt one's, but who cares) and it dumps out a WMV file of your specified resolution.

Saving out as .wmv isn't perfect, but I'm sure it's probably quite straightforward to convert that to some other format or Flash. We were looking to get them up on YouTube and this did the trick.

0

An easy (and free) way is to download OpenOffice and use Impress to open the PowerPoint presentation. Then export into a separate folder as HTML. Your presentation will consist of separate HTML files and images for each PowerPoint slide. Link to the title page, and you're done.

0

I was looking for a solution for similar problem.

I looked into http://phppowerpoint.codeplex.com/

But they have no better documentation, and even no demo page I could see over there and it was seemingly difficult.

What I came up with is: SkyDrive by Microsoft. https://skydrive.live.com

All you need is an account with them and upload your PPT and embed them straightaway. PPT player is quite clean to use and I like it.

0

I've noticed people recommending some PPT-to-Flash solutions, but Flash doesn't work on mobile devices. There's a hosting service called iSpring Cloud that automatically converts your PPT to combined Flash+HTML5 format and lets you generate an embed code for your website or blog. Full instructions can be found on their website.

0

Another option is to use Apple Keynote on a Mac (Libre Office couldn't event open a pptx I had) to save the presentation to HTML5. It does a pretty good job to produce exactly what it displays in keynote, e.g. it includes animations and video. Compatibility of keynote to powerpoint has it's limits though (independent of the export).

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.