Angular에서 서버에서 텍스트/csv 콘텐츠를 파일로 다운로드

Angular에서 서버에서 텍스트/csv 콘텐츠를 파일로 다운로드

스트리밍을 시도하고 있습니다.csvnode.displays 서버에서 파일을 가져옵니다.서버 부분은 매우 단순합니다.

server.get('/orders' function(req, res) {
  res.setHeader('content-type', 'text/csv');
  res.setHeader('content-disposition', 'attachment; filename='orders.csv');
  return orders.pipe(res); // assuming orders is a csv file readable stream (doesn't have to be a stream, can be a normal response)
}

앵글 컨트롤러로 이런 걸 하려고 하는데

$scope.csv = function() {
    $http({method: 'GET', url: '/orders'});
};

이 기능은 버튼을 클릭했을 때 호출됩니다.ng-click내 견해로는:

<button ng-click="csv()">.csv</button>

Angular의 서버에서 파일을 다운로드하는 것에 대한 다른 답변을 찾아봤지만, 나에게 맞는 답을 찾지 못했습니다.이것을 하는 일반적인 방법이 있나요?간단해 보여야 할 것 같은데

$http서비스는 a를 반환한다.promise다음 2개의 콜백 방식이 있습니다.

$http({method: 'GET', url: '/someUrl'}).
  success(function(data, status, headers, config) {
     var anchor = angular.element('<a/>');
     anchor.attr({
         href: 'data:attachment/csv;charset=utf-8,' + encodeURI(data),
         target: '_blank',
         download: 'filename.csv'
     })[0].click();

  }).
  error(function(data, status, headers, config) {
    // handle error
  });

이 문제에 대한 웹 상의 참조 자료 대부분은 Ajax 콜 '즉시 사용'을 통해 파일을 다운로드할 수 없다는 사실을 지적하고 있습니다.다음과 같은 (해키한) 솔루션을 본 적이 있습니다.iframes또, @dcodesmith 와 같은 솔루션도 동작해, 완전하게 실행할 수 있습니다.

여기 Angular에서 작동하며 매우 간단한 또 다른 솔루션이 있습니다.

뷰에서 를 줄바꿈합니다.csv다운로드 버튼<a>다음 방법으로 태그를 지정합니다.

<a target="_self" ng-href="{{csv_link}}">
  <button>download csv</button>
</a>

(알려주세요)target="_self여기서 ng-app 내에서 Angular의 루팅을 비활성화하는 것이 중요합니다.)

컨트롤러 내부를 정의할 수 있습니다.csv_link다음과 같이 합니다.

$scope.csv_link = '/orders' + $window.location.search;

(the)$window.location.search는 옵션이며 서버에 추가 검색 쿼리를 전달할 경우 onlt)

이제 버튼을 클릭할 때마다 다운로드가 시작됩니다.

var anchor = angular.element('<a/>');
anchor.css({display: 'none'}); // Make sure it's not visible
angular.element(document.body).append(anchor); // Attach to document

anchor.attr({
    href: 'data:attachment/csv;charset=utf-8,' + encodeURI(data),
    target: '_blank',
    download: 'filename.csv'
})[0].click();

anchor.remove(); // Clean it up afterwards

이 코드는 Mozilla와 Chrome 모두 작동합니다.

이것은 IE 11+, Firefox, Chrome에서 작동한 것입니다.safari에서는 파일을 다운로드하지만 알 수 없으며 파일 이름은 설정되지 않습니다.

if (window.navigator.msSaveOrOpenBlob) {
    var blob = new Blob([csvDataString]);  //csv data string as an array.
    // IE hack; see http://msdn.microsoft.com/en-us/library/ie/hh779016.aspx
    window.navigator.msSaveBlob(blob, fileName);
} else {
    var anchor = angular.element('<a/>');
    anchor.css({display: 'none'}); // Make sure it's not visible
    angular.element(document.body).append(anchor); // Attach to document for FireFox

    anchor.attr({
        href: 'data:attachment/csv;charset=utf-8,' + encodeURI(csvDataString),
        target: '_blank',
        download: fileName
})[0].click();
anchor.remove();
}

각도 1.5.9 사용

window.location을 csv 파일 다운로드 URL로 설정하여 이렇게 동작시켰습니다.최신 버전의 Chrome 및 IE11에서 테스트 및 동작.

각진

   $scope.downloadStats = function downloadStats{
        var csvFileRoute = '/stats/download';
        $window.location = url;
    }

html

<a target="_self" ng-click="downloadStats()"><i class="fa fa-download"></i> CSV</a>

php에서 응답에 대한 다음 헤더를 설정합니다.

$headers = [
    'content-type'              => 'text/csv',
    'Content-Disposition'       => 'attachment; filename="export.csv"',
    'Cache-control'             => 'private, must-revalidate, post-check=0, pre-check=0',
    'Content-transfer-encoding' => 'binary',
    'Expires' => '0',
    'Pragma' => 'public',
];

언급URL : https://stackoverflow.com/questions/20904151/download-text-csv-content-as-files-from-server-in-angular