Compartir a través de

Uso de vistas previas de archivos

  • Artículo

Inserción de una vista previa de archivo en un iFrame

Es posible obtener una vista previa de una amplia gama de archivos en el explorador sin usar una aplicación especial. Entre los archivos admitidos, puede ver PDF, JPG, MP4, etc.

Para obtener una vista previa de un archivo en , iframedebe

  1. Llamar al punto de conexión de vista previa driveItem de Graph y obtener getUrl
  2. Use la dirección URL de un iFrame (o incluso ábrala en una página nueva)

Obtención de la dirección URL de vista previa mediante Graph

Microsoft Graph ofrece el siguiente punto de conexión para obtener una vista previa de un archivo:

POST https://graph.microsoft.com/{version}/drives/{driveId}/items/{itemId}/preview
  • Version es la versión de Graph. Por ejemplo, "v1.0"
  • Es el driveId identificador de contenedor (comienza por "b!")
  • , itemIdque es el identificador del elemento de unidad.

Si usa el SDK de C# de Microsoft Graph, el código sería similar al siguiente:

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

La respuesta JSON incluye las direcciones URL de vista previa de cada documento. Use el obtenido en 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"
}

Sugerencia

Es posible quitar el banner en la parte superior agregando el parámetro nb=true a la dirección URL obtenida. E.g. https://contoso.sharepoint.com/restOfUrl/embed.aspx?param1=value&nb=true

Precaución

Actualmente getUrl contiene un parámetro con un token cifrado que solo se puede usar con la aplicación. Sin embargo, esto puede cambiar en un futuro próximo y es posible que se le pida que agregue un encabezado de autenticación como lo hace con otras solicitudes.

Uso de la dirección URL en un iframe

El siguiente paso es simplemente usar la dirección URL obtenida en el paso anterior en una página nueva. Podría tener un punto de conexión en la aplicación que sirva a una nueva página como similar 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>

Carga dinámica de la vista previa del documento

Si tiene intención de cargar dinámicamente la vista previa en la misma página sin salir de ella, puede obtener un error de CORS si intenta acceder al punto de conexión de Microsoft Graph directamente desde un script de la página.

Una manera de solucionar este problema es crear un punto de conexión en la aplicación que realice la solicitud y devuelva la dirección URL.

Por ejemplo, el código del lado servidor debe obtener primero la dirección URL de vista previa del 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
}

A continuación, la aplicación del lado cliente puede usar la API del fetch explorador para solicitar e insertar la dirección URL en 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
}