Compartilhar via

Usando visualizações de arquivo

  • Artigo

Inserindo uma visualização de arquivo em um iFrame

É possível visualizar uma ampla gama de arquivos em seu navegador sem usar um aplicativo especial. Entre os arquivos com suporte, você pode exibir PDF, JPG, MP4 etc.

Para visualizar um arquivo em um iframe, você precisa

  1. Chame o ponto de extremidade de visualização driveItem do Graph e obtenha o GetUrl
  2. Use a URL em um iFrame (ou até mesmo abri-la em uma nova página)

Obter a url de visualização usando o Graph

O Microsoft Graph oferece o seguinte ponto de extremidade para visualizar um arquivo:

POST https://graph.microsoft.com/{version}/drives/{driveId}/items/{itemId}/preview
  • Version é a versão do Graph. Por exemplo, "v1.0"
  • A driveId é ID do Contêiner (começa com "b!")
  • O itemId, que é a ID do item de unidade.

Se você estiver usando o SDK do Microsoft Graph C#, o código será semelhante ao seguinte:

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

A resposta JSON inclui as URLs de visualização de cada documento. Use o obtido em 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"
}

Dica

É possível remover a faixa na parte superior adicionando o parâmetro nb=true à URL obtida. E.g. https://contoso.sharepoint.com/restOfUrl/embed.aspx?param1=value&nb=true

Cuidado

Atualmente , getUrl contém um parâmetro com um token criptografado que só pode ser usado com seu aplicativo. No entanto, isso pode mudar em um futuro próximo e você pode ser solicitado a adicionar um cabeçalho de auth como você faz com outras solicitações.

Usar a URL em um iframe

A próxima etapa é simplesmente usar a URL obtida na etapa anterior em uma nova página. Você pode ter um ponto de extremidade em seu aplicativo que serve uma nova página como semelhante a esta:

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

Carregar a visualização do documento dinamicamente

Se você pretende carregar dinamicamente a visualização na mesma página sem deixá-la, poderá obter um erro CORS se tentar acessar o ponto de extremidade do Microsoft Graph diretamente de um script de sua página.

Uma maneira de resolver esse problema é criar um ponto de extremidade em seu aplicativo que faz a solicitação e retorna a url.

Por exemplo, seu código do lado do servidor deve primeiro obter a url de visualização do documento:

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

Em seguida, o aplicativo do lado do cliente pode usar a API do fetch navegador para solicitar e injetar a url no 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
}