Freigeben über

Verwenden von Dateivorschauen

  • Artikel

Einbetten einer Dateivorschau in einen iFrame

Es ist möglich, eine große Bandbreite von Dateien in Ihrem Browser anzuzeigen, ohne eine spezielle Anwendung zu verwenden. Unter den unterstützten Dateien können Sie PDF, JPG, MP4 usw. anzeigen.

Um eine Vorschau einer Datei in einem iframeanzuzeigen, müssen Sie

  1. Aufrufen des driveItem-Vorschauendpunkts von Graph und Abrufen der GetUrl
  2. Verwenden sie die URL in einem iFrame (oder öffnen Sie sie sogar auf einer neuen Seite)

Abrufen der Vorschau-URL mithilfe von Graph

Microsoft Graph bietet den folgenden Endpunkt für die Vorschau einer Datei:

POST https://graph.microsoft.com/{version}/drives/{driveId}/items/{itemId}/preview
  • Version ist die Version von Graph. Beispiel: "v1.0"
  • ist driveId Container-ID (beginnt mit "b!")
  • Die itemId, die die Laufwerkselement-ID ist.

Wenn Sie das Microsoft Graph C#-SDK verwenden, sieht der Code in etwa wie folgt aus:

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

Die JSON-Antwort enthält die Vorschau-URLs für jedes Dokument. Verwenden Sie das in getUrlabgerufene :

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

Tipp

Es ist möglich, das Banner oben zu entfernen, indem Sie den Parameter nb=true zur abgerufenen URL hinzufügen. E.g. https://contoso.sharepoint.com/restOfUrl/embed.aspx?param1=value&nb=true

Achtung

Derzeit enthält getUrl einen Parameter mit einem verschlüsselten Token, der nur mit Ihrer Anwendung verwendet werden kann. Dies kann sich jedoch in naher Zukunft ändern, und Sie werden möglicherweise aufgefordert, einen Authentifizierungsheader wie bei anderen Anforderungen hinzuzufügen.

Verwenden sie die URL in einem iframe

Der nächste Schritt besteht darin, einfach die im vorherigen Schritt abgerufene URL auf einer neuen Seite zu verwenden. Sie könnten einen Endpunkt in Ihrer Anwendung haben, der eine neue Seite ähnlich dem folgenden bereitstellt:

<!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>

Dynamisches Laden der Dokumentvorschau

Wenn Sie beabsichtigen, die Vorschau dynamisch auf derselben Seite zu laden, ohne sie zu verlassen, erhalten Sie möglicherweise einen CORS-Fehler, wenn Sie versuchen, direkt über ein Skript von Ihrer Seite auf den Microsoft Graph-Endpunkt zuzugreifen.

Eine Möglichkeit, dieses Problem zu lösen, besteht darin, einen Endpunkt in Ihrer Anwendung zu erstellen, der die Anforderung sendet und die URL zurückgibt.

Beispielsweise sollte Ihr serverseitiger Code zuerst die Vorschau-URL des Dokuments abrufen:

[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
}

Die clientseitige Anwendung kann dann die API des fetch Browsers verwenden, um die URL anzufordern und in das iframeeinzufügen:

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
}