axios实现文件下载，附前后端代码

前端代码

注意：必须设置返回类型为Blob类型responseType: ‘blob’ ，否则下载的音频无法播放！

export function recordingDownload(id, fileName) {
  return request({
    url: process.env.VUE_APP_GATEWAY + '/' + process.env.VUE_APP_CORE + '/recordingDownload/recordingDownload',
    method: 'post',
    contentType: 'application/json',
    data: { 'id': id },
    responseType: 'blob'// 必须设置返回类型为Blob类型
  }).then(
    res => {
      if (res.status === 200) {
        const url = window.URL.createObjectURL(new Blob([res.data])) //创建指向Blob对象的Url
        const link = document.createElement('a')//创建a标签
        link.style.display = 'none'//设置a标签的样式
        link.href = url//设置a标签链接地址
        link.setAttribute('download', decodeURIComponent(fileName))//此处fileName也可以从后端返回的响应头里拿到
        document.body.appendChild(link)//把新建的a标签追加到body
        link.click()//触发单机事件
        URL.revokeObjectURL(link.href) // 释放URL对象
        document.body.removeChild(link)//移除a标签
      }
    }
  )
}

后端代码

@PostMapping("/recordingDownload")
    @ApiOperation(value = "单个录音文件下载")
    public void  recordingDownloadZIP(@RequestModel Long id ) throws IOException {
        System.out.println("zhixing");
        //根据id查询单条需要下载的数据
        RecordInfo recordInfo = recordingDownloadService.queryRecordInfo(id);
        String path = recordInfo.getVoicePath();
        File file = ResourceUtils.getFile(path);
        long length = file.length();
        response.reset();
        response.setHeader("Content-Length", length + "");
        response.setHeader("Content-Disposition", "attachment; filename=" + recordInfo.getFileName());//设置该请求头，目的是告诉浏览器不是预览而是下载（尤其是对图片下载，需要指定）
        response.setContentType("application/octet-stream");//对于未知文件类型的，需要这么指定，如果知道文件具体类型可以具体到audio或者mp3
        OutputStream os = response.getOutputStream();
        FileInputStream fis = new FileInputStream(file);
        FileCopyUtils.copy(fis, os);//此处是封装了write方法
    }