Comment utiliser le SDK OSS pour Browser.js pour prévisualiser et télécharger un objet - Object Storage Service

Utilisez la signatureUrl dans un navigateur pour générer l'URL de téléchargement ou de prévisualisation d'un objet. Vous pouvez récupérer cette URL via l'attribut download de l'élément HTML <a> ou l'API window.open.

Remarques

Si vous utilisez des outils d'empaquetage tels que Webpack et Browserify, installez le SDK OSS pour Browser.js en exécutant la commande npm install ali-oss.
Le navigateur rejette toute requête adressée à un compartiment OSS depuis lequel aucune règle CORS n'est configurée. Vous devez donc configurer des règles CORS pour le compartiment afin d'y accéder depuis un navigateur. Pour plus d'informations, consultez Installation.
Le SDK OSS pour Browser.js s'exécute côté client. Pour éviter d'exposer votre paire AccessKey, nous vous recommandons d'utiliser des identifiants d'accès temporaires obtenus via Security Token Service (STS) pour accéder à OSS.

Les identifiants d'accès temporaires comprennent une paire AccessKey et un jeton de sécurité. La paire AccessKey se compose d'un AccessKey ID et d'un AccessKey Secret. Pour savoir comment obtenir ces identifiants, consultez Utilisation de STS pour une autorisation d'accès temporaire.

Obtention de l'URL de prévisualisation d'un objet

L'exemple de code suivant montre comment obtenir l'URL de prévisualisation d'un objet nommé exampleobject.txt stocké dans un compartiment nommé examplebucket.

Remarque

Pour prévisualiser un objet dans un navigateur, définissez l'en-tête Content-Disposition sur inline et utilisez le nom de domaine personnalisé associé au compartiment. Pour plus d'informations, consultez Configuration des métadonnées d'objet et Utilisation d'un nom de domaine personnalisé (SDK Browser.js).

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

Obtention de l'URL de téléchargement d'un objet

L'exemple de code suivant montre comment obtenir l'URL de téléchargement d'un objet nommé exampleobject.txt stocké dans un compartiment nommé examplebucket. Par défaut, l'URL est valide pendant 1 800 secondes.

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