关于文件下载的问题，如何解决？

Question

springboot word文件下载，没有下载文件，前端responesbody里的是xml格式的数据

前端vue代码

 xiazai () {
           this.$http.get('/admin/abc/xiazai/word').then(res => {
          console.log(1)
        }, err => {
          console.log(2)
        });

      },

后端代码

@Controller
@RequestMapping("/abc" )
@Api(value = "文件下载", tags = "下载")
public class WrodDownLoadController {

    @GetMapping("/xiazai/word")
    public void download(HttpServletRequest request, HttpServletResponse response, String word) throws IOException {
        File file  = new File("D:\\360\\20230307.docx");
        InputStream fin = null;
        ServletOutputStream out = null;
        try {
            // 调用工具类WordGenerator的createDoc方法生成Word文档
            fin = new FileInputStream(file);

            response.setCharacterEncoding("utf-8");
            response.setContentType("application/msword");
            // 设置浏览器以下载的方式处理该文件默认名为resume.doc
            response.addHeader("Content-Disposition","attachment;filename=resume.doc");

            out = response.getOutputStream();
            byte[] buffer = new byte[512]; // 缓冲区
            int bytesToRead = -1;
            // 通过循环将读入的Word文件的内容输出到浏览器中
            while ((bytesToRead = fin.read(buffer)) != -1) {
                out.write(buffer, 0, bytesToRead);
            }
        } catch (Exception e) {
            e.printStackTrace();
        } finally {
            if (fin != null) {
                fin.close();
            }
            if (out != null) {
                out.close();
            }
        }
    }
}

Answer 1

直接把你的前端代码改成这样试试：

xiazai() {
  this.$http.get('/admin/abc/xiazai/word', { responseType: 'blob' })
    .then(res => {
      // 将 response 中的 blob 类型数据转换成一个 URL 对象
      const url = window.URL.createObjectURL(new Blob([res.data]))
      // 创建一个链接，模拟用户点击下载
      const link = document.createElement('a')
      link.style.display = 'none'
      link.href = url
      link.setAttribute('download', 'resume.doc')
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link)
    })
    .catch(err => {
      console.log(err)
    })
}