이번에는 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()
}
추천 자료:
Ajax는 매우 안전한 로그인 인터페이스를 구현합니다Ajax를 사용하여 양식 양식을 제출하는 단계에 대한 자세한 설명위 내용은 Ajax 비동기 다운로드 파일의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!