22👍
UPDATE: this answer is not accurate anymore since the introduction of Blob API. Please refer to Steven’s answer for details.
ORIGINAL ANSWER:
XHR request will not trigger file download. I can’t find explicit requirement, but W3C doc on XMLHttpRequest doesn’t describe any special reaction on content-disposition=attachment responses either
You could download file by window.open()
in separate tab, if it was not POST request. Here it was suggested to use a hidden form with target=_blank
60👍
If you set the XMLHttpRequest.responseType
property to 'blob'
before sending the request, then when you get the response back, it will be represented as a blob. You can then save the blob to a temporary file and navigate to it.
var postData = new FormData();
postData.append('cells', JSON.stringify(output));
var xhr = new XMLHttpRequest();
xhr.open('POST', '/export/', true);
xhr.setRequestHeader('X-CSRFToken', csrftoken);
xhr.responseType = 'blob';
xhr.onload = function (e) {
var blob = e.currentTarget.response;
var contentDispo = e.currentTarget.getResponseHeader('Content-Disposition');
// https://stackoverflow.com/a/23054920/
var fileName = contentDispo.match(/filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/)[1];
saveOrOpenBlob(blob, fileName);
}
xhr.send(postData);
And here’s an example implementation of saveOrOpenBlob
:
function saveOrOpenBlob(blob, fileName) {
window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem;
window.requestFileSystem(window.TEMPORARY, 1024 * 1024, function (fs) {
fs.root.getFile(fileName, { create: true }, function (fileEntry) {
fileEntry.createWriter(function (fileWriter) {
fileWriter.addEventListener("writeend", function () {
window.location = fileEntry.toURL();
}, false);
fileWriter.write(blob, "_blank");
}, function () { });
}, function () { });
}, function () { });
}
If you don’t care about having the browser navigate to the file when it’s a viewable file type, then making a method that always saves directly to file is much simpler:
function saveBlob(blob, fileName) {
var a = document.createElement('a');
a.href = window.URL.createObjectURL(blob);
a.download = fileName;
a.dispatchEvent(new MouseEvent('click'));
}
- [Django]-How does the order of mixins affect the derived class?
- [Django]-Django, Models & Forms: replace "This field is required" message
- [Django]-Django ImportError: cannot import name 'render_to_response' from 'django.shortcuts'
4👍
download: function(){
var postData = new FormData();
var xhr = new XMLHttpRequest();
xhr.open('GET', downloadUrl, true);
xhr.responseType = 'blob';
xhr.onload = function (e) {
var blob = xhr.response;
this.saveOrOpenBlob(blob);
}.bind(this)
xhr.send(postData);
}
saveOrOpenBlob: function(blob) {
var assetRecord = this.getAssetRecord();
var fileName = 'Test.mp4'
var tempEl = document.createElement("a");
document.body.appendChild(tempEl);
tempEl.style = "display: none";
url = window.URL.createObjectURL(blob);
tempEl.href = url;
tempEl.download = fileName;
tempEl.click();
window.URL.revokeObjectURL(url);
},
Try this it is working for me.
- [Django]-How to set and get cookies in Django?
- [Django]-How to use regex in django query
- [Django]-Django AutoField with primary_key vs default pk
0👍
For me it worked with fetch API. I couldn’t make it work with XMLHttpRequest in React/Typescript project. Maybe I didn’t try enough. Anyway, problem is solved. Here is code:
const handleDownload = () => {
const url = `${config.API_ROOT}/download_route/${entityId}`;
const headers = new Headers();
headers.append('Authorization', `Token ${token}`);
fetch(url, { headers })
.then((response) => response.blob())
.then((blob) => {
// Create blob URL
const blobUrl = window.URL.createObjectURL(blob);
// Create a temporary anchor el
const anchorEl = document.createElement('a');
anchorEl.href = blobUrl;
anchorEl.download = `case_${entityId}_history.pdf`; // Set any filename and extension
anchorEl.style.display = 'none';
// Append the a tag to the DOM and click it to trigger download
document.body.appendChild(anchorEl);
anchorEl.click();
// Clean up
document.body.removeChild(anchorEl);
window.URL.revokeObjectURL(blobUrl);
})
.catch((error) => {
console.error('Error downloading file:', error);
});
};
- [Django]-Debugging Apache/Django/WSGI Bad Request (400) Error
- [Django]-Django Admin: how to display properties defined on model in an inline?
- [Django]-What is a "slug" in Django?