用Axios、Blob和Download实现无刷新下载文件流

2023-10-21 17:36:50

在日常开发中，经常会遇到需要下载文件的情况。传统的做法是通过a标签来实现，即在a标签的href属性中设置文件的下载地址，然后点击a标签即可下载文件。但是，这种方法存在一个问题，就是页面会刷新。

如果我们希望在不刷新页面的情况下下载文件，可以使用Axios、Blob和Download实现。Axios是一个用于发送HTTP请求的库，Blob是一个表示二进制数据的对象，Download是一个用于下载文件的API。

具体实现步骤如下：

使用Axios发送HTTP请求获取文件的二进制数据。
将二进制数据转换为Blob对象。
调用Download API下载Blob对象。

下面是一个使用Axios、Blob和Download实现无刷新下载文件流的示例代码：

const axios = require('axios');

function downloadFile(url, filename) {
  axios({
    url: url,
    method: 'GET',
    responseType: 'blob',
  }).then((response) => {
    const blob = response.data;
    const downloadUrl = URL.createObjectURL(blob);

    const a = document.createElement('a');
    a.href = downloadUrl;
    a.download = filename;
    a.click();

    URL.revokeObjectURL(downloadUrl);
  }).catch((error) => {
    console.error(error);
  });
}