[javascript] 아약스 포스트에서 파일 다운로드 처리
특정 URL로 아약스 POST 요청을 보내는 자바 스크립트 앱이 있습니다. 응답은 JSON 문자열이거나 파일 (첨부 파일) 일 수 있습니다. 내 아약스 호출에서 Content-Type 및 Content-Disposition을 쉽게 감지 할 수 있지만 응답에 파일이 포함 된 것을 감지하면 클라이언트에게 다운로드를 제공하려면 어떻게해야합니까? 나는 여기에서 비슷한 스레드를 많이 읽었지만 그 중 어느 것도 내가 찾고있는 대답을 제공하지 않습니다.
이 옵션에 아약스를 사용해서는 안되거나 브라우저를 리디렉션해야한다는 제안을 게시하지 마십시오. 일반 HTML 양식을 사용하는 것도 옵션이 아닙니다. 필요한 것은 클라이언트에 다운로드 대화 상자를 표시하는 것입니다. 이 일을 어떻게 할 수 있습니까?
답변
양식을 작성하고 POST 메소드를 사용하여 양식을 제출하십시오. iframe이 필요하지 않습니다. 서버 페이지가 요청에 응답하면 파일의 MIME 유형에 대한 응답 헤더를 작성하면 다운로드 대화 상자가 표시됩니다. 여러 번 수행했습니다.
컨텐츠 유형의 응용 프로그램 / 다운로드를 원합니다. 사용중인 언어에 따라 다운로드를 제공하는 방법 만 검색하십시오.
답변
FileAPI의 일부를 사용하여 (현대 브라우저에서) 수행 할 수 있기 때문에 너무 빨리 포기하지 마십시오.
var xhr = new XMLHttpRequest();
xhr.open('POST', url, true);
xhr.responseType = 'arraybuffer';
xhr.onload = function () {
if (this.status === 200) {
var filename = "";
var disposition = xhr.getResponseHeader('Content-Disposition');
if (disposition && disposition.indexOf('attachment') !== -1) {
var filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;
var matches = filenameRegex.exec(disposition);
if (matches != null && matches[1]) filename = matches[1].replace(/['"]/g, '');
}
var type = xhr.getResponseHeader('Content-Type');
var blob;
if (typeof File === 'function') {
try {
blob = new File([this.response], filename, { type: type });
} catch (e) { /* Edge */ }
}
if (typeof blob === 'undefined') {
blob = new Blob([this.response], { type: type });
}
if (typeof window.navigator.msSaveBlob !== 'undefined') {
// IE workaround for "HTML7007: One or more blob URLs were revoked by closing the blob for which they were created. These URLs will no longer resolve as the data backing the URL has been freed."
window.navigator.msSaveBlob(blob, filename);
} else {
var URL = window.URL || window.webkitURL;
var downloadUrl = URL.createObjectURL(blob);
if (filename) {
// use HTML5 a[download] attribute to specify filename
var a = document.createElement("a");
// safari doesn't support this yet
if (typeof a.download === 'undefined') {
window.location.href = downloadUrl;
} else {
a.href = downloadUrl;
a.download = filename;
document.body.appendChild(a);
a.click();
}
} else {
window.location.href = downloadUrl;
}
setTimeout(function () { URL.revokeObjectURL(downloadUrl); }, 100); // cleanup
}
}
};
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xhr.send($.param(params));다음은 jQuery.ajax를 사용하는 이전 버전입니다. 응답이 일부 문자 집합의 문자열로 변환 될 때 이진 데이터를 엉망으로 만들 수 있습니다.
$.ajax({
type: "POST",
url: url,
data: params,
success: function(response, status, xhr) {
// check for a filename
var filename = "";
var disposition = xhr.getResponseHeader('Content-Disposition');
if (disposition && disposition.indexOf('attachment') !== -1) {
var filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;
var matches = filenameRegex.exec(disposition);
if (matches != null && matches[1]) filename = matches[1].replace(/['"]/g, '');
}
var type = xhr.getResponseHeader('Content-Type');
var blob = new Blob([response], { type: type });
if (typeof window.navigator.msSaveBlob !== 'undefined') {
// IE workaround for "HTML7007: One or more blob URLs were revoked by closing the blob for which they were created. These URLs will no longer resolve as the data backing the URL has been freed."
window.navigator.msSaveBlob(blob, filename);
} else {
var URL = window.URL || window.webkitURL;
var downloadUrl = URL.createObjectURL(blob);
if (filename) {
// use HTML5 a[download] attribute to specify filename
var a = document.createElement("a");
// safari doesn't support this yet
if (typeof a.download === 'undefined') {
window.location.href = downloadUrl;
} else {
a.href = downloadUrl;
a.download = filename;
document.body.appendChild(a);
a.click();
}
} else {
window.location.href = downloadUrl;
}
setTimeout(function () { URL.revokeObjectURL(downloadUrl); }, 100); // cleanup
}
}
});답변
나는 같은 문제에 직면하여 성공적으로 해결했습니다. 내 유스 케이스는 이것입니다.
” JSON 데이터를 서버에 게시하고 Excel 파일을받습니다.이 Excel 파일은 서버에 의해 작성되어 클라이언트에 대한 응답으로 리턴됩니다. 브라우저에서 사용자 정의 이름을 가진 파일로 해당 응답을 다운로드하십시오. “
$("#my-button").on("click", function(){
// Data to post
data = {
ids: [1, 2, 3, 4, 5]
};
// Use XMLHttpRequest instead of Jquery $ajax
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
var a;
if (xhttp.readyState === 4 && xhttp.status === 200) {
// Trick for making downloadable link
a = document.createElement('a');
a.href = window.URL.createObjectURL(xhttp.response);
// Give filename you wish to download
a.download = "test-file.xls";
a.style.display = 'none';
document.body.appendChild(a);
a.click();
}
};
// Post data to URL which handles post request
xhttp.open("POST", excelDownloadUrl);
xhttp.setRequestHeader("Content-Type", "application/json");
// You should set responseType as blob for binary responses
xhttp.responseType = 'blob';
xhttp.send(JSON.stringify(data));
});위의 스 니펫은 다음과 같습니다.
- XMLHttpRequest를 사용하여 서버에 배열을 JSON으로 게시
- blob (이진)으로 콘텐츠를 가져온 후 다운로드 가능한 URL을 만들어 보이지 않는 “a”링크에 첨부 한 다음 클릭합니다.
여기서는 서버 측에서 몇 가지 사항을 신중하게 설정해야합니다. Python Django HttpResponse에서 헤더를 거의 설정하지 않았습니다. 다른 프로그래밍 언어를 사용하는 경우 적절하게 설정해야합니다.
# In python django code
response = HttpResponse(file_content, content_type="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet")여기서 xls (excel)를 다운로드 했으므로 contentType을 1 이상으로 조정했습니다. 파일 형식에 따라 설정해야합니다. 이 기술을 사용하여 모든 종류의 파일을 다운로드 할 수 있습니다.
답변
어떤 서버 측 언어를 사용하고 있습니까? 내 응용 프로그램에서 PHP의 응답에 올바른 헤더를 설정하여 AJAX 호출에서 파일을 쉽게 다운로드 할 수 있습니다.
서버 측 헤더 설정
header("HTTP/1.1 200 OK");
header("Pragma: public");
header("Cache-Control: must-revalidate, post-check=0, pre-check=0");
// The optional second 'replace' parameter indicates whether the header
// should replace a previous similar header, or add a second header of
// the same type. By default it will replace, but if you pass in FALSE
// as the second argument you can force multiple headers of the same type.
header("Cache-Control: private", false);
header("Content-type: " . $mimeType);
// $strFileName is, of course, the filename of the file being downloaded.
// This won't have to be the same name as the actual file.
header("Content-Disposition: attachment; filename=\"{$strFileName}\"");
header("Content-Transfer-Encoding: binary");
header("Content-Length: " . mb_strlen($strFile));
// $strFile is a binary representation of the file that is being downloaded.
echo $strFile;이것은 실제로 다운로드 페이지로 브라우저를 ‘리디렉션’하지만 @ahren이 이미 언급했듯이 현재 페이지에서 벗어나지 않습니다.
올바른 헤더를 설정하는 것이 전부이므로 PHP가 아닌 경우 사용중인 서버 측 언어에 적합한 솔루션을 찾을 것입니다.
응답 클라이언트 측 처리
AJAX 호출 방법을 이미 알고 있다고 가정하면 클라이언트 측에서 서버에 대한 AJAX 요청을 실행합니다. 그런 다음 서버는이 파일을 다운로드 할 수있는 링크 (예 : 가리 키려는 ‘전달’URL)를 생성합니다. 예를 들어 서버는 다음과 같이 응답합니다.
{
status: 1, // ok
// unique one-time download token, not required of course
message: 'http://yourwebsite.com/getdownload/ska08912dsa'
}응답을 처리 할 때 iframe본문에 를 삽입하고 iframe의 SRC를 방금 수신 한 URL로 설정하십시오 (이 예제의 편의를 위해 jQuery 사용).
$("body").append("<iframe src='" + data.message +
"' style='display: none;' ></iframe>");위에 표시된대로 올바른 헤더를 설정 한 경우 iframe은 현재 페이지에서 브라우저를 탐색하지 않고 다운로드 대화 상자를 강제 실행합니다.
노트
귀하의 질문과 관련하여 추가 추가; AJAX 기술로 물건을 요청할 때 항상 JSON을 반환하는 것이 가장 좋습니다. JSON 응답을 수신 한 후 클라이언트 측에서 수행 할 작업을 결정할 수 있습니다. 예를 들어, 나중에 사용자가 다운로드를 직접 강요하는 대신 URL에 대한 다운로드 링크를 클릭하기를 원할 수도 있습니다. 현재 설정에서 클라이언트와 서버 측 모두를 업데이트해야합니다.
답변
Angular 관점에서 솔루션을 찾고있는 사람들에게는 이것이 효과적입니다.
$http.post(
'url',
{},
{responseType: 'arraybuffer'}
).then(function (response) {
var headers = response.headers();
var blob = new Blob([response.data],{type:headers['content-type']});
var link = document.createElement('a');
link.href = window.URL.createObjectURL(blob);
link.download = "Filename";
link.click();
});답변
여기 내가 어떻게 작동하는지
https://stackoverflow.com/a/27563953/2845977
$.ajax({
url: '<URL_TO_FILE>',
success: function(data) {
var blob=new Blob([data]);
var link=document.createElement('a');
link.href=window.URL.createObjectURL(blob);
link.download="<FILENAME_TO_SAVE_WITH_EXTENSION>";
link.click();
}
});download.js를 사용하여 업데이트 된 답변
$.ajax({
url: '<URL_TO_FILE>',
success: download.bind(true, "<FILENAME_TO_SAVE_WITH_EXTENSION>", "<FILE_MIME_TYPE>")
});답변
나는 당신이 이미 해결책을 찾았다는 것을 알지만, 큰 POST 요청으로 같은 것을 달성하려고 시도하는 데 도움이 될만한 정보를 추가하고 싶었습니다.
나는 실제로는 AJAX를 통해 “깨끗한”다운로드를 달성 할 수없는, 몇 주 전에 동일한 문제가 있었다, 필라멘트 그룹 정확하게 당신이 이미 발견했습니다 어떻게가 호출 될 때 작동하는 jQuery 플러그인 생성 jQuery를 파일 다운로드 그러나이 기술에 단점이있다.
AJAX (예 : 파일 + 1MB)를 통해 큰 요청을 보내는 경우 응답 성이 떨어집니다. 인터넷 연결 속도가 느리면 요청이 전송 될 때까지 많이 기다려야하며 파일이 다운로드 될 때까지 기다려야합니다. 즉각 “클릭”=> “팝업”=> “다운로드 시작”과는 다릅니다. “클릭”=> “데이터가 전송 될 때까지 기다리십시오”=> “응답을 기다리는 중”=> “다운로드 시작”과 비슷합니다. 요청이 전송 될 때까지 기다려야하므로 파일 크기가 두 배로 나타납니다. AJAX를 통해 다운로드 가능한 파일로 다시 가져옵니다.
1MB 미만의 작은 파일 크기로 작업하는 경우이를 알 수 없습니다. 그러나 내 앱에서 발견 한 것처럼 더 큰 파일 크기의 경우 거의 견딜 수 없습니다.
내 응용 프로그램을 사용하면 사용자가 동적으로 생성 된 이미지를 내보낼 수 있습니다.이 이미지는 POST 요청을 통해 base64 형식의 서버로 전송되며 (유일한 방법 임) 처리되고 .png, .jpg 파일, base64의 형태로 사용자에게 다시 전송됩니다. 이미지 + 1MB의 문자열이 너무 커서 사용자가 파일 다운로드를 시작하는 데 필요한 시간 이상을 기다려야합니다. 인터넷 연결 속도가 느리면 정말 성 가실 수 있습니다.
이것에 대한 나의 해결책은 파일을 서버에 임시로 작성하는 것이 었습니다. 일단 준비되면 “Please wait …”와 “Download”상태 사이에서 동일하게 버튼 형태로 파일에 대한 링크를 동적으로 생성하십시오 시간이되면 미리보기 팝업 창에서 base64 이미지를 인쇄하여 사용자가 “오른쪽 클릭”하여 저장할 수 있습니다. 이것은 모든 대기 시간을 사용자가 더 견딜 수있게 만들고 속도를 높입니다.
2014 년 9 월 30 일 업데이트 :
이 글을 게시 한 지 몇 달이 지났고 마침내 큰 base64 문자열로 작업 할 때 속도를 높이는 더 좋은 방법을 찾았습니다. 이제 long64 텍스트 또는 longblog 필드를 사용하여 base64 문자열을 데이터베이스에 저장 한 다음 jQuery 파일 다운로드를 통해 레코드 ID를 전달합니다. 마지막으로 다운로드 스크립트 파일에서이 ID를 사용하여 데이터베이스를 쿼리하여 base64 문자열을 가져 와서 전달합니다. 다운로드 기능.
스크립트 다운로드 예 :
<?php
// Record ID
$downloadID = (int)$_POST['id'];
// Query Data (this example uses CodeIgniter)
$data = $CI->MyQueries->GetDownload( $downloadID );
// base64 tags are replaced by [removed], so we strip them out
$base64 = base64_decode( preg_replace('#\[removed\]#', '', $data[0]->image) );
// This example is for base64 images
$imgsize = getimagesize( $base64 );
// Set content headers
header('Content-Disposition: attachment; filename="my-file.png"');
header('Content-type: '.$imgsize['mime']);
// Force download
echo $base64;
?>나는 이것이 OP가 요청한 것 이상의 방법이라는 것을 알고 있지만 내 결과로 내 대답을 업데이트하는 것이 좋을 것이라고 생각했습니다. 내 문제에 대한 해결책을 찾을 때, 내가 찾던 답을 얻지 못한 “AJAX POST 데이터에서 다운로드” 스레드를 많이 읽었습니다. 이 정보가 누군가가 이와 같은 것을 달성하는 데 도움이되기를 바랍니다.
