Partager via

Utilisation des aperçus de fichiers

  • Article

Incorporation d’un aperçu de fichier dans un iFrame

Il est possible d’afficher un aperçu d’un large éventail de fichiers dans votre navigateur sans utiliser d’application spéciale. Parmi les fichiers pris en charge, vous pouvez afficher des fichiers PDF, JPG, MP4, etc.

Pour afficher un aperçu d’un fichier dans un iframe, vous devez

  1. Appeler le point de terminaison d’aperçu driveItem de Graph et obtenir le GetUrl
  2. Utiliser l’URL dans un iFrame (ou même l’ouvrir dans une nouvelle page)

Obtenir l’URL d’aperçu à l’aide de Graph

Microsoft Graph offre le point de terminaison suivant pour afficher un aperçu d’un fichier :

POST https://graph.microsoft.com/{version}/drives/{driveId}/items/{itemId}/preview
  • Version est la version de Graph. Par exemple , « v1.0 »
  • est driveId l’ID de conteneur (commence par « b ! »)
  • itemId, qui est l’ID de l’élément de lecteur.

Si vous utilisez le Kit de développement logiciel (SDK) C# Microsoft Graph, le code ressemble à ce qui suit :

ItemPreviewInfo preview = await graphServiceClient.Drives[driveId].Items[itemId]
    .Preview()
    .Request()
    .PostAsync();

La réponse JSON inclut les URL d’aperçu pour chaque document. Utilisez celui obtenu dans getUrl:

{
  "getUrl": "https://www.onedrive.com/embed?foo=bar&bar=baz",
  "postParameters": "param1=value&param2=another%20value",
  "postUrl": "https://www.onedrive.com/embed_by_post"
}

Conseil

Il est possible de supprimer la bannière en haut en ajoutant le paramètre nb=true à l’URL obtenue. Par exemple, https://contoso.sharepoint.com/restOfUrl/embed.aspx?param1=value&nb=true

Attention

Actuellement , getUrl contient un paramètre avec un jeton chiffré qui ne peut être utilisé qu’avec votre application. Toutefois, cela peut changer dans un avenir proche et vous pouvez être invité à ajouter un en-tête d’authentification comme vous le faites avec d’autres demandes.

Utiliser l’URL dans un iframe

L’étape suivante consiste simplement à utiliser l’URL obtenue à l’étape précédente dans une nouvelle page. Vous pouvez avoir un point de terminaison dans votre application qui sert une nouvelle page semblable à celle-ci :

<!DOCTYPE html>
<html>
  <body>
    <h2>Preview</h2>
    <p>Preview of {file name}:</p>

    <iframe src="{preview URL}" height="200" width="300" id="preview" title="Iframe Example"></iframe>
  </body>
</html>

Charger dynamiquement l’aperçu du document

Si vous envisagez de charger dynamiquement l’aperçu dans la même page sans le quitter, vous pouvez obtenir une erreur CORS si vous tentez d’accéder au point de terminaison Microsoft Graph directement à partir d’un script à partir de votre page.

Une façon de résoudre ce problème consiste à créer un point de terminaison dans votre application qui effectue la requête et retourne l’URL.

Par exemple, votre code côté serveur doit d’abord obtenir l’URL d’aperçu du document :

[HttpGet]
[AuthorizeForScopes(Scopes = new string[] { "Files.Read.All" })]
public async Task<ActionResult<string>> GetPreviewUrl(string driveId, string itemId)
{
  // Obtain tokens for the the request
  // Use the function created in the first step
  return url + "&nb=true"; //Use nb=true to suppress banner
}

L’application côté client peut ensuite utiliser l’API du fetch navigateur pour demander et injecter l’URL dans :iframe

async function preview(driveId, itemId) {
  const url = `/GetPreviewUrl?driveId=${driveId}&itemId=${itemId}`;
  const response = await fetch(url, {
      credentials: 'include',
  }).then(response => response.text());

  document.getElementById('preview').src = response + "&nb=true"; //Use nb=true to suppress banner
}