Ajax 비동기 파일 다운로드를 구현하는 방법

이번에는 Ajax 비동기 파일 다운로드 구현 방법을 알려드리겠습니다. Ajax 비동기 파일 다운로드에 대한 주의사항은 무엇인가요?

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

Requirements

관리 배경에서는 언제든지 데이터 보고서를 다운로드해야 하며 데이터를 실시간으로 생성한 후 엑셀로 변환하여 다운로드해야 합니다.

파일이 크지 않습니다. 버튼을 클릭하면 파일 저장 대화 상자가 나타납니다. 방법과 더 나은 작동 환경이 필요하지 않습니다(예를 들어 두 번째가 필요함). 방법: 생성이 너무 느린 경우 생성 과정에서 버튼을 비활성화하여 연속 생성을 방지해야 합니다.) 사용하는 경우 해결책을 볼 필요가 없습니다

방법 1

파일 요청 인터페이스를 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()
  })
}

이 방법으로 저장된 파일은 열 수 없습니다. Console.log(typeof(data))는 파일이 문자열 유형임을 확인합니다. 그 이유는 jquery가 반환된 데이터를 문자열로 변환하고 blob을 지원하지 않기 때문입니다. 유형.

올바른 방법

<button type="button" onclick="download()">导出</button>
function download() {
  var url = 'download/?filename=aaa.txt';
  var xhr = new XMLHttpRequest();
  xhr.open('GET', url, true);    // 也可以使用POST方式，根据接口
  xhr.responseType = "blob";  // 返回类型blob
  // 定义请求完成的处理函数，请求前也可以增加加载框/禁用下载按钮逻辑
  xhr.onload = function () {
    // 请求完成
    if (this.status === 200) {
      // 返回200
      var blob = this.response;
      var reader = new FileReader();
      reader.readAsDataURL(blob);  // 转换为base64，可以直接放入a表情href
      reader.onload = function (e) {
        // 转换完成，创建一个a标签用于下载
        var a = document.createElement('a');
        a.download = 'data.xlsx';
        a.href = e.target.result;
        $("body").append(a);  // 修复firefox中无法触发click
        a.click();
        $(a).remove();
      }
    }
  };
  // 发送ajax请求
  xhr.send()
}

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 자료:

AjaxFileUpload가 파일 업로드 상자를 동적으로 추가하는 방법

프로젝트의 Ajax 및 jsonp에 대한 실제 요약

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