Я пишу приложение, используя 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();
}
Кто-нибудь знает, как правильно писать метод контроллера, чтобы загрузить ответ в виде файла на стороне клиента?
Вы не можете загрузить файл через запрос XHR (каким образом Angular выполняет его запросы). См. Почему трэш не может загрузить файл с помощью ajax-запроса? Вам нужно либо перейти к URL-адресу через $window.open, либо сделать трюк iframe, показанный здесь: JavaScript/jQuery для загрузки файла через POST с данными JSON
Я сам боролся с этим, пытаясь заставить его работать с сервера. Не удалось. Вместо того, чтобы...
Чтобы пояснить ответ @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 и обычно больше проблем, чем стоит, если вам не нужно выполнять локальные преобразования в файле перед вами сделать его доступным для пользователя. (К сожалению, мне не хватает времени, чтобы сообщить подробности об этом, но есть и другие сообщения о его использовании.)
На всякий случай, если вам это понадобится, Вот несколько ссылок, которые могут вам помочь:
Приветствия
Можно загрузить файл с помощью запроса XHR. Вы можете использовать angular $http для загрузки файла, а затем использовать функцию Blob для HTML5, чтобы браузер сохранил ее. Существует библиотека, которая может помочь вам с сохранением: FileSaver.js.
Это работает для меня:
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>
//ЧАСТЬ 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>
Я написал комментарии ниже, чтобы понять пример кода. Некоторые из них, если они используются, могут следовать за ним, так как я назвал файлы соответствующим образом.
Сервер 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;
});
},
};
}])