AngularJS를 사용하여 Excel 파일 다운로드 기능을 구현하는 방법

이 글은 주로 http 요청을 기반으로 php에서 생성된 엑셀 파일을 다운로드하는 AngularJS 기능을 소개합니다. AngularJS http 요청과 파일 다운로드 및 기타 관련 작업 기술을 예제 형식으로 분석하여 도움이 필요한 친구들이 참고할 수 있습니다. 이 기사에서는 http 요청을 기반으로 AngularJS의 예를 설명합니다. http 요청은 PHP에서 생성된 Excel 파일을 다운로드하는 기능을 구현합니다. 참고하실 수 있도록 자세한 내용은 다음과 같습니다.

PHPExcel 플러그인을 사용하는 학생들은 엑셀을 내보내면 생성된 콘텐츠의 콘텐츠 유형을 직접 수정하여 콘텐츠를 파일로 다운로드할 수 있다는 사실을 모두 알고 있습니다. , 다운로드하려면 클릭을 통해 페이지에 URL이 있어야 합니다.

그럼 질문은, Excel 생성 시 요청 매개변수가 있는 경우, 이때 js http 요청을 통해서만 요청할 수 있다는 것입니다.

몇 가지 조사 결과 다음과 같은 방법이 있습니다.

1. Angularjs는 다운로드를 시뮬레이션하는 태그를 생성합니다

// 创建a标签模拟下载
function exportExcel(params, filename) {
  return $http({
    url: '/api/exportExcel',
    method: "POST",
    headers: {
      'Content-type': 'application/json'
    },
    params: params,
    responseType: 'arraybuffer'
  }).success(function (data) {
    var blob = new Blob([data], {type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"});
    var objectUrl = URL.createObjectURL(blob);
    var a = document.createElement('a');
    document.body.appendChild(a);
    a.setAttribute('style', 'display:none');
    a.setAttribute('href', objectUrl);
    a.setAttribute('download', filename);
    a.click();
    URL.revokeObjectURL(objectUrl);
  });
}

이 방법에서는 전송이 xls, 즉 excel5 파일인 경우 유형은

application/vnd.ms-excel

또는 application/x-excel으로 설정되어야 합니다.

2.js는 요청 매개변수에서 URL을 생성하고

// 生成下载url
$scope.data.down_url = "../c_potential/get_excel?end_time="+$scope.end_date+"&liable="+liable+"&nickname="+$scope.data.nickname+"&province="+$scope.data.province_cur+"&start_time="+$scope.start_date;

태그를 생성한 다음 해당 URL을 태그에 바인딩합니다. 이 방법은 매개변수가 더 적은 상황에 적합하며 데이터는 그렇지 않습니다. 두 번 처리하면 오류가 발생할 가능성이 적습니다. 유일한 단점은 두 번 처리해야 한다는 것입니다. 하나는 매개변수를 생성하여 URL에 쓰는 것이고 두 번째 버튼은 다운로드입니다. 뛰어나다. 사용자가 두 번 작업을 수행하더라도 실제로는 단 한 번의 http 요청만 발생하므로 성능에는 영향을 미치지 않습니다.

3. 먼저 생성 후 다운로드 세 번째 방법은 두 번째 방법과 유사하며 먼저 엑셀 파일을 생성하고 서버에 저장한 후 다운로드합니다. 디스크 IO가 포함되므로 성능이 상대적으로 낮습니다. 이 방법은 단지 방법으로 기록되는 것입니다.

angularjs 시뮬레이션 다운로드 방법이 가장 편리하지만 오류가 발생할 수 있는 방법이 가장 안전합니다.

위 내용은 모두를 위해 제가 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련 기사:

vue에서 인덱스 파일을 컴파일, 패키징 및 보는 방법

vue에서 Jade 템플릿을 사용하는 방법

템플릿을 Angular의 구성 요소에 전달

위 내용은 AngularJS를 사용하여 Excel 파일 다운로드 기능을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!