OSS SDK for Browser.jsを使用してオブジェクトをプレビューおよびダウンロードする方法 - Object Storage Service

ブラウザでsignatureUrlメソッドを使用して、オブジェクトをダウンロードまたはプレビューするためのURLを生成できます。 <a> HTML要素のdownload属性またはwindow.open APIを使用して、オブジェクトのURLを取得できます。

使用上の注意

WebpackやBrowserifyなどのパッケージングツールを使用する場合は、npm install ali-OSSコマンドを実行して、oss SDK for Browser.jsをインストールします。
ブラウザからOSSバケットにアクセスしたいが、バケットにCORSルールが設定されていない場合、ブラウザはリクエストを拒否します。したがって、ブラウザからバケットにアクセスする場合は、バケットのCORSルールを設定する必要があります。詳細については、「インストール」をご参照ください。
ほとんどの場合、ブラウザではOSS SDK for Browser.jsが使用されます。 AccessKeyペアが公開されないようにするには、Security Token Service (STS) から取得した一時的なアクセス資格情報を使用してOSSにアクセスすることを推奨します。
一時的なアクセス資格情報は、AccessKeyペアとセキュリティトークンで構成されます。 AccessKeyペアは、AccessKey IDとAccessKeyシークレットで構成されます。一時的なアクセス資格情報を取得する方法の詳細については、「一時的なアクセス権限付与にSTSを使用する」をご参照ください。

プレビュー用のオブジェクトのURLを取得する

次のコードでは、プレビュー用にexamplebucketという名前のバケットでexampleobject.txtという名前のオブジェクトのURLを取得する方法の例を示します。

説明

ブラウザでオブジェクトをプレビューするには、Content-Dispositionをインラインに設定し、バケットにマッピングされたカスタムドメイン名を使用してオブジェクトにアクセスします。詳細については、「オブジェクトメタデータの設定」および「カスタムドメイン名の使用」をご参照ください。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title> ドキュメント </title>
  </head>

  <body>
    <!-- SDKファイルのインポート->
    <スクリプト
      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({
        // バケットが配置されているリージョンを指定します。 たとえば、バケットが中国 (杭州) リージョンにある場合、リージョンをoss-cn-Hangzhouに設定します。 
        region: "yourRegion" 、
        // STSから取得した一時的なAccessKeyペアを指定します。 
        accessKeyId: "yourAccessKeyId" 、
        accessKeySecret: "yourAccessKeySecret" 、
        // STSから取得したセキュリティトークンを指定します。 
        stsToken: "yoursecurityToken" 、
        // バケットの名前を指定します。 
        bucket: "examplebucket" 、
      });
      
      // オブジェクトのフルパスを指定します。 バケット名をフルパスに含めないでください。 
      const url = client.signatureUrl("example.jpg", {
        // 生成された署名付きURLに画像スタイルを追加する場合は、プロセスパラメーターを使用して、「スタイル /画像スタイル名」形式でスタイルを指定できます。 
        // プロセス: "style/imagestyle" 、
      });
      console.log(url);

      // 署名付きURLの有効期間を指定します。 単位は秒です。 有効期間を指定しない場合、署名付きURLは1800秒間有効です。 
      // url = client.signatureUrl('example.jpg ', {expires: 3600});
      // console.log(url);
    </script>
  </body>
</html>

オブジェクトをダウンロードするためのURLの取得

次のコードは、examplebucketという名前のバケットでexampleobject.txtという名前のオブジェクトをダウンロードするためのURLを取得する方法の例を示しています。デフォルトでは、URLの有効期間は1,800秒です。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title> ドキュメント </title>
  </head>

  <body>
    <!-- SDKファイルのインポート->
    <スクリプト
      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({
        // バケットが配置されているリージョンを指定します。 たとえば、バケットが中国 (杭州) リージョンにある場合、リージョンをoss-cn-Hangzhouに設定します。 
        region: "yourRegion" 、
        // STSから取得した一時的なAccessKeyペアを指定します。 AccessKeyペアは、AccessKey IDとAccessKeyシークレットで構成されます。 
        accessKeyId: "yourAccessKeyId" 、
        accessKeySecret: "yourAccessKeySecret" 、
        // STSから取得したセキュリティトークンを指定します。 
        stsToken: "yoursecurityToken" 、
        // バケットの名前を指定します。 
        bucket: "examplebucket" 、
      });

      // URLを使用してオブジェクトを自動的にダウンロードするようにレスポンスヘッダーを設定し、オブジェクトのダウンロード後にローカルファイルの名前を設定します。 
      const filename = "examplefile.txt";
      const response = {
        "content-disposition": 'attachment; filename =${ encodeURIComponent (
          filename
        )}`,
      };
      // オブジェクトのフルパスを指定します。 バケット名をフルパスに含めないでください。 
      const url = client.signatureUrl("exampleobject.txt", { response });
      console.log(url);
    </script>
  </body>
</html>