How can I download a file using window.fetch?

by

EDIT: syg answer is better. Just use downloadjs library.

The answer I provided works well on Chrome, but on Firefox and IE you need some different variant of this code. It’s better to use library for that.

I had similar problem (need to pass authorization header to download a file so this solution didn’t helped).

But based on this answer you can use createObjectURL to make browser save a file downloaded by Fetch API.

getAuthToken()
    .then(token => {
        fetch("http://example.com/ExportExcel", {
            method: 'GET',
            headers: new Headers({
                "Authorization": "Bearer " + token
            })
        })
        .then(response => response.blob())
        .then(blob => {
            var url = window.URL.createObjectURL(blob);
            var a = document.createElement('a');
            a.href = url;
            a.download = "filename.xlsx";
            document.body.appendChild(a); // we need to append the element to the dom -> otherwise it will not work in firefox
            a.click();    
            a.remove();  //afterwards we remove the element again         
        });
    });

More Related Contents:

  1. Fetch: POST JSON data
  2. Trying to use fetch and pass in mode: no-cors
  3. Handle response – SyntaxError: Unexpected end of input when using mode: ‘no-cors’
  4. Error when accessing API with fetch while setting mode to ‘no-cors’ [duplicate]
  5. What limitations apply to opaque responses?
  6. React Native fetch() Network Request Failed
  7. How do I post form data with fetch api?
  8. Fetch: reject promise and catch the error if status is not OK?
  9. Internal API fetch with getServerSideProps? (Next.js)
  10. fetch resolves even if 404?
  11. fetch(), how do you make a non-cached request?
  12. JavaScript, make a POST with JSON data with fetch()
  13. POST Request with Fetch API?
  14. fetch() unexpected end of input
  15. React useEffect causing: Can’t perform a React state update on an unmounted component
  16. Chrome – Fetch API cannot load file. How to workaround?
  17. Cannot load Deezer API resources from localhost with the Fetch API
  18. Relative paths with fetch in Javascript
  19. Hide 401 console.error in chrome dev tools getting 401 on fetch() call [duplicate]
  20. Empty body in fetch POST request
  21. How do I download a file from FastAPI backend using Fetch API in the frontend?
  22. how to process fetch response from an ‘opaque’ type?
  23. fetch retry request (on failure)
  24. JavaScript fetch – Failed to execute ‘json’ on ‘Response’: body stream is locked
  25. How to make javascript fetch synchronous?
  26. set withCredentials to the new ES6 built-in HTTP request API : Fetch
  27. How to get the filename from a file downloaded using Javascript Fetch API?
  28. How to post image with fetch?
  29. FastAPI returns “Error 422: Unprocessable entity” when I send multipart form data with JavaScript Fetch API
  30. Cannot Upload File to FastAPI backend using JavaScript Fetch API in the frontend

Leave a Comment