如何使用Springboot @RestController通过ajax下载文件

时间:2017-06-24 16:04:28

标签: javascript xmlhttprequest

我有一个Springboot休息控制器来下载文件。我正在尝试使用浏览器访问端点,并能够在xhr.response中查看响应。但是,我想强制下载我无法实现的文件。

代码如下: 基于休息的端点(Springboot):

    @GetMapping(value = "download/{id}", produces = MediaType.APPLICATION_OCTET_STREAM_VALUE, consumes = "*/*")
public ResponseEntity<InputStreamResource> getFile(@PathVariable("id") Long contractId) {

    Contract contract;
    contract = this.contractRepository.findOne(contractId);
    System.out.println(contract.getPath()); // test
    InputStreamResource resource    = null;
    HttpHeaders         respHeaders = new HttpHeaders();

    if (contract != null) {

        try {
            File            file            = new File(contract.getPath());
            FileInputStream fileInputStream = new FileInputStream(file);
            resource = new InputStreamResource(fileInputStream);
            System.out.println(resource.exists());//test

            respHeaders.add("Content-Type", URLConnection.guessContentTypeFromStream(fileInputStream));
            respHeaders.add("Cache-Control", "no-cache, no-store, must-revalidate");
            respHeaders.add("Pragma", "no-cache");
            respHeaders.add("Expires", "0");
            respHeaders.add("Content-Disposition", "attachment;filename=" + file.getName());
            respHeaders.add("Content-Transfer-Encoding", "Binary");
            respHeaders.setContentLength(file.length());
        } catch (IOException e) {
            e.printStackTrace();
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

    return new ResponseEntity<InputStreamResource>(
            this.companyService.downloadContract(contractId),
            respHeaders,
            HttpStatus.OK
    );


}

我的xhr请求如下

 var xhr = new XMLHttpRequest();
 xhr.open("GET", http.getHRTargetURL() + "download/" + id, true);
 xhr.setRequestHeader("X-Auth-Token", http.getToken());
 xhr.setRequestHeader("Accept", "application/octet-stream");
 xhr.setRequestHeader("Content-Type", "application/octet-stream");
 
 xhr.onreadystatechange = function () {
     if (xhr.readyState == 4 && xhr.response != "0") {
         console.log(xhr)
         console.log("Downloaded file");
     } else {
        console.log("error downloading document")
     }
  }
xhr.send();

我能够从端点获得响应。我可以在浏览器的xhr响应中看到文件内容 enter image description here

我的问题是如何在浏览器上强制响应弹出文件保存向导。

2 个答案:

答案 0 :(得分:0)

你可以这样试试。

xhr.onreadystatechange = function () {
     if (xhr.readyState == 4 && xhr.response != "0") {
         console.log(xhr)
        var windowUrl = window.URL || window.webkitURL;
        var url = windowUrl.createObjectURL(xhr);
        anchor.prop('href', url);
        anchor.prop('download', "filename");
        anchor.get(0).click();
        windowUrl.revokeObjectURL(url);
         console.log("Downloaded file");
     } else {
        console.log("error downloading document")
     }
  }
xhr.send();

答案 1 :(得分:0)

好吧,我发现问题出在前端,与后端无关,因为Springboot正在发回适当的响应。

在Dinesh上面提供的答案的基础上,我修改了我的答案如下

download(id, name){

    var xhr = new XMLHttpRequest();
    xhr.open("GET", http.getHRTargetURL() + "download/" + id, true);
    xhr.setRequestHeader("X-Auth-Token", http.getToken());
    xhr.setRequestHeader("Content-Type", "application/octet-stream");
    xhr.responseType       = "blob";

    xhr.onreadystatechange = function () {
      if (xhr.readyState == 4) {
        var a = document.createElement("a");
        document.body.appendChild(a);
        a.style    = "display: none";
        var url    = window.URL.createObjectURL(new Blob([xhr.response], {type: "octet/stream"}));
        a.href     = url;
        a.download = name;
        a.click();
        window.URL.revokeObjectURL(url);
      } else {
        console.log("error downloading document")
      }
    }
    xhr.send();

  }