CODEWITHSUNDEEP
reactjspowerpointpresentationcontentpresenter
Ruby
Ruby

Reputation: 2909

Powerpoint viewer for react?

I searched a lot for this but couldn't find any package or a guide on how to view a ".ppt" file on a webpage using react.js.

I'm allowing the user to upload a ".ppt" file, and I want him to be able to view that "Powerpoint" file in a web page, is that even possible?

I tried the following but it didn't work ...

<iframe
    src={`https://view.officeapps.live.com/op/embed.aspx?src=[${linkToPPTFile}]`}
    width="100%"
    height="600px"
    frameBorder="0"
></iframe>

Any help will be appreciated.

Upvotes: 15

Views: 30679

Answers (6)

James Mtendamema
James Mtendamema

Reputation: 19

I've been searching for an answer for this for a while and stumbled upon a solution that I think might work for your case too. I used the react-doc-viewer library that enables you to display multiple file types like ppt, word, excel and many more. You can install it with npm, further instructions on this link https://www.npmjs.com/package/react-doc-viewer and simply create a custom viewer component that you can reuse for your files.

Upvotes: 2

Allan Mogusu
Allan Mogusu

Reputation: 240

I also had this similar issue. The problem is with this part src=[${linkToPPTFile}] of your iframe src. Remove the box brackets. It should just be:

<iframe
    src={`https://view.officeapps.live.com/op/embed.aspx?src=${linkToPPTFile}`}
    width="100%"
    height="600px"
    frameBorder="0"
>
</iframe>

Upvotes: 5

Gennady Dogaev
Gennady Dogaev

Reputation: 5991

If you have backend, it is built with node.js and you will have full control over production server (i.e. able to install software there), you can try to covert to png using ppt-png package. Under the hood it uses libreoffice for ppt-pdf conversion and then imagemagick for pdf-png conversion and this is the best approach to task.

Upvotes: 1

Ed Lucas
Ed Lucas

Reputation: 7335

The only possible user-uploaded PPT solution I could find involves uploading a copy of the file to One Drive, using Microsoft's API: https://learn.microsoft.com/en-us/onedrive/developer/rest-api/concepts/upload?view=odsp-graph-online

You could then create a "sharing link" using the API. The URL to the shared file is returned in the API response (https://1drv.ms/...) and anyone using the link can access the document to view it online. See: https://learn.microsoft.com/en-us/onedrive/developer/rest-api/api/driveitem_createlink?view=odsp-graph-online

Upvotes: 0

Ed Lucas
Ed Lucas

Reputation: 7335

It appears that particular Microsoft embed link no longer works. One way to make it happen is to store the PowerPoint file in a public folder online and create an embed code in PowerPoint for the Web (https://www.office.com/launch/powerpoint). The embed code should include an <iframe/> tag.

There's more information about the process here: https://support.office.com/en-us/article/Embed-a-presentation-in-a-web-page-or-blog-19668A1D-2299-4AF3-91E1-AE57AF723A60

Upvotes: 1

emoore
emoore

Reputation: 334

There's some similar information here.

From what I read it seems like you could either convert the powerpoints to flash and display those, or potentially use some sort of tool like slideshare or a google slides extension.

Hope this helps!

Upvotes: 0

Related Questions