次の方法で共有

ファイル プレビューの使用

  • [アーティクル]

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

ヒント

取得した URL に パラメーター nb=true を追加することで、上部のバナーを削除できます。 例えば。 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 エラーが発生する可能性があります。

この問題を解決する方法の 1 つは、要求を行って 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
}