Поделиться через

Использование предварительных версий файлов

  • Статья

Внедрение предварительного просмотра файла в iFrame

В браузере можно просмотреть широкий спектр файлов, не используя специальное приложение. Среди поддерживаемых файлов можно просмотреть PDF, JPG, MP4 и т. д.

Для предварительного просмотра файла в iframeнеобходимо выполнить

  1. Вызовите конечную точку предварительной версии driveItem Graph и получите GetUrl
  2. Использование URL-адреса в iFrame (или даже открытие его на новой странице)

Получение URL-адреса предварительного просмотра с помощью Graph

Microsoft Graph предлагает следующую конечную точку для предварительного просмотра файла:

POST https://graph.microsoft.com/{version}/drives/{driveId}/items/{itemId}/preview
  • Version — версия Graph. Например, "v1.0"
  • Идентификатор driveId контейнера is (начинается с "b!")
  • , itemIdкоторый является идентификатором элемента диска.

Если вы используете пакет SDK для Microsoft Graph для C#, код будет выглядеть следующим образом:

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
}

Затем клиентское приложение может использовать API браузера fetch для запроса и внедрения 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
}