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

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

May 22, 2018 am 09:19 AM
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()
}
로그인 후 복사
위 내용은 제가 모두를 위해 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련 기사:

Django 프레임워크에서 ajax post 메소드를 사용하는 방법(그래픽 튜토리얼)

Django의 ajax 포스트 복합 객체를 얻는 방법(그래픽 튜토리얼)

백그라운드에서 Ajax에 대해 응답 데이터 전송 문제(코드, 상세 분석 포함)

위 내용은 처리를 위한 Ajax 요청 바이너리 스트림(ajax 비동기 다운로드 파일)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

뜨거운 기사 태그

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

CPU를 너무 많이 점유하는 WIN10 서비스 호스트의 동작 과정 CPU를 너무 많이 점유하는 WIN10 서비스 호스트의 동작 과정 Mar 27, 2024 pm 02:41 PM

CPU를 너무 많이 점유하는 WIN10 서비스 호스트의 동작 과정

jQuery AJAX 요청에서 발생한 403 오류를 해결하는 방법 jQuery AJAX 요청에서 발생한 403 오류를 해결하는 방법 Feb 20, 2024 am 10:07 AM

jQuery AJAX 요청에서 발생한 403 오류를 해결하는 방법

jQuery AJAX 요청 403 오류를 해결하는 방법 jQuery AJAX 요청 403 오류를 해결하는 방법 Feb 19, 2024 pm 05:55 PM

jQuery AJAX 요청 403 오류를 해결하는 방법

PHP에서 특수 문자를 처리하고 작은따옴표를 변환하는 방법을 알아보세요. PHP에서 특수 문자를 처리하고 작은따옴표를 변환하는 방법을 알아보세요. Mar 27, 2024 pm 12:39 PM

PHP에서 특수 문자를 처리하고 작은따옴표를 변환하는 방법을 알아보세요.

Ajax를 사용하여 PHP 메소드에서 변수를 얻는 방법은 무엇입니까? Ajax를 사용하여 PHP 메소드에서 변수를 얻는 방법은 무엇입니까? Mar 09, 2024 pm 05:36 PM

Ajax를 사용하여 PHP 메소드에서 변수를 얻는 방법은 무엇입니까?

Golang이 바이너리 파일을 처리할 수 있나요? Golang이 바이너리 파일을 처리할 수 있나요? Mar 20, 2024 pm 04:36 PM

Golang이 바이너리 파일을 처리할 수 있나요?

jQuery AJAX 오류 403 문제를 해결하는 방법은 무엇입니까? jQuery AJAX 오류 403 문제를 해결하는 방법은 무엇입니까? Feb 23, 2024 pm 04:27 PM

jQuery AJAX 오류 403 문제를 해결하는 방법은 무엇입니까?

Go 언어에서 16진수를 2진수로 변환하는 방법을 쉽게 배웁니다. Go 언어에서 16진수를 2진수로 변환하는 방법을 쉽게 배웁니다. Mar 15, 2024 pm 04:45 PM

Go 언어에서 16진수를 2진수로 변환하는 방법을 쉽게 배웁니다.

See all articles