You can use range download to download a specific range of data from an object.
Usage notes
When you use packaging tools such as Webpack and Browserify, install OSS SDK for Browser.js by running the npm install ali-oss command.
If you want to access an OSS bucket from a browser but no CORS rules are configured for the bucket, the browser rejects the request. Therefore, you must configure CORS rules for a bucket if you want to access the bucket from a browser. For more information, see Installation.
In most cases, OSS SDK for Browser.js is used in browsers. To prevent your AccessKey pair from being exposed, we recommend that you use temporary access credentials obtained from Security Token Service (STS) to access OSS.
The temporary access credentials consist of an AccessKey pair and a security token. The AccessKey pair consists of an AccessKey ID and an AccessKey secret. For more information about how to obtain temporary access credentials, see Use STS for temporary access authorization.
Sample code
The following code provides an example on how to perform range download:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<button id='download'>Download</button>
<!-- 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',
// Specify the temporary AccessKey pair obtained from Security Token Service (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. Example: examplebucket.
bucket: "examplebucket",
});
// Query DOM.
const download = document.getElementById('download')
// For an object that is 1,000 bytes in size, the valid range is within the range from byte 0 to byte 999.
// If the specified value range is invalid, the entire object is downloaded. For example, if the specified range includes a negative number or the specified value is greater than the object size, all content of the object is downloaded.
const start = 0, end = 999
// Configure an event listener.
download.addEventListener('click', () => {
client.get('example.txt',{
headers: {
Range: `bytes=${start}-${end}`,
},
}).then(r => {
// Convert the returned data to a Blob object that can be downloaded.
const newBlob = new Blob([r.content], { type: r.res.headers['content-type'] });
// Create a tag.
const link = document.createElement('a')
// Add the href attribute to the tag.
link.href = window.URL.createObjectURL(newBlob)
// Specify the name of the object after it is downloaded to your local device.
link.download = 'example.txt'
// Download the object.
link.click()
// Remove the URL that is added to the tag.
window.URL.revokeObjectURL(link.href)
})
})
</script>
</body>
</html>