처리를 위한 Ajax 요청 바이너리 스트림(ajax 비동기 다운로드 파일)-JS 튜토리얼-php.cn

처리를 위한 Ajax 요청 바이너리 스트림(ajax 비동기 다운로드 파일)

亚连

풀어 주다： 2018-05-22 09:19:50

원래의

2789명이 탐색했습니다.

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(&#39;a&#39;);
  var url = &#39;download/?filename=aaa.txt&#39;;
  var filename = &#39;data.xlsx&#39;;
  a.href=url;
  a.download = filename;
  a.click()
 }

로그인 후 복사

단점사용할 수 없습니다. 게시 방법

다운로드를 시작할 때 버튼을 비활성화하고 다운로드가 완료된 후에 버튼을 활성화할 수 없습니다

방법 2

많은 사람들이 첫 번째 방법이 잘못된 방법을 만족시킬 수 있다고 말합니다

기존 방법, jquery 사용 :

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

로그인 후 복사

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

올바른 방법

<button type="button" onclick="download()">导出</button>
function download() {
  var url = &#39;download/?filename=aaa.txt&#39;;
  var xhr = new XMLHttpRequest();
  xhr.open(&#39;GET&#39;, 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(&#39;a&#39;);
        a.download = &#39;data.xlsx&#39;;
        a.href = e.target.result;
        $("body").append(a);  // 修复firefox中无法触发click
        a.click();
        $(a).remove();
      }
    }
  };
  // 发送ajax请求
  xhr.send()
}

로그인 후 복사

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