Axios下载详解

一、Axios下载Excel

Axios是一个可以使用Promise对象实现HTTP客户端的JS库。下载Excel最常用的一种方式就是将后端返回的二进制流转换成Blob对象，然后再通过URL.createObjectURL方法生成下载链接，最后触发a标签的click事件进行下载。

代码示例：

axios.get(url, {
  responseType: 'blob'
}).then(response => {
  const url = window.URL.createObjectURL(new Blob([response.data]));
  const link = document.createElement('a');
  link.href = url;
  link.setAttribute('download', 'file.xlsx');
  document.body.appendChild(link);
  link.click();
});

二、下载 PDF 文件

如下示例所示，在axios下载PDF文件的过程中，在responseType配置项中设置’arraybuffer’，然后对response.data进行Blob的实例化。

代码示例：

axios.get(url, {
  responseType: 'arraybuffer'
}).then(response => {
  const blob = new Blob([response.data], { type: 'application/pdf' });
  const url = window.URL.createObjectURL(blob);
  const link = document.createElement('a');
  link.href = url;
  link.setAttribute('download', 'file.pdf');
  document.body.appendChild(link);
  link.click();
});

三、Axios怎么读

在使用Axios进行读取数据时，需要使用到axios.get、axios.post等请求方式。针对读取数据，axios.get是使用频率最高的方式。

代码示例：

axios.get('/api/data')
  .then(response => {
    console.log(response.data);
  }).catch(error => {
    console.error(error);
  })

四、Axios官网

Axios GitHub官网上有详细的文档和示例，可以方便地学习和使用此JS库。

官网地址：https://github.com/axios/axios

五、Axios跨域

在进行跨域请求时，需要后端同意响应特定的HTTP响应头。

后端配置示例：

// 允许跨域请求的域名和端口
response.setHeader('Access-Control-Allow-Origin', '*');

// 允许跨域请求的HTTP方法
response.setHeader('Access-Control-Allow-Methods', 'GET, PUT, POST, DELETE');

// 允许跨域请求的HTTP头
response.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');

然后通过axios的请求方式进行跨域请求，示例代码如下：

axios.get('http://example.com/resource', {
  headers: { Authorization: 'Bearer ' + token }
}).then(response => {
  console.log(response.data);
}).catch(error => {
  console.error(error);
});

六、美国Axios网站

美国的axios网站是一家总部位于纽约市的新闻网站，提供美国政治、商业和技术领域深入报道。

网址：https://www.axios.com/