Powerpoint viewer for react?

Question

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.

score 4 · Answer 1 · edited Nov 15 '21 at 09:21

4

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>

edited Nov 15 '21 at 09:21

Fabian S.

2,441
2
24
34

answered Feb 21 '20 at 10:14

Allan Mogusu

220
1
15

James Mtendamema · Answer 2 · 2022-09-22T04:05:01.057

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.

score 1 · Answer 3 · answered Feb 09 '20 at 19:52

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

Just re-read the question. I will look to see if it's possible for a user-uploaded file. — Ed Lucas, Feb 09 '20 at 19:54

score 1 · Answer 4 · answered Feb 13 '20 at 17:23

1

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.

answered Feb 13 '20 at 17:23

Gennady Dogaev

5,902
1
15
23

I think this could be the only way to go about it, and I do have control over the backend, however, it is built with PHP :(. I'll try to figure out how to do it server-side and send back the PNGs to the frontend. – Ruby Feb 13 '20 at 18:34
@Ruby combining these two libraries might do the trick: [office-converter](https://github.com/ncjoes/office-converter), [pdf-to-image](https://github.com/spatie/pdf-to-image). They use the same principle and require to install libreoffice, imagick and ghostscript – Gennady Dogaev Feb 13 '20 at 18:59

score 0 · Answer 5 · answered Feb 07 '20 at 15:14

0

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!

answered Feb 07 '20 at 15:14

emoore

314
2
11

1

Unfortunately, these options won't work for my case. Thanks for the effort thought :) – Ruby Feb 07 '20 at 15:33

score 0 · Answer 6 · answered Feb 09 '20 at 20:31

0

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

answered Feb 09 '20 at 20:31

Ed Lucas

5,955
4
30
42

That won't work for me, I need a way to display the ppt file directly (coming as a link from an API response) or somehow convert that file to an array of images to display it as a slider. – Ruby Feb 09 '20 at 20:37
It looks as though it's possible to create an "embed" version of the link using "createLink" once your copy the file to One Drive via the API. – Ed Lucas Feb 09 '20 at 20:55
Yes maybe but that would require repurchasing a space on OneDrive and that would lead to another level of complications. – Ruby Feb 09 '20 at 21:02
If you would prefer to convert PPTX files to images, there seems to be a slew of options on github (https://github.com/search?q=ppt+to+image) and some commercial APIs (https://developers.zamzar.com/). – Ed Lucas Feb 09 '20 at 21:05
Do you have a code example on converting PPT files to images? – Ruby Feb 12 '20 at 07:13
Sorry, no I don't. – Ed Lucas Feb 12 '20 at 14:47

Powerpoint viewer for react?

6 Answers6