Compartilhar via

Utilizar Pré-visualizações de Ficheiros

Incorporar uma pré-visualização de ficheiros num iFrame

É possível pré-visualizar uma vasta gama de ficheiros no seu browser sem utilizar uma aplicação especial. Entre os ficheiros suportados, pode ver PDF, JPG, MP4, etc.

Para pré-visualizar um ficheiro num iframe, tem de

  1. Chamar o ponto final de pré-visualização driveItem do Graph e obter o GetUrl
  2. Utilizar o URL num iFrame (ou até mesmo abri-lo numa nova página)

Obter o URL de pré-visualização com o Graph

O Microsoft Graph oferece o seguinte ponto final para pré-visualizar um ficheiro:

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

Se estiver a utilizar o SDK C# do Microsoft Graph, o código será semelhante ao seguinte:

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

A resposta JSON inclui os URLs de pré-visualização de cada documento. Utilize 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 ao adicionar o parâmetro nb=true ao URL obtido. Por exemplo, https://contoso.sharepoint.com/restOfUrl/embed.aspx?param1=value&nb=true

Cuidado

Atualmente, getUrl contém um parâmetro com um token encriptado que só pode ser utilizado com a sua aplicação. No entanto, isto pode mudar num futuro próximo e poderá ser-lhe pedido para adicionar um cabeçalho de autenticação, tal como acontece com outros pedidos.

Utilizar o URL num iframe

O próximo passo é simplesmente utilizar o URL obtido no passo anterior numa nova página. Pode ter um ponto final na sua aplicação que serve uma nova página 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 pré-visualização do documento dinamicamente

Se pretender carregar dinamicamente a pré-visualização na mesma página sem a deixar, poderá obter um erro CORS se tentar aceder ao ponto final do Microsoft Graph diretamente a partir de um script a partir da sua página.

Uma forma de resolver este problema é criar um ponto final na sua aplicação que faça o pedido e devolva o URL.

Por exemplo, o código do lado do servidor deve obter primeiro o URL de pré-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, a aplicação do lado do cliente pode utilizar a API do fetch browser para pedir e injetar o 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
}
  • Last updated on