집 > 기사 > 웹 프론트엔드 > 처리를 위한 Ajax 요청 바이너리 스트림(ajax 비동기 다운로드 파일)

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

亚连원래의: 2018-05-22 09:19:502766검색

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()
}

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

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

관련 기사