Previsualizar o descargar un objeto con OSS SDK for Browser.js - Object Storage Service

Use el método signatureUrl en un navegador para generar la URL que permite descargar o previsualizar un objeto. Para obtener la URL de un objeto, puede usar el atributo download del elemento HTML <a> o la API window.open.

Notas de uso

Si usa herramientas de empaquetado como Webpack o Browserify, instale OSS SDK for Browser.js al ejecutar el comando npm install ali-oss.
El navegador rechaza la solicitud cuando se intenta acceder a un bucket de OSS sin reglas de CORS configuradas. Por lo tanto, configure las reglas de CORS del bucket antes de acceder a él desde un navegador. Para más información, consulte Installation.
OSS SDK for Browser.js se usa principalmente en navegadores. Para evitar exponer su par de AccessKey, se recomienda usar credenciales de acceso temporales obtenidas de Security Token Service (STS) al acceder a OSS.

Las credenciales de acceso temporales incluyen un par de AccessKey y un token de seguridad. El par de AccessKey está formado por un AccessKey ID y un AccessKey secret. Para más información sobre cómo obtener credenciales de acceso temporales, consulte Use STS for temporary access authorization.

Obtener la URL de un objeto para previsualizaciones

A continuación se muestra un ejemplo de código para obtener la URL de previsualización de un objeto llamado exampleobject.txt, almacenado en un bucket denominado examplebucket.

Nota

Para previsualizar un objeto en el navegador, establezca Content-Disposition en inline y acceda al objeto mediante el nombre de dominio personalizado asignado al bucket. Para más información, consulte Configure object metadata y Use a custom domain name (Browser.js SDK).

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>

  <body>
    <!-- Import the SDK file -->
    <script
      type="text/javascript"
      src="https://gosspublic.alicdn.com/aliyun-oss-sdk-6.18.0.min.js"
    ></script>
    <script type="text/javascript">
      const client = new OSS({
        // Specify the region in which the bucket is located. For example, if the bucket is located in the China (Hangzhou) region, set the region to oss-cn-hangzhou. 
        region: "yourRegion",
        authorizationV4: true,
        // Specify the temporary AccessKey pair obtained from STS. 
        accessKeyId: "yourAccessKeyId",
        accessKeySecret: "yourAccessKeySecret",
        // Specify the security token obtained from STS. 
        stsToken: "yoursecurityToken",
        // Specify the name of the bucket. 
        bucket: "examplebucket",
      });
      
      // Specify the full path of the object. Do not include the bucket name in the full path. 
      const url = client.signatureUrl("example.jpg", {
        // If you want to add an image style to the generated signed URL, you can use the process parameter to specify the style in the "style/image style name" format. 
        // process: "style/imagestyle",
      });
      console.log(url);

      // Specify the validity period of a signed URL. Unit: seconds. If you do not specify the validity period, the signed URL is valid for 1800 seconds. 
      // url = client.signatureUrl('example.jpg', {expires: 3600});
      // console.log(url);
    </script>
  </body>
</html>

Obtener la URL para descargar un objeto

A continuación se muestra un ejemplo de código para obtener la URL de descarga de un objeto llamado exampleobject.txt, ubicado en un bucket denominado examplebucket. De forma predeterminada, la URL tiene una vigencia de 1,800 segundos.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>

  <body>
    <!-- Import the SDK file -->
    <script
      type="text/javascript"
      src="https://gosspublic.alicdn.com/aliyun-oss-sdk-6.18.0.min.js"
    ></script>
    <script type="text/javascript">
      const client = new OSS({
        // Specify the region in which the bucket is located. For example, if the bucket is located in the China (Hangzhou) region, set the region to oss-cn-hangzhou. 
        region: "yourRegion",
        authorizationV4: true,
        // Specify the temporary AccessKey pair obtained from STS. The AccessKey pair consists of an AccessKey ID and an AccessKey secret. 
        accessKeyId: "yourAccessKeyId",
        accessKeySecret: "yourAccessKeySecret",
        // Specify the security token obtained from STS. 
        stsToken: "yoursecurityToken",
        // Specify the name of the bucket. 
        bucket: "examplebucket",
      });

      // Set the response header to automatically download an object by using the URL, and set the name of the local file after the object is downloaded. 
      const filename = "examplefile.txt";
      const response = {
        "content-disposition": `attachment; filename=${encodeURIComponent(
          filename
        )}`,
      };
      // Specify the full path of the object. Do not include the bucket name in the full path. 
      const url = client.signatureUrl("exampleobject.txt", { response });
      console.log(url);
    </script>
  </body>
</html>