How to download data within a specified range using the Browser.js SDK - Object Storage Service

If you only need a portion of a file's data, you can use a range download to retrieve data within a specified range.

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 sample code shows how to perform a 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({
      // Set region to the region where your bucket is located. For example, if your bucket is in the China (Hangzhou) region, set region to oss-cn-hangzhou.
      region: 'yourRegion',
      authorizationV4: true,
      // The temporary AccessKey ID and AccessKey secret obtained from Security Token Service (STS).
      accessKeyId: 'yourAccessKeyId',
      accessKeySecret: 'yourAccessKeySecret',
      // The security token (SecurityToken) obtained from STS.
      stsToken: 'yourSecurityToken',
      // Specify the bucket name. For example, examplebucket.
      bucket: "examplebucket",
    });

    // Get the DOM element.
    const download = document.getElementById('download')
    // For a 1000-byte file, the valid byte range is 0 to 999.
    // If the specified range is invalid, for example, the start or end position is a negative value or is greater than the file size, the entire file is downloaded.
    const start = 0, end = 999
    // Add a listener to the button.
    download.addEventListener('click', () => {
      client.get('example.txt',{
        headers: {          
          Range: `bytes=${start}-${end}`,
        },
      }).then(r => {
        // Convert the returned data into a downloadable object in BLOB format.
        const newBlob = new Blob([r.content], { type: r.res.headers['content-type'] });
        // Create an anchor element.
        const link = document.createElement('a')
        // Attach the href property to the element.
        link.href = window.URL.createObjectURL(newBlob)
        // Specify the name of the local file.
        link.download = 'example.txt'
        // Download the object.
        link.click()
        // Remove the attached URL.
        window.URL.revokeObjectURL(link.href)
      })
    })

  </script>
</body>

</html>

References

For the complete sample code for range downloads, see the GitHub example.
For the API reference for range downloads, see GetObject.