Cách đặt Tiêu đề yêu cầu trước khi được tải trong khung nội tuyến

Question

Tôi cần tải xuống tệp có tiêu đề 'Nội dung-Xử lý' được đặt thành "attachment" theo máy chủ. Tôi đang sử dụng jQuery.ajax cho GET và thiết lập thành công bị ẩn iframesrc đến url, điều này mang lại cho tôi cửa sổ bật lên để tải xuống tệp. Và nó hoạt động tốt trong tất cả các trình duyệt. Bây giờ tôi muốn thay đổi một tiêu đề yêu cầu tùy chỉnh để mã hóa tập tin trước khi tải xuống GET &. Tôi đã sử dụng jQuery.ajax yêu cầu gọi lại chức năng beforeSend cho nó.

Tôi có thể TẢI tệp đã mã hóa mà tôi có thể quan sát thấy trong firebug nhưng iframe vẫn hiển thị tệp không được mã hóa để tải xuống. Sau khi kiểm tra tôi có thể nói rằng iframe yêu cầu GET mới.

Mã

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

Và điều này đang làm việc tốt trên Internet Explorer. Làm thế nào tôi có thể buộc iframe sử dụng tài nguyên sẵn có thay vì yêu cầu GET mới. Hoặc làm cách nào tôi có thể setRequestHeader trong khung nội tuyến hoặc tôi thực sự cần jQuery.Ajax cho tác vụ này là có cách nào tốt nhất để tải xuống tiêu đề Nội dung-Định vị được đặt thành tệp đính kèm trực tiếp từ máy chủ.

Answer 1

Giải pháp này không sử dụng iframe hoặc biểu mẫu. Nó sử dụng XHR với tiêu đề tùy chỉnh trên một tài nguyên có hỗ trợ CORS (chỉ ngẫu nhiên svg từ internet cho ví dụ này). Sự khác biệt quan trọng trong phương pháp này là xhr.responseType = 'arraybuffer'; và một liên kết với blob href và download thuộc tính:

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'); 
 
});

Tested trong Chrome57 và FF54.