reactjsiframemicrosoft-graph-apipowerpoint

Getting the embed URL of a Microsoft PowerPoint programmatically


Is there any way that I can get the embed url of a Microsoft presentation programmatically? I want to use that URL and embed it to an I frame in my react application. I tried using Graph API with the createLink API -

POST /drives/{driveId}/items/{itemId}/createLink

with the type as embed, but the url is different from what we get when we manually create embed url via microsoft web.

I tried to use that url by concatenating it with

https://view.officeapps.live.com/op/embed.aspx?src=

But still it didn't work. Let me know if this is possible or not. Thanks


Solution

  • I was able to get the url from the same Microsoft graph API

    POST /me/drive/items/{itemId}/createLink

    Once done I manually added some query parameters which remains same in all embed urls (em=2&wdAr=1.7777777777777777). Hence this url I was able to use in the iframe tag in react.

    try {
      const response = await fetch(
        `https://graph.microsoft.com/v1.0/me/drive/items/${fileId}/createLink`,
        {
          method: "POST",
          headers: {
            Authorization: `Bearer ${accessToken}`,
            "Content-Type": "application/json",
          },
          body: JSON.stringify({ type: "embed" }),
        }
      );
      if (response.ok) {
        const result = response.json;
        const embed = result.link.webUrl + "?em=2&wdAr=1.7777777777777777"; //got the correct embed url
      }
    } catch (error) {
      console.error("Error creating sharing link:", error);
    }