JS implements Blob file stream download

1. Download

In JavaScript, you can use the Blob object and URL.createObjectURL() method provided by the browser to implement file stream downloading.
Here is a sample code to help you understand how to implement file streaming download in JavaScript:

function downloadFile(data, filename, type) {
    
    
    // 创建 Blob 对象
    const blob = new Blob([data], {
    
     type: type });

    // 判断当前浏览器是否是IE，由于IE是没有download 方法的，需要用msSaveBlob() 或 msSaveOrOpenBlob()
    if (window.navigator && window.navigator.msSaveOrOpenBlob) {
    
    
        // 兼容IE
        window.navigator.msSaveOrOpenBlob(blob, filename)
    } else {
    
    
        // 创建 URL 对象
        const url = URL.createObjectURL(blob);

        // 创建链接
        const link = document.createElement('a');
        link.href = url;
        link.download = filename;

        // 模拟点击链接进行下载
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);

        // 释放 URL 对象
        URL.revokeObjectURL(url);
    }
}

In this example, we define a downloadFile() function that accepts three parameters: data, filename andtype. Among them, data represents the data stream to be downloaded, filename represents the file name to be saved, and type represents the file type to be downloaded.

In the function, we first create a binary data stream using the Blob object, and then create a URL object using the URL.createObjectURL() method. Next, we create a link element and set the link element's href attribute to the URL of the URL object and the download attribute to the name of the file to be saved. Finally, we simulate clicking on the link element to initiate the download operation.

When the download is complete, we need to release the URL object so that the browser can reclaim the memory of this object. This operation can be achieved using the URL.revokeObjectURL() method.

Note: Use window.navigator.msSaveOrOpenBlob or window.navigator.msSaveBlob to process Blob objects in IE
Usage:

1.msSaveOrOpenBlob: Provides save and open buttons
2.msSaveBlob: Provides only one save button

2. Request

When using axios request, addresponseType: 'blob' input parameter. An example request is as follows:

axios({
    
    
  // 请求头  
  headers: {
    
    
      Content-Type: 'application/json;charset=utf-8'  
  },
  responseType: 'blob', // // `responseType` 表示浏览器将要响应的数据类型,选项有'arraybuffer', 'document', 'json', 'text', 'stream',浏览器专属：'blob',默认是'json'
  method: 'get', // 类型根据实际接口是get还是post
  url: '接口URL',
  params: {
    
    }, // URL参数
});

Because we are using file stream downloading, the response object returned is not of the json type and needs to be replaced by the blob type.

3. Example

Take downloading excel as an example:

axios({
    
    
  headers: {
    
    
    'Content-Type': 'application/json;charset=utf-8'
  },
  responseType: 'blob',
  method: 'get',
  url: '#',
  params: {
    
    }
}).then(res => {
    
    
  downloadFile(res, '文件名称','application/xlsx')
})

According to the request method, whether it is a get request or post request, downloading different files corresponds to different Blob Type, here the excel file download uses application/xlsx, if you are downloading other types of files, change to other types.
BlobRelated documents can be viewed at the link:
https://developer.mozilla.org/zh-CN/docs/Web/API/Blob/type< /span>