2012-06-05 5 views
5

'Content-Disposition'헤더가 서버에 의해 "attachment"으로 설정된 파일을 다운로드해야합니다. 나는 GETjQuery.ajax을 사용하고 있습니다. 숨김 설정 성공시에는 iframesrc에서 url으로 나에게 파일 다운로드를위한 팝업이 나타납니다. 그리고 모든 브라우저에서 잘 작동합니다. 이제 GET &을 다운로드하기 전에 파일을 암호화하도록 사용자 지정 요청 헤더를 변경하고 싶습니다. 나는 jQuery.ajax pre-request 콜백 함수 beforeSend을 사용했다.iframe에로드되기 전에 요청 헤더를 설정하는 방법

방화 광에서 관찰 할 수있는 암호화 된 파일을 얻을 수 있지만 iframe은 여전히 ​​암호화되지 않은 파일을 다운로드 할 수 있습니다. 검사를 마치면 iframe이 새로운 GET을 요청한다고 말할 수 있습니다.

코드

$.ajax({ 
url: "/tutorial.text", 
beforeSend: function(xhr) { xhr.setRequestHeader("PASSWORD_HEADER", userPwd); }, 
success: function() { $("#Hidden_iframe").attr("src", this.url); }         
}); 

그리고 이것은 인터넷 익스플로러에 좋은 노력하고 있습니다. iframe에서 새로운 GET을 요청하는 대신 사용 가능한 리소스를 사용하도록하려면 어떻게해야합니까? 또는 setRequestHeader iframe에 어떻게 설치해야하나요? 아니면이 작업을 위해 실제로 jQuery.Ajax이 필요합니까? 서버에서 직접 첨부 파일로 설정된 Content-Disposition 헤더를 다운로드하는 가장 좋은 방법은 무엇입니까?

+2

답변을 얻었습니까? 비슷한 일을하려고합니다 ... 아약스 호출을 통해 파일을 다운로드하지만 다운로드에는 인증이 필요하며 크로스 도메인입니다 .... –

답변

0

이 솔루션은 iframe 또는 양식을 사용하지 않습니다. 그것은 CORS를 지원하는 리소스 (이 예에서는 인터넷의 임의의 svg)에서 사용자 정의 헤더가있는 XHR을 사용합니다. 이 방법의 주요 차이점은 xhr.responseType = 'arraybuffer';blob HREF 및 download 속성 링크입니다 :

jsfiddle

// some initial data 
 
var url = '//enable-cors.org/img/cloud-download.svg'; 
 
var password = '123456'; 
 

 
// download url into arrayBuffer 
 
function download (url, password, cb) { 
 
    var xhr = new XMLHttpRequest(); 
 
    xhr.open('GET', url, true); 
 
    xhr.responseType = 'arraybuffer'; 
 
    // xhr.setRequestHeader('PASSWORD_HEADER', password); 
 
    xhr.onload = function() { 
 
     cb(xhr.response); 
 
    }; 
 
    xhr.send(null); 
 
} 
 

 
// receive binary content of url 
 
// create blob link and click on it 
 
download(url, password, function (arrayBuffer) { 
 
    var file = new File([arrayBuffer], 'some filename'); 
 
    var a = document.createElement('A'); 
 
    a.setAttribute('href', window.URL.createObjectURL(file)); 
 
    a.setAttribute('download', 'file-name-of-download.ext'); 
 
    // in firefox `a.click()` works only if `a` element is in DOM, so... 
 
    document.documentElement.appendChild(a); 
 
    a.click(); 
 
    console.log('done'); 
 
});

이 Chrome57 및 FF54에서 테스트.

관련 문제