一、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/