How can I download a file using window.fetch?
I temporarily solve this problem by using download.js and blob
.
let download = require('./download.min');
...
function downloadFile(token, fileId) {
let url = `https://www.googleapis.com/drive/v2/files/${fileId}?alt=media`;
return fetch(url, {
method: 'GET',
headers: {
'Authorization': token
}
}).then(function(resp) {
return resp.blob();
}).then(function(blob) {
download(blob);
});
}
It's working for small files, but maybe not working for large files. I think I should dig Stream more.
i am using window.fetch for downloading file , but is generating error file on server not on local
In order to be able to fetch
resources cross-origin you need to understand and properly configure CORS headers, i.e. the server needs to send the right Access-Control-Allow-Origin
and Access-Control-Allow-Methods
.
Otherwise browser security will prohibit the request.
Trying to circumvent this with {mode: 'no-cors'}
does not work as one might expect: although 'no-cors'
will ignore the CORS headers of the server the response content will then be inaccessible to your javascript code, see the documentation for Request.mode
:
no-cors
— Prevents the method from being anything other than HEAD, GET or POST, and the headers from being anything other than simple headers. If any ServiceWorkers intercept these requests, they may not add or override any headers except for those that are simple headers. In addition, JavaScript may not access any properties of the resulting Response. This ensures that ServiceWorkers do not affect the semantics of the Web and prevents security and privacy issues arising from leaking data across domains.
This is due to the resulting Response
's type
being opaque
preventing you from accessing its actual contents.
For further explanation see this excellent answer to a similar question.
So what you need to do is to use {mode: 'cors'}
and have the server appropriately configured to allow for cross-origin requests from your frontend domain.
Download File using express and fetch doesn't work
When you make a request using Ajax then the response is passed back to the JavaScript code for handling.
If you want to do something with the file the server has sent you, then you need to write JavaScript to do something with it.
Your JavaScript logs the response object then stops.
The browser will only automatically render it in the viewport / save it to downloads if you type the URL into the address bar / click a link / etc. Doing Ajax explicitly avoids that automatic handling.
So the solution here is: Don't use Ajax. Use a link, or assign a value to location
, etc.
How to get the filename from a file downloaded using Javascript Fetch API?
So, shortly after posting this question, I ran across this issue on Github. It apparently has to do with using CORS.
The suggested work around was adding Access-Control-Expose-Headers:Content-Disposition
to the response header on the server.
This worked!
Related Topics
Running JavaScript in Selenium Using Python
How to Efficiently Randomly Select Array Item Without Repeats
Es6 Variable Import Name in Node.Js
Why Does (0 < 5 < 3) Return True
How to Record Webcam and Audio Using Webrtc and a Server-Based Peer Connection
Get Value of Input Field Inside an Iframe
How to Curve/Arc Text Using CSS3/Canvas
How to Remove the "No File Chosen" Tooltip from a File Input in Chrome
Retrieving File Names Out of a Multi-File Upload Control with JavaScript
JavaScript Localstorage Object Broken in Ie11 on Windows 7
Addeventlistener Not Working in IE8
Why Does Usestate Cause the Component to Render Twice on Each Update
JavaScript Tofixed Not Rounding
Getting Bootstrap's Modal Content from Another Page