Browser.js SDK を使用してファイルをプレビューおよびダウンロードする方法 - Object Storage Service

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

注意事項

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 Secret で構成されます。一時的なアクセス認証情報の取得方法の詳細については、「STS を使用した一時的なアクセス権限付与」をご参照ください。

ファイルのプレビュー URL の取得

次のコードは、examplebucket バケット内の exampleobject.txt ファイルのプレビュー URL を取得する方法の例です。

説明

ブラウザでファイルを直接プレビューする場合は、オブジェクトの `Content-Disposition` ヘッダーを `inline` に設定し、バケットにアタッチされたカスタムドメイン名を使用してオブジェクトにアクセスできます。詳細については、「オブジェクトのメタデータの設定」および「カスタムドメイン名の使用 (Browser.js SDK)」をご参照ください。

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

  <body>
    <!--SDK ファイルをインポートします。-->
    <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({
        // バケットが所在するリージョンを設定します。たとえば、バケットが中国 (杭州) リージョンにある場合、リージョンを oss-cn-hangzhou に設定します。
        region: "yourRegion",
        authorizationV4: true,
        // STS から取得した一時的な AccessKey ペア (AccessKey ID と AccessKey Secret) です。
        accessKeyId: "yourAccessKeyId",
        accessKeySecret: "yourAccessKeySecret",
        // STS から取得したセキュリティトークン (SecurityToken) です。
        stsToken: "yoursecurityToken",
        // バケット名を指定します。
        bucket: "examplebucket",
      });
      
      // オブジェクトの完全なパスを指定します。完全なパスにバケット名を含めることはできません。
      const url = client.signatureUrl("example.jpg", {
        // アクセスしたいイメージにイメージスタイルを適用するには、process パラメーターでスタイルを指定します。フォーマット： style/StyleName
        // process: "style/imagestyle",
      });
      console.log(url);

      // URL の有効期間を秒単位で指定します。このパラメーターを指定しない場合、デフォルト値の 1800 が使用されます。
      // url = client.signatureUrl('example.jpg', {expires: 3600});
      // console.log(url);
    </script>
  </body>
</html>

ファイルのダウンロード URL の取得

次のコードは、examplebucket バケット内の exampleobject.txt ファイルのダウンロード URL を取得する方法の例です。URL のデフォルトの有効期間は 1800 秒です。

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

  <body>
    <!--SDK ファイルをインポートします。-->
    <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({
        // バケットが所在するリージョンを設定します。たとえば、バケットが中国 (杭州) リージョンにある場合、リージョンを oss-cn-hangzhou に設定します。
        region: "yourRegion",
        authorizationV4: true,
        // STS から取得した一時的な AccessKey ペア (AccessKey ID と AccessKey Secret) です。
        accessKeyId: "yourAccessKeyId",
        accessKeySecret: "yourAccessKeySecret",
        // STS から取得したセキュリティトークン (SecurityToken) です。
        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>