ファイルデータの一部のみが必要な場合は、範囲のダウンロードを使用して、指定された範囲内のデータを取得できます。
注意事項
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 を使用した一時的なアクセス権限付与」をご参照ください。
サンプルコード
次のサンプルコードは、範囲のダウンロードを実行する方法を示しています。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<button id='download'>Download</button>
<!--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({
// バケットが配置されているリージョンに region を設定します。たとえば、バケットが中国 (杭州) リージョンにある場合は、region を oss-cn-hangzhou に設定します。
region: 'yourRegion',
authorizationV4: true,
// Security Token Service (STS) から取得した一時的な AccessKey ID と AccessKey Secret。
accessKeyId: 'yourAccessKeyId',
accessKeySecret: 'yourAccessKeySecret',
// STS から取得したセキュリティトークン (SecurityToken)。
stsToken: 'yourSecurityToken',
// バケット名を指定します。例：examplebucket。
bucket: "examplebucket",
});
// DOM 要素を取得します。
const download = document.getElementById('download')
// 1000 バイトのファイルの場合、有効なバイト範囲は 0 から 999 です。
// 指定された範囲が無効な場合 (たとえば、開始位置または終了位置が負の値であるか、ファイルサイズより大きい場合)、ファイル全体がダウンロードされます。
const start = 0, end = 999
// ボタンにリスナーを追加します。
download.addEventListener('click', () => {
client.get('example.txt',{
headers: {
Range: `bytes=${start}-${end}`,
},
}).then(r => {
// 返されたデータをダウンロード可能な BLOB フォーマットのオブジェクトに変換します。
const newBlob = new Blob([r.content], { type: r.res.headers['content-type'] });
// アンカー要素を作成します。
const link = document.createElement('a')
// href プロパティを要素にアタッチします。
link.href = window.URL.createObjectURL(newBlob)
// ローカルファイルの名前を指定します。
link.download = 'example.txt'
// オブジェクトをダウンロードします。
link.click()
// アタッチされた URL を取り消します。
window.URL.revokeObjectURL(link.href)
})
})
</script>
</body>
</html>