如何用Vue和Axios实现基于POST请求的文件下载？

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

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

简化版：本文提供vue+axios实现文件下载代码，包括功能介绍和代码示例。功能：点击导出下载excel文件；这是POST方法实现。GET方法见链接。

本文实例为大家分享了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() } }

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