Как активировать Spinner для загрузки файла или Как загрузить файл в браузер, если в качестве приложения с именем файла получен ответ ресурса AngularJS $

Question

Я могу успешно загрузить, используя приведенную ниже строку кода в контроллере AngularJS.

$window.location.href =$rootScope.urlBase+'/dios/download/lineitemexcel/'+$routeParams.id

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

Проблема с корнем: Как включить спиннер с существующим плагином в проекте angular-spinner или usSpinnerService?если у этого есть решение, у меня нет следующего вопроса.

Чтобы решить эту проблему, я прошел существующий рабочий процесс прядильщика.Spinner работает, если есть $resource вызов.

Следовательно, выше URL, который я попытался, сформировав заводской вызов, как показано ниже:

Сервис:

factory('Dios', ['$resource','$rootScope',
        function($resource, $rootScope){
            return $resource($rootScope.urlBase+'/dios/:id/:status/:third/:fourth/:fifth/:pageNo', {}, {
                get: {
                    method: 'GET'
                },
                update: {
                    method: 'PUT'
                },
                getexcel: {
                    method: 'GET',
                    transformResponse: function(data, headers,status){
                        var dataTransformed = {};
                        dataTransformed.data=data;
                        dataTransformed.headers=headers;
                        dataTransformed.status=status;
                        return dataTransformed;
                    }
                }
            });
        }])

Контроллер:

Dios.getexcel({dios:'dios',third:'download',fourth:'lineitemexcel',fifth: $routeParams.id},function(data){
                console.log(data);
]);

Использование вышеуказанного заводского вызова rest call с Id объекта.Этот объект мне нужно извлечь и обработать с помощью библиотеки Apache POI JAVA, а библиотека Apache POI вернется в качестве вложения со свойствами заголовка ответа на вкладке сети инструментов разработчика следующим образом:

HTTP / 1.1 200

X-Content-Type-Options: nosniff

X-XSS-Protection: 1;mode = block

Cache-Control: no-cache, no-store, max-age = 0, must-revalidate

Pragma: no-cache

Срок действия: 0

X-Frame-Options: DENY

Access-Control-Allow-Origin: http://10.218.39.45:9000

Access-Control-Allow-Credentials: true

Access-Control-Allow-Methods: POST, GET, PUT, OPTIONS, DELETE

Access-Control-Allow-Headers: Content-Type, X-Requested с, accept, Origin, Access-Control-Request-Metod, заголовки Access-Control-Request *

Заголовки Access-Control-Expose-Headers: 1, Access-Control-Allow-Origin, Access-Control-Allow-Credentials

Content-Disposition: вложение;имя_файла = LineItems-of_IO-1553-8531Testing_2018-09-18.xlsx

Тип содержимого: application / vnd.ms-excel

Кодирование передачи: chunked

Дата: Вт, 18 сен. 2018 08:33:46 GMT

Таким образом, я могу получить счетчик, но я не уверен, как загрузить ответ, полученный как файл с указанным именем в заголовках ответов.

с использованием transformResponse: Я ожидаю информацию о заголовках ответа, но она не привязывается к заголовкам в transformResponse:.

Так что, пожалуйста, помогите мне получить спиннер, который запускается для window.location.href=urlили помогите как скачать полученные данные через $resource.

Answer 1

Во-первых, этот вопрос не имеет никакого отношения к самому angularjs, это проблема чистого js. Для скачивания доступны 2 варианта:

1. Загрузите файл с помощью Ajax, а затем сохраните его на диске с помощью createObjectURL.
2. Скачать файл обычным способом, т.е. просто href.

Эти два действительно разные: -1st не будет работать в некоторых браузерах -1st дает вам полный доступ к запросу, вы можете удобно обрабатывать ошибки и т. Д. -2-й запуск загрузки параллельно, например в Chrome вы можете закрыть вкладку с приложением, но загрузка все равно будет продолжаться

В первом способе показ прядильщика относительно прост, вы делаете это так же, как и для любого другого запроса.

Вторым способом вы обычно не хотите показывать счетчик, когда идет загрузка, так как браузер покажет вам прогресс. Тем не менее, до начала загрузки - до того, как отклик пришел с сервера, вам иногда может потребоваться показать некоторое ожидание, и единственный способ сделать это - использовать куки:

• Вы добавляете некоторый параметр в запрос на скачивание, например, мой-куки-ID = cookie_123
• сервер устанавливает cookie cookie_123 в ответ
• после нажатия на ссылку вы проверяете значение этого файла cookie (например, каждые 100 мс)
• когда вы видите это значение cookie, ваш файл начинает загружаться

Answer 2

Я не вижу способа показать счетчик при загрузке файла напрямую, используя window.location.

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

Удалить trasnformResponse из $ resource

Написать функцию для загрузки файла

var a = document.createElement("a");
document.body.appendChild(a);
a.style = "display: none";

$scope.downloadFile= function(data, fileName, contentType) {
    var blob = new Blob([data], {
      type: contentType
    });
    var url = URL.createObjectURL(blob);
    a.href = url;
    a.download = fileName;
    a.click();
//hide spinner here
    window.URL.revokeObjectURL(url);
}

Измените свой вызов функции как

Dios.getexcel({dios:'dios',third:'download',fourth:'lineitemexcel',fifth: $routeParams.id},function(data, responseHeader){
    $scope.downloadFile(data, responseHeader()['Content-Disposition'].split('filename=')[1] , responseHeader()['Content-Type']);
]);