axios --- post请求json格式参数实现下载功能

首先在项目里install axios,然后设置axios默认条件，再挂载到vue 上 这样可以全局引用。这里直接具象描述怎么在页面里使用:

代码如下：

 this.$axios({
                    url: '/dlServiceOrder/download',
                    data: params,
                    method: "post",
                    contentType: "application/json;charset=utf-8",
                    responseType: "blob",
                }).then(res=>{
                download(res.data,'要导出的文件名'+formatDate(new Date())+'.xlsx')
            })

download方法为引入的公共方法如下：

export function download (data,titName) {
    if(!data){
        return
    }
    const blob = new Blob([data],{type: "application/vnd.ms-excel"})
    const fileName = titName?titName: '导入模板.xls'
    if ('download' in document.createElement('a')) { // 非IE下载
        const elink = document.createElement('a')
        elink.download = fileName
        elink.style.display = 'none'
        elink.href = URL.createObjectURL(blob)
        document.body.appendChild(elink)
        elink.click()
        URL.revokeObjectURL(elink.href) // 释放URL 对象
        document.body.removeChild(elink)
    } else { // IE10+下载
        navigator.msSaveBlob(blob, fileName)
        navigator.msSaveBlob(blob)
    }
}

通过响应头 content-disposition 获取后端接口定义的文件名

需要后端配合在响应头里定义下面两个属性 ，否则在响应头里无法获取到文件名

response.setHeader("Access-Control-Expose-Headers", "Content-Disposition")

response.setHeader("Content-Disposition", ...)

在响应拦截里 增加下面代码逻辑

    if (response.headers.has('content-disposition') && response.status === 200) {
      return response
    }

页面调用接口时 解析响应头中的fileName 并解码

  exportGroupList(obj).then(res => {
    let temp = res.headers['content-disposition'].split(';')[1].split('filename=')[1]
    let fileName = decodeURIComponent(temp.replace(/"/g, ''))
    download(res.data, fileName)

  })

以上即可，我这里axios 封装具体参考我另一篇request封装。