springBoot+vue项目使用js实现文件下载，下载完成打开文件提示错误

代码逻辑：前台使用axios传递url到后台，后台根据url获取file对象，传递文件流到前台，前台生成a链接下载文件

代码：

（axions方法）

//传递url参数后台通过参数获取文件流的方法
export const downloadFile = (data) => {
  return axios.request({
    url: 'v1/alm/businessDeclarationManagement/downloadFile',
    method: 'post',
    data: data
  })
}

js下载事件：

handlePreview(file){
  const url = file.url;
  if (url !== '' && url !== undefined) {
    var reg = /([^\\/]+)\.([^\\/]+)/i;
    reg.test(url);
    const pre = RegExp.$1
    const sux = RegExp.$2
    downloadFile(url).then(
      res => {
        // alert("请求成功");
        let blob = new Blob([res.data])
        let downloadElement = document.createElement('a')
        // 创建下载的链接
        let href = window.URL.createObjectURL(blob)
        downloadElement.style.display = 'none'
        downloadElement.href = href
        // 下载后文件名
        downloadElement.download = pre + '.' + sux
        document.body.appendChild(downloadElement)
        // 点击下载
        downloadElement.click()
        // 下载完成移除元素
        document.body.removeChild(downloadElement)
        // 释放掉blob对象
        window.URL.revokeObjectURL(href)
        this.$message.success("下载成功")
      })
  }

后端代码：

//下载附件
    @PostMapping("downloadFile")
    public void downloadFiles(@RequestBody String downUrl, HttpServletRequest request, HttpServletResponse response) throws IOException {
        OutputStream outputStream=null;
        InputStream inputStream=null;
        BufferedInputStream bufferedInputStream=null;
        byte[] bytes=new byte[1024];
        File file = new File(downUrl);
        String fileName = file.getName();
        // 获取输出流
        try {
            // StandardCharsets.ISO_8859_1 *=UTF-8'
            // response.setHeader("Content-Disposition", "attachment;filename=" +  new String(fileName.getBytes(StandardCharsets.UTF_8), StandardCharsets.ISO_8859_1));
            response.setHeader("Content-Disposition", "attachment;filename=" +  URLEncoder.encode(fileName, "UTF-8"));
            // 以流的形式返回文件
            response.setContentType("application/octet-stream;charset=utf-8");
            inputStream = new FileInputStream(file);
            bufferedInputStream = new BufferedInputStream(inputStream);
            outputStream = response.getOutputStream();
            int i = bufferedInputStream.read(bytes);
            while (i!=-1){
                outputStream.write(bytes,0,i);
                i = bufferedInputStream.read(bytes);
            }
        } catch (IOException e) {
            e.printStackTrace();
        }finally {
            try {
                if (inputStream != null) {
                    inputStream.close();
                }
                if (outputStream != null) {
                    outputStream.close();
                }
                if (bufferedInputStream != null) {
                    bufferedInputStream.close();
                }
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
    }

这样的话，按正常来说已经是可以实现文件下载的功能了，但是我后面上传文件时（excel文件）出现了一下的错误情况

 

 这是因为缺少 responseType: 'blob'属性

修改（axios代码）：

export const downloadFile = (data) => {
  return axios.request({
    url: 'v1/alm/businessDeclarationManagement/downloadFile',
    responseType: 'blob',
    method: 'post',
    data: data
  })
}

 修改js代码：

let blob = new Blob([res.data])

修改为：

let blob = new Blob([res.data],{
              type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8"
            })