通过

使用文件预览

  • 项目

在 iFrame 中嵌入文件预览

无需使用特殊应用程序即可在浏览器中预览 各种 文件。 在支持的文件中，你可以查看 PDF、JPG、MP4 等。

若要在 中 iframe预览文件，需要

  1. 调用 Graph 的 driveItem 预览版终结点并获取 GetUrl
  2. 在 iFrame (中使用 URL，甚至在新页面中打开它)

使用 Graph 获取预览 URL

Microsoft Graph 提供以下终结点来 预览文件：

POST https://graph.microsoft.com/{version}/drives/{driveId}/items/{itemId}/preview
  • Version 是 Graph 的版本。 例如“v1.0”
  • 是 driveId 容器 ID (以“b！”开头)
  • ， itemId它是驱动器项 ID。

如果使用的是 Microsoft Graph C# SDK，则代码将类似于以下内容：

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

JSON 响应包括每个文档的预览 URL。 使用 在 中获取的 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"
}

提示

通过将 参数 nb=true 添加到获取的 URL，可以删除顶部的横幅。 例如 https://contoso.sharepoint.com/restOfUrl/embed.aspx?param1=value&nb=true

警告

目前 getUrl 包含一个参数，其中包含只能与应用程序一起使用的加密令牌。 但是，这种情况可能会在不久的将来更改，并且可能会要求你添加身份验证标头，就像处理其他请求一样。

在 中使用 URL iframe

下一步只是在新页面中使用上一步中获取的 URL。 应用程序中可能有一个终结点，该终结点提供与以下类似的新页面：

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

动态加载文档预览

如果打算在同一页中动态加载预览而不离开预览，如果尝试直接从页面的脚本访问 Microsoft Graph 终结点，则可能会收到 CORS 错误。

解决此问题的一种方法是在应用程序中创建一个终结点，用于发出请求并返回 URL。

例如，服务器端代码应首先获取文档的预览 URL：

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

然后，客户端应用程序可以使用浏览器的 fetch API 请求 URL 并将其注入到 中 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
}