Vue Axios如何实现长尾词的文件下载POST请求？

本文共计352个文字，预计阅读时间需要2分钟。

原文示例：本文字例为大家分享了vue+axios实现POST文件下载的整体代码，供大家参考。具体内容如下+功能：点击导出按钮，提交请求，下载excel文件；这里是axios的POST方法。GET方法请点击这里=》

修改后：以下为vue+axios实现POST文件下载的示例代码，供大家参考。功能包括：点击导出按钮，提交请求，下载excel文件。

本文实例为大家分享了vue+axios实现post文件下载的具体代码，供大家参考，具体内容如下

功能：点击导出按钮，提交请求，下载excel文件；

这里是axios的post方法。get方法请点击这里=》here

第一步：跟后端童鞋确认交付的接口的response header设置了

以及返回了文件流。

第二步：修改axios请求的responseType为blob，以post请求为例：

axios({ method: 'post', url: 'api/user/', data: { firstName: 'Fred', lastName: 'Flintstone' }, responseType: 'blob' }).then(response => { this.download(response) }).catch((error) => { })

第三步：请求成功，拿到response后，调用download函数（创建a标签，设置download属性，插入到文档中并click）

methods: { // 下载文件 download (data) { if (!data) { return } let url = window.URL.createObjectURL(new Blob([data])) let link = document.createElement('a') link.style.display = 'none' link.href = url link.setAttribute('download', 'excel.xlsx') document.body.appendChild(link) link.click() } }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持易盾网络。