Spring - скачать ответ в виде файла

Я пишу приложение, используя AngularJS и Spring. Я хотел бы отправить запрос на сервер и загрузить ответ, полученный от контроллера в виде файла. В контроллере у меня есть содержимое файла csv (как строка), т.е. 1;2;3;4 (1 строка, 4 столбца). Каков самый простой способ загрузить этот ответ в виде файла?

Ниже я опубликовал свой упрощенный код. В контроллере Spring:

@RequestMapping(value = "/csv", method = GET)
@ResponseBody
public String getCsvFile() {
    return getCsvContent();
}

В javascript (AngularJS)

return $http({method: 'GET', url: 'csv/'});

Я также пытался написать поток ответов (ниже), установив заголовки, но на стороне клиента я всегда получаю этот контент как строку, а не как файл для загрузки.

@RequestMapping(value = "/csv", method = GET)
@ResponseBody
public void getCsvFile(HttpServletResponse response) {
    response.setContentType("application/csv");
    response.setHeader("Content-Disposition", "attachment; filename=file.csv");
    response.setContentLength(getCsvContent().getBytes().length);
    ServletOutputStream out = response.getOutputStream();
    out.write(getCsvContent());
    out.flush();
    out.close();
}

Кто-нибудь знает, как правильно писать метод контроллера, чтобы загрузить ответ в виде файла на стороне клиента?

Ответ 1

Вы не можете загрузить файл через запрос XHR (каким образом Angular выполняет его запросы). См. Почему трэш не может загрузить файл с помощью ajax-запроса? Вам нужно либо перейти к URL-адресу через $window.open, либо сделать трюк iframe, показанный здесь: JavaScript/jQuery для загрузки файла через POST с данными JSON

Ответ 2

Я сам боролся с этим, пытаясь заставить его работать с сервера. Не удалось. Вместо того, чтобы...

Чтобы пояснить ответ @dnc253, $window.open(URL) - это метод, когда приложение Angular открывает данный URL в другом окне. (Это действительно просто проверяемый прокси-сервер Angular для универсального window.open().) Это отличное решение, сохраняет вашу историю и загружает файл и, возможно, отображает его в этом новом окне браузера, если это поддерживается. Но он часто сталкивается с блокировщиками всплывающих окон, что является огромной проблемой для надежности. Пользователи часто просто не понимают, что происходит с ними. Итак, если вы не возражаете, чтобы сразу загрузить файл с текущим окном, вы можете просто использовать одинаково эффективный универсальный метод javascript: location.href = "uriString", который работает как прелесть для меня. Angular даже не осознает, что что-то случилось. Я называю это в обработчике обещаний, как только моя операция POST/PUT завершена. Если необходимо, попросите POST/PUT вернуть URL-адрес для вызова, если вы не можете его вывести. Вы получите такое же поведение для пользователя, как если бы оно было загружено в ответ на PUT/POST. Например:
```
$http.post(url, payload).then(function(returnData){
    var uriString = parseReturn(returnData);
    location.href="uriString"
})
```
Фактически вы можете загружать что-то прямо из запроса XHR, но для этого требуется полная поддержка API-интерфейса HTML5 и обычно больше проблем, чем стоит, если вам не нужно выполнять локальные преобразования в файле перед вами сделать его доступным для пользователя. (К сожалению, мне не хватает времени, чтобы сообщить подробности об этом, но есть и другие сообщения о его использовании.)

Ответ 3

На всякий случай, если вам это понадобится, Вот несколько ссылок, которые могут вам помочь:

Приветствия

Ответ 4

Можно загрузить файл с помощью запроса XHR. Вы можете использовать angular $http для загрузки файла, а затем использовать функцию Blob для HTML5, чтобы браузер сохранил ее. Существует библиотека, которая может помочь вам с сохранением: FileSaver.js.

Ответ 5

Это работает для меня:

Spring контроллер: DownloadController.java

package com.mycompany.myapp.controller;

import java.io.File;
import java.io.FileInputStream;
import java.io.IOException;
import java.io.InputStream;
import java.io.OutputStream;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.commons.io.IOUtils;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.http.HttpStatus;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.ExceptionHandler;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;

import com.mycompany.myapp.exception.TechnicalException;


@RestController
public class DownloadController {

    private final Logger log = LoggerFactory.getLogger(DownloadController.class);

    @RequestMapping(value = "/download", method = RequestMethod.GET)
    public void download(@RequestParam ("name") String name, final HttpServletRequest request, final HttpServletResponse response) throws TechnicalException {
        log.trace("name : {}", name);

        File file = new File ("src/main/resources/" + name);
        log.trace("Write response...");
        try (InputStream fileInputStream = new FileInputStream(file);
                OutputStream output = response.getOutputStream();) {

            response.reset();

            response.setContentType("application/octet-stream");
            response.setContentLength((int) (file.length()));

            response.setHeader("Content-Disposition", "attachment; filename=\"" + file.getName() + "\"");

            IOUtils.copyLarge(fileInputStream, output);
            output.flush();
        } catch (IOException e) {
            log.error(e.getMessage(), e);
        }

    }

}

Служба AngularJs: download.service.js

(function() {
    'use strict';

    var downloadModule = angular.module('components.donwload', []);

    downloadModule.factory('downloadService', ['$q', '$timeout', '$window',
        function($q, $timeout, $window) {
            return {
                download: function(name) {

                    var defer = $q.defer();

                    $timeout(function() {
                            $window.location = 'download?name=' + name;

                        }, 1000)
                        .then(function() {
                            defer.resolve('success');
                        }, function() {
                            defer.reject('error');
                        });
                    return defer.promise;
                }
            };
        }
    ]);
})();

Конфигурация AngularJs: app.js

(function() {
    'use strict';

    var myApp = angular.module('myApp', ['components.donwload']);
   /* myApp.config([function () {

    }]);
    myApp.run([function () {

    }]);*/


})();

Контроллер AngularJs: download.controller.js

(function() {
    'use strict';

    angular.module('myApp')
        .controller('DownloadSampleCtrl', ['downloadService', function(downloadService) {
            this.download = function(fileName) {
                downloadService.download(fileName)
                    .then(function(success) {
                        console.log('success : ' + success);
                    }, function(error) {
                        console.log('error : ' + error);
                    });
            };
        }]);
})();

index.html

<!DOCTYPE html>
<html ng-app="myApp">

<head>
    <title>My App</title>
    <link rel="stylesheet" href="bower_components/normalize.css/normalize.css" />
    <link rel="stylesheet" href="assets/styles/main.css" />
    <link rel="icon" href="favicon.ico">
</head>

<body>
    <div ng-controller="DownloadSampleCtrl as ctrl">
        <button ng-click="ctrl.download('fileName.txt')">Download</button>
    </div>

    <script src="bower_components/angular/angular.min.js"></script>

    <!-- App config -->
    <script src="scripts/app/app.js"></script>
    <!-- Download Feature -->
    <script src="scripts/app/download/download.controller.js"></script>
    <!-- Components -->
    <script src="scripts/components/download/download.service.js"></script>
</body>

</html>

Ответ 6

//ЧАСТЬ JAVA

@RequestMapping(value = "/report-excel", method = RequestMethod.GET)
    public ResponseEntity<byte[]> getReportExcel(@RequestParam("bookingStatusType") String bookingStatusType,
            @RequestParam("endDate") String endDate, @RequestParam("product") String product, @RequestParam("startDate") String startDate)throws IOException, ParseException {

//Generate Excel from DTO using any logic after that do the following
byte[] body = wb.getBytes();
HttpHeaders header = new HttpHeaders();
        header.setContentType(new MediaType("application", "xlsx"));
        header.set("Content-Disposition", "inline; filename=" + fileName);
        header.setCacheControl("must-revalidate, post-check=0, pre-check=0");
        header.setContentLength(body.length);

 return new ResponseEntity<byte[]>(body, header, HttpStatus.OK);
}



//HTML PART
<html>
<head>
<title>Test</title>
<meta http-equiv="content-type" content="application/x-www-form-urlencoded; charset=UTF-8">
</head>
<body>
  <form name="downloadXLS" method="get" action="http://localhost:8080/rest/report-excel" enctype="multipart/form-data">
    <input type="text" name="bookingStatusType" value="SALES"></input>
    <input type="text" name="endDate" value="abcd"></input>
    <input type="text" name="product" value="FLIGHT"></input>
    <input type="text" name="startDate" value="abcd"></input>
    <input onclick="document.downloadXLS.submit()" value="Submit"></input>
  </form>
</body>
</html>

Ответ 7

Я написал комментарии ниже, чтобы понять пример кода. Некоторые из них, если они используются, могут следовать за ним, так как я назвал файлы соответствующим образом.

Сервер IF посылает blob в ответ, тогда наш клиент должен иметь возможность его создать.
Как моя цель решается с помощью этих. Я могу загружать файлы, так как я использовал тип: "application/*" для всех файлов.
Созданная переменная "downloadLink" - это просто метод, используемый в ответе, чтобы он заполнялся, как некоторые щелкнули по ссылке, затем ответ пришел, а затем его href будет запущен.

controller.js
//this function is in controller, which will be trigered on download button hit.	

  $scope.downloadSampleFile = function() {
//create sample hidden link in document, to accept Blob returned in the response from back end
    
		var downloadLink = document.createElement("a");

		document.body.appendChild(downloadLink);
		downloadLink.style = "display: none";

//This service is written Below how does it work, by aceepting necessary params
		downloadFile.downloadfile(data).then(function (result) {

			var fName = result.filename;
			var file = new Blob([result.data], {type: 'application/*'});
			var fileURL = (window.URL || window.webkitURL).createObjectURL(file);

          
//Blob, client side object created to with holding browser specific download popup, on the URL created with the help of window obj.
          
			downloadLink.href = fileURL;
			downloadLink.download = fName;
			downloadLink.click();
		});
	};




services.js

.factory('downloadFile', ["$http", function ($http) {
	return {
		downloadfile : function () {
			return $http.get(//here server endpoint to which you want to hit the request
              , {
				responseType: 'arraybuffer',
				params: {
					//Required params
				},
			}).then(function (response, status, headers, config) {
				return response;
			});
		},
	};
}])