Ajax를 사용하여 비동기적으로 파일을 다운로드하는 간단한 방법

관리 배경은 언제든지 데이터 보고서를 다운로드해야 하며, 데이터는 실시간으로 생성된 후 다운로드를 위해 엑셀로 변환되어야 합니다. 이 문제를 해결하는 방법? 아래 편집기에서는 Ajax 요청 바이너리 스트림 처리(ajax 비동기 파일 다운로드)에 대한 간단한 방법을 함께 살펴보겠습니다.

Abstract: Ajax는 바이너리 스트림(파일)을 요청하고 처리 또는 다운로드를 위해 Blob으로 변환하고 파일을 저장합니다.

Requirements

관리 배경은 언제든지 데이터 보고서를 다운로드해야 하며 데이터는 실제로 생성되어야 합니다. 시간을 확인한 후 다운로드를 위해 Excel로 변환합니다.

파일이 크지 않습니다. 버튼을 클릭하면 파일 저장 대화 상자가 나타납니다. 방법과 더 나은 작동 환경이 필요하지 않습니다(예를 들어 두 번째가 필요함). 방법: 생성이 매우 느린 경우 생성 과정에서 버튼을 비활성화하여 연속 생성을 방지해야 합니다.) 파일 요청 인터페이스를 로 변경할 수 있다면

solution

방법을 볼 필요는 없습니다. GET, 이 방법을 사용하거나

<a class="btn btn-primary btn-xs" download="data.xlsx" href="download/?filename=aaa.txt" rel="external nofollow" ><i class="fa fa-share-square-o fa-lg"></i> 导出</a>

또는 다른 방법으로 변경하고 js를 사용하여 동적으로 태그를 생성할 수 있습니다

<button type="button" onclick="download()">导出</button>
function download() {
  var a = document.createElement('a');
  var url = 'download/?filename=aaa.txt';
  var filename = 'data.xlsx';
  a.href=url;
  a.download = filename;
  a.click()
 }

단점

게시 방법을 사용할 수 없습니다

다운로드 시작 시 비활성화할 수 없음 버튼, 다운로드 완료 활성화 버튼

방법 2

많은 사람들이 첫 번째 방법이 만족스럽다고 합니다. 잘못된 방법

기존 방법, jquery를 사용하세요:

<button type="button" onclick="download()">导出</button>
function download() {
  var url = 'download/?filename=aaa.txt';
  $.get(url, function (data) {
    console.log(typeof(data))
    blob = new Blob([data])
    var a = document.createElement('a');
    a.download = 'data.xlsx';
    a.href=window.URL.createObjectURL(blob)
    a.click()
  })
}

이렇게 저장된 파일은 열 수 없습니다. log(typeof(data))가 표시됩니다. 이유는 jquery가 반환된 데이터를 문자열로 변환하고 blob 유형을 지원하지 않기 때문입니다. corcect Waysongreee related 권장 사항 : ajax가 비동기 요청을 보내는 Ajax가 Ajax fileUpload Asynchronous 업로드 플러그인 js의 비동기 기능 큐 기능 예제 분석의 설명에 대한 설명을 보내기위한 어구의 단계.

위 내용은 Ajax를 사용하여 비동기적으로 파일을 다운로드하는 간단한 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!