The backend returns the file stream, how to export and download the frontend (8 methods can be realized)

When exporting and downloading the file stream returned by the backend on the frontend, the following methods can be used:

1. How to use window.open():

   • Use window.open()a method on the front end to open a new window or tab, and pass the file stream returned from the back end as a URL to the method. The browser will automatically download the file.
   • For example:window.open('http://example.com/download', '_blank');

2. Use the attributes <a>of the tag download:

   • Create a hidden <a>tag, set hrefthe attribute to the URL of the file stream returned by the backend, and set downloadthe attribute to the name of the file. Then use JavaScript to simulate clicking on the label to trigger the file download.
   • For example:

   const link = document.createElement('a');
   link.href = 'http://example.com/download';
   link.download = 'filename.ext';
   link.click();
   

3. Use Fetch API or XHR request:

   • Use the Fetch API or XHR (XMLHttpRequest) to send a request, get the file stream returned by the backend, and use the Blob object to create a URL. Then pass that URL to <a>a tag's hrefattribute, and use JavaScript to simulate a click on the tag, triggering a file download.
   • For example:

   fetch('http://example.com/download')
     .then(response => response.blob())
     .then(blob => {
         
         
       const url = URL.createObjectURL(blob);
       const link = document.createElement('a');
       link.href = url;
       link.download = 'filename.ext';
       link.click();
     });
   

These methods can be selected according to the specific needs and project environment. It should be noted that the file stream returned by the backend needs to correctly set the Content-Disposition response header to specify the file name and download method.

In addition to the methods mentioned above, there are the following five methods to realize the front-end export and download the file stream returned by the back-end:

4. Use HTML5 downloadattributes:

   • Create a <a>tag, set hrefthe attribute to the URL of the file stream returned by the backend, and set downloadthe attribute to the name of the file. Insert the tag into the DOM, and use JavaScript to simulate clicking on the tag to trigger file download.
   • For example:

   const link = document.createElement('a');
   link.href = 'http://example.com/download';
   link.download = 'filename.ext';
   document.body.appendChild(link);
   link.click();
   document.body.removeChild(link);
   

5. Using the FileSaver.js library:

   • Introduce the FileSaver.js library and use saveAs()the method to save the file stream returned by the backend as a local file. The file stream returned by the backend needs to be converted into a Blob object.
   • For example:

   import {
         
          saveAs } from 'file-saver';
   
   fetch('http://example.com/download')
     .then(response => response.blob())
     .then(blob => {
         
         
       saveAs(blob, 'filename.ext');
     });
   

6. Using iframes:

   • Create a hidden iframe, set its srcattribute to the URL of the file stream returned by the backend. The browser will automatically download the file.
   • For example:

   const iframe = document.createElement('iframe');
   iframe.style.display = 'none';
   iframe.src = 'http://example.com/download';
   document.body.appendChild(iframe);
   

7. Using FormData and XMLHttpRequest:

   • Create a FormData object, and add the file stream returned by the backend as a Blob object to FormData. Then use XMLHttpRequest to send the request, and send the FormData as the request body to the backend for download.
   • For example:

   const formData = new FormData();
   formData.append('file', blob, 'filename.ext');
   
   const xhr = new XMLHttpRequest();
   xhr.open('POST', 'http://example.com/download');
   xhr.send(formData);
   

8. Use the axios library:

   • Use the axios library to send a request, get the file stream returned by the backend, and save it as a local file. The file stream returned by the backend needs to be converted into a Blob object.
   • For example:

   import axios from 'axios';
   
   axios.get('http://example.com/download', {
         
          responseType: 'blob' })
     .then(response => {
         
         
       const blob = new Blob([response.data]);
       const url = URL.createObjectURL(blob);
       const link = document.createElement('a');
       link.href = url;
       link.download = 'filename.ext';
       link.click();
     });
   

These methods provide a variety of options to implement the front-end export and download the file stream returned by the back-end. According to the specific needs and project environment, choose the appropriate method for implementation.