Uso de vistas previas de archivos

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. Por ejemplo, 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 pronto 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
}

Vista previa de PDF

SharePoint Embedded incluye una vista previa de PDF que puede mejorar con los parámetros de consulta anexados a la propiedad driveItem webUrl . Para obtener webUrl, llame a la API GET driveItem, por ejemplo GET /drives/{drive-id}/items/{item-id}?$select=webUrl, y recupere el webUrl campo.

Los parámetros se pasan como una cadena de consulta codificada en embed JSON:

<webUrl>?&embed={"<param1>":<value>,"<param2>":<value>}

Puede incluir uno o varios parámetros en el mismo objeto.

Nota:

Se agregarán parámetros de consulta adicionales a esta sección a medida que se expanda la vista previa de PDF.

Habilita el icono de impresión y la funcionalidad Ctrl+P.

<webUrl>?&embed={"mpp":true}

Sticky Notes (mpsn)

Muestra el contenido de las notas pegajosos si las notas pegajosos están presentes en el PDF.

<webUrl>?&embed={"mpsn":true}
  • Last updated on